How to add a File Upload Field

Published in Convert Forms
Updated 25 May, 2019

Do you want to allow users to upload files on your site? Convert Forms File Upload Field allows you to easily collect files and media through your Joomla! forms. Let's see how you can easily add an upload field to your form like in the screenshot below.

How to add a File Upload field

Convert Forms makes it easy to accept files from your website visitors. All you need to do is add the File Upload field to your form with just a single click.

Add File Upload Field to Joomla! Forms

Where are uploaded files stored?

By default, the user-uploaded files are stored in the com_convertforms/uploads folder inside the media directory of your site.

Configure the Uploaded Folder in your Joomla! Form

If you’d prefer to upload the files to another folder, click on the File Upload field in the form builder and in the Upload Folder option enter a path relative to the root of your webspace. Make sure the path entered is writable, otherwise the file upload will fail.

How to allow multiple file uploads?

Convert Forms File Upload field supports multiple file uploads with a single field. To do so, go to the File Upload field settings and configure the Files Limit option accordingly. Enter 0 if you don't want any limit.

Allow multiple file uploads in your Joomla! Form

The File Limit option is available in the Pro version only. Convert Forms Free users are limited to upload 1 file per field.

What is the maximum file size allowed for uploads?

To find the maximum allowed file size, you can click on the File Upload field in the form builder. Then, from the Field Options panel, mouse over the the File Size Limit label. The tooltip will show the maximum file size that your server allows.

Set the maximum allowed file size in your Joomla! Form

If you’d like to increase the file upload size of your site, you’ll need to reach out to your hosting provider to find out if it’s possible.

How to restrict certain file types?

To restrict certain file types, click on the File Upload field in the form builder. In the Field Options panel there will a field called Allowed File Types. Here, you can specify the extensions you’d like to allow, separated by a comma.

Allow only certain file types to be uploaded in your Joomla! Form

How to auto-delete old uploaded files?

By default, files uploaded in a File Upload field will remain on your site indefinitely. If you are getting a lot of uploads, though, the server space used by the uploaded files can quickly mount up, requiring some regular housekeeping to free up space. Convert Forms can be configured to auto delete uploaded files after a period set in the Auto Delete Files option found in the File Upload settings. For example, enter 15, to auto-delete files more than 15 days old or 0 if you want to keep the files forever.

The Convert Forms Uploaded Files Cleaner plugin needs to be enabled and the respective Cron Job URL set on your server.

How to include uploaded file on email?

In order to include an uploaded file on an email notification, you will need to use the respective field Smart Tag {field.fieldkey} as you would normally do with any field that you would like to pull its value. In the case of the File Upload Field, the Smart Tag will return the file's front-end URL.

Let's see some examples:

Include file as attachment

To include uploaded files as attachments in the email notification, use the field's Smart Tag in the Attachments option like in the screenshot below.

Note: File attachments can often hurt email deliverability. For example, if an email provider only allows a maximum of 10MB attachment but the user uploads a file size higher than 10MB, the email won't be delivered.

Display as a link

To receive an e-mail notification including a link pointing to the uploaded file, use the following code:

<a href="{field.fileuploaded}">{field.fileuploaded}</a>

Display as a download link

There are cases where you'd like to download the file when clicking on the link (instead of navigating to the file). To make that happen you will need to add the download attribute to the <a> element like in the example:

<a href="{field.fileuploaded}" download>Download File</a>

Display as an image

Another case is where you would like to see a preview of the uploaded image. To do that, you just need to include an <img> element and add the respective Field Smart Tag to its src property.

<img src="{field.userimage}" width="500px" height="auto"/>

You can also have a downloadable preview image link

<a href="{field.userimage}" download>
	<img src="{field.userimage}" width="500px" height="auto"/>
</a>

To learn more details on how you can properly configure your forms to send an email on each form submission, visit the Email Notitications Guide.

Translate the File Upload Field into your language

To display the default File Upload Field text into your language, you will need to do an override of the following language strings:

  • COM_CONVERTFORMS_UPLOAD_DRAG_AND_DROP_FILES="Drag and drop files here or"
  • COM_CONVERTFORMS_UPLOAD_BROWSE="Browse"

To learn how to create a language override in Joomla, visit: https://docs.joomla.org/J3.x:Language_Overrides_in_Joomla

File Upload Security

We're sometimes asked about the security around the file upload feature. Bear in mind that files can only be uploaded to the server if there's a file upload field on an active form. If no active forms have a file upload field then no files can be uploaded to the server.

How Convert Forms protects you from attackers

Prevents unauthorized access

Convert Forms attempts to protect you against unauthorized requests called CSRF (Cross Site Request Forgery) attacks by adding a token into each File Upload request. This token is a randomized string that is used to authenticate that the request being made is coming from a valid form and a valid session. Read more details about this method, on the Joomla! official documentation page here.

Randomises uploaded file names

Once hackers have managed to upload an executable file to your server, they may attempt to execute it using a web browser or command line. One simple trick from preventing hackers running their file is to randomly rename it. Convert Forms protects you by adding a random prefix to the file uploaded.

Disables upload directory file browsing

If there is no default page or homepage under a website directory or folder, you may find it display all files under the directory when browsing it from web browsers. Convert Forms uses another trick to disable directory browsing by placing an empty index.html file into every upload directory.

Prevents PHP execution inside the upload directory

Although PHP files are not allowed to be uploaded by default, Convert Forms needs to ensure also that PHP files are disabled and not executed inside the upload directory folder structure. It makes that happen by generating and placing an .htaccess file into each upload directory.

Makes use of the Joomla!'s index.php entry point file to handle uploads

All file uploads pass through the Joomla! application ensuring bad files and code upload attacks are blocked. This also makes Convert Forms compatible with security-based Joomla! extensions such as Akeeba Admin Tools which adds an extra layer of security to file uploads.

Best practices to increase File Upload security

Reduce max file upload size

Preventing users from uploading large files will reduce the risk of your file upload system being used for a DoS attack. Make sure you've properly configured the File Size Limit option found under the File Upload options.

Restrict file types

When a file upload field is added to a form make sure you configure the Allowed File Types option to be as restrictive as possible. There are certain extensions that Convert Forms will always block to protect from attacks but it's good practice to limit the extensions to the file extensions you expect to receive.

Use a different Upload Folder for each form

You may wish to increase the security of your uploaded files by changing the place they're stored to a different place for each form. You can do this by configuring the Upload Folder option.

SUMMER 2019 SALE 30% off any Tassos.gr extension. Coupon code SUMMER2019