This tutorial would continue a set of my articles devoted to Chrono Forms. Currently we will deal with adding of file uploads to your custom form.

This is an example of simple form that can be created on the earlier articles:

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 file with drag and drop using the wizard. This form already exist so we will add the code manually.

Let’s begin!

1. Open the form HTML editor

A file input is very similar to a text input so we were 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.

2. Create the file field html

Here is the code copied and pasted with the label, file type, name and ID changed:

Click the Apply icon to save the changes and refresh the form view in browser.

3. Check the form in the browser

And here is our form with the extra File Upload field.

It won’t work yet though; we have some more setup to do.

4. Check your server configuration

In Joomla Admin (logged in as SuperAdmin) go to Help > System Info > PHP Information:

Scroll down the page until you find file_uploads and check this is ON:

Then upload_max_filesize and check this is big enough for the files you want to upload. If these settings aren’t correct please check with your ISP.

5. Configure your file validation

Now go back to the Chrono Forms 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,000 kb and a minimum sizw of 0kb.

Save your form.

6. Finding the uploaded files

Now test your form by uploading a test file.

Chrono Forms will rename the file by adding a prefixes based on the date and time – this prevents problem with uploads having the same name.

Chrono Forms will put the uploaded files in the components/com_chronocontact/upload{form_name} folder.

Your upload form should now be working properly!

Extras

By default Chrono Forms component 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.