Professional Documents
Culture Documents
CHRONO E N G I N E www.chronoengine.com
Here's the simple form that was created in the earlier tutorial. We are going to add a file upload field to this form. If you are creating a form from scratch you can add an upload field with drag and drop using the wizard. This form already exists so we'll add the code manually.
A file input is very similar to a text input so we're just going to copy and paste a block of code from the existing html. Note: the code shown here has been reformatted from the default ChronoForms to make the layout clearer - the html is unchanged.
Here's the code copied and pasted with the label, file type, name and id changed. The click the Apply icon to save the changes and refresh the form view in the browser.
And here's our form with the extra File Upload field. It won't work yet though, we have some more setup to do.
Back in the Form Manager - go to the General Tab and enter enctype="multipart/form-data" in the Form tag attachment box. Note: ChronoForms will try to do this for you but it's better to put the entry in yourself to avoid problems. This tells the system to look out for form data.
In Joomla Admin (logged in as SuperAdmin) go to Help | System Info | PHP Information Scroll down the page - it's long - until you find file_uploads and check this is ON; then upload_max_size and check this is big enough for the files you want to upload. If these settings aren't correct please check with your ISP.
Now go back to the ChronoForms Form Manager and open your form. Open the File Uploads tab and set Enable Uploads to ON. Lastly, set the validation checks for your form. Here I've used file_1:jpg|pdf{1000-1} that is for form field file_1 allow file suffixes jpg and pdf (or JPG and PDF) with a maximum size of 1,000kb and a minimum size of 0kb. Save your form. Note: the Maximum size should be less than the upload_max_filesize for your server.
Now test your form by uploading a test file. ChronoForms will rename the file by adding a prefixed based on the date and time - this prevents problem with uploads having the same name. ChronoForms will put the uploaded files in the components/com_chronocontact/upload/{form_name} folder. Your upload form should now be working perfectly!
Extras
By default ChronoForms will attach file uploads to the Email template and will save the file name in the database table if you create one. You can change these settings if you wish. There are various examples in the Forums. Emmanuel Danan has also created a ChronoForms plugin (see image above) that will relocate, rename and create thumbnails for a form with one image upload field.