You are on page 1of 10

CHRONO Forms

ChronoForms v3.0 Tutorials


#6 Adding file upload to a form

CHRONO E N G I N E www.chronoengine.com

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

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

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

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

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

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

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

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

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