FileUpload Snippet Tutorial
If you use this extra and like it, please consider donating. The suggested donation for this extra is $5.00, but any amount you want to give is fine (really). For a one-time donation of $50.00 you can use all of my non-commercial extras with a clear conscience.
This snippet is for use with MODx Revolution. FileUpload can be used to upload a variable number of files in the front end of your site. FileUpload is based on Michel van de Wetering's FileUpload snippet for MODx Evolution. It has been refactored for MODx Revolution and some new capabilities have been added.
Installing FileUpload for MODx Revolution
Go to Extras | Installer (Package Management) on the main menu in the MODx Manager and click on the "Download Extras" button. That will take you to the Revolution Repository (AKA Web Transport Facility). Put FileUpload in the search box and press Enter. Click on the "Download" button, and when the download is finished, click on the "Back to Package Manager" button. That should bring you back to your Package Management grid. Find FileUpload in the grid and click on the "Install" button. Follow the prompts to install FileUpload.
You can place a file upload form on any page by inserting the following tag:
The form will present a number of file upload fields. The user can browse to each file to be uploaded. When the user clicks on the "Upload File(s)" button, the snippet will attempt to upload the files. The user will get feedback on the success or failure of the upload for each file. You can place more than one upload form on a page simply by repeating the snippet tag. Each form can send files to a separate directory.
You can control the number of file upload fields shown on each form with the
&filefields property. There is no limit on the number of fields. The default is 5. You restrict the groups who can upload with the
&uploadgroups property. If you leave out that property, anyone can upload. The
&path property specifies the directory where the uploaded files will be placed. The path you specify will be appended to the value in the assets_path System Setting and your path should not have a slash at the beginning. If you leave out the
&path property, the files will go to assets/uploads/ directory. Here is an example using those properties:
[[!FileUpload? &filefields=`20` &uploadgroups=`Administrator,Editors,Subadmins` &path=`uploads/mygallery/picnic/` ]]
Using a TV to specify the path
Rather than supplying a
&path property, you can put the upload path in a template variable and send the name of that TV in the
For example, create a TV called "UploadPath" and attach it to the template for the pages where the snippet will be used. Edit those pages, and on the TV tab, set the upload path for that TV. The upload path you specify will be appended to the MODX base path. It should have a slash at the end, but not at the beginning.
If you set the default value of the TV to something like this when you create it:
You'll only have to set it for a parent document and the children will inherit the value. If the value is unset for some page, the default path will be used.
To use the TV to specify where the uploaded files will go, do this in the FileUpload tag:
Each page that uses the snippet will then have its own upload path, depending on the setting of the TV for that page.
Directory Creation and Permissions
If you specify a path for the files that does not exist, the
&createpath property determines whether the directories for the path will be created or not. The default is not to create the path, which is somewhat more secure, but you may choose to override that if you want Manager users to be able to create file directories.
&dirpermission property sets the permission for any newly created directories. The default is
File Size and File Extension Issues
&maxsize property limits the size of uploaded files, though any upload limit set in php.ini will also be respected. If you leave out this property, the upload_maxsize System Setting will be used. The
&extensions property specifies a comma-separated list of the allowable extensions for uploaded files. The list should have no spaces and no periods. If omitted, the value from the upload_files System Setting will be used. Note that the default value of upload_files is a long list, but at this writing, some of the standard image types are missing.
FileUpload fires the OnFileManagerUpload System Event. It sends information on the uploads. For each attempted file, it includes the name, size, type, tmp_name, extension, and error. If the upload was successful, error will be 0, if not it will contain an error message. The information also includes the directory to which the files were intended to be uploaded.
The package includes an example plugin that shows how to process the upload information. The plugin is disabled. To create your own plugin, duplicate the example, make sure it's connected to the OnFileManagerUpload event, and enable it. Don't forget that last step.
You can do whatever you like in the plugin. One common use is to email someone the information about the uploaded files. You could also create a file containing a log of uploaded files.
Note that the format of the information is not the same as that sent from other MODX code that fires the OnFileManagerUpload event (it's much more convenient to work with). The code at the top of the plugin prevents it from executing unless the Event was fired by the FileUpload snippet. Be sure not to remove it.
|&language||Language for error messages/prompts||`en`|
|&outertpl||Name of outer Tpl chunk||`fuOuterTpl`|
|&innertpl||Name of inner Tpl chunk||`fuInnerTpl`|
|&messagetpl||Name of message Tpl chunk||`fuMessageTpl`|
|&path||Directory for uploaded files||`assets/uploads/`|
|&uploadtv||Name of a template variable holding the upload path||``|
|Note: You must include either the &path or the &uploadtv property (but not both).|
|&maxsize||Maximum size for uploaded files in bytes||upload_maxsize System Setting|
|&extensions||Comma-separated list of allowed extensions||upload_files System Setting|
|&createpath||If set, upload directory will be created||`No`|
|&uploadgroups||Comma-separated list of user groups who can upload files||``|
|&filefields||Number of file input fields to show||`5`|
|&cssfile||Name of CSS file to use||`fileupload.css`|
|&allowoverwrite||Set to `1` to allow overwriting existing files||`0`|
|&targetfile||Allows uploading a single specified file.||``|
|&dirpermission||Permission for created directories||`0755`|
Styling FileUpload Sections
The file: /assets/components/fileupload/css/fileupload.css contains the CSS for the upload form. You'll probably want to change it. Create a copy of the file in the same location called myfileupload.css and edit that file so your work won't be overwritten when you upgrade the component. Add the following property to your FileUpload snippet tag:
If you have the book and would like to download the code, you can find it here.
If you have the book and would like to see the updates and corrections page, you can find it here.
MODX: The Official Guide is 772 pages long and goes far beyond this web site in explaining beginning and advanced MODX techniques. It includes detailed information on:
- Installing MODX
- How MODX Works
- Working with MODX resources and Elements
- Using Git with MODX
- Using common MODX add-on components like SPForm, Login, getResources, and FormIt
- MODX security Permissions
- Customizing the MODX Manager
- Using Form Customization
- Creating Transport Packages
- MODX and xPDO object methods
- MODX System Events
- Using PHP with MODX
Go here for more information about the book.
Thank you for visiting BobsGuides.com
— Bob Ray