1. CHRONO
Forms
ChronoForms v3.0 Tutorials
#6 Adding file upload to a form
CHRONO
ENGINE
www.chronoengine.com

2. Adding file upload to a form in ChronoForms
This lesson shows you how to add file uploads to your ChronoForms Form
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.
Adding file upload to a form in ChronoForms - 1 Tutorial by GreyHead ~ www.greyhead.net

3. Open the Form HTML editor
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.
Adding file upload to a form in ChronoForms - 2 Tutorial by GreyHead ~ www.greyhead.net

4. Create the file field html
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.
Adding file upload to a form in ChronoForms - 3 Tutorial by GreyHead ~ www.greyhead.net

5. Check the form 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.
Adding file upload to a form in ChronoForms - 4 Tutorial by GreyHead ~ www.greyhead.net

6. 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.
Adding file upload to a form in ChronoForms - 5 Tutorial by GreyHead ~ www.greyhead.net

7. Check your server configuration
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.
Adding file upload to a form in ChronoForms - 6 Tutorial by GreyHead ~ www.greyhead.net

8. Configure your file validation
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.
Adding file upload to a form in ChronoForms - 7 Tutorial by GreyHead ~ www.greyhead.net

9. Finding the uploaded files
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!
Adding file upload to a form in ChronoForms - 8 Tutorial by GreyHead ~ www.greyhead.net

10. 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.
Adding file upload to a form in ChronoForms - 9 Tutorial by GreyHead ~ www.greyhead.net