How to add a File Upload Custom Field in Joomla

Updated 02 Apr, 2019

Are you fan of the Joomla! Custom Fields and you're missing a way to add a File Upload Field? Would you like to be able to upload a PDF or a ZIP file directly in the article's editing page and display the respective download link in the front-end? Or maybe give your users the ability to upload a profile photo while registering for a new account?

Advanced Custom Fields extension offers a drag & drop multiple file upload field that can be used with any component that supports the Joomla! Fields. Below you can see an example of a file upload field added in the article editing page.

How to add a File Upload Field to Joomla! Articles

The File Upload Field can be used with any component that supports the Joomla! Fields such as the Articles (com_content), User (com_user) and the Contact (com_contact) component. Let's see a real-world example where content authors can upload a PDF file in the article's editing page in the backend and website visitors can see a download link in the front-end.

Step 1: Create a new File Upload Field

Go to Content -> Fields, click New to create a new field. From the Type dropdown, select the ACF - File Upload option.

Joomla File Upload Custom Field

Click to save the field in order to return back to the same page where now, you can see 2 new setting groups.

Step 2: Set the File Upload rules

In the 1st group called File Upload Settings, we can set rules and restrictions on the files that are allowed to be uploaded by our field. In our case, we want limit the user to upload 1 PDF file up to 2 MB.

Joomla File Upload Custom Field

  • Set an upload folder to the respective option.
  • Set Files Limit to 1
  • Set File Size Limit to 2 MB
  • Set Allowed Files Types to .pdf

Step 3: Set how the uploaded file will be displayed in the front-end

In the 2nd group called Front-end Display, we can define how the uploaded files will be displayed in the front-end. In our case, we want to display a downloadable link to the uploaded PDF file. To do so, follow the steps below:

Joomla File Upload Custom Field

  • Set Layout to Link
  • Set Link Text to Download Product Brochure or anything similar.
  • Enable Force Download. This option forces the browser to download the file on the current window, instead of navigating to it on a new tab.

Save the field and proceed to the next step.

Step 4: Upload a PDF file in your Joomla! article

Now, that we have our file upload field properly configured, we should be able to see it on the article's editing page in the back-end.

Joomla File Upload Custom Field

The last step is to upload a PDF file and save the article. Finally, depending on your Joomla! template, you should be able to see a similar download link as shown in the picture below.

Joomla File Upload Custom Field

How to Add a File Upload Field to Joomla! Registration Form

There are cases where you'd like to enhance the Joomla! registration form with custom fields and specifically with a File Upload Field. A common case is where we want the user to upload a profile photo while they register for a new account on our site. That photo can be then displayed and edited in the user's profile page.

Step 1: Create a new Field Upload Field

Go to the Users -> Fields, click New to create a new field. From the Type dropdown, select ACF - File Upload.

Add a File Upload Field to Joomla! Registration Form

Click to save the field in order to return back to the same page where now, you can see 2 new setting groups.

Step 2: Set the File Upload Rules

In the 1st group called File Upload Settings, we can set rules and restrictions on the files that are allowed to be uploaded by our field. In our case, we want limit the user to upload 1 image up to 3 MB.

Add a File Upload Field to Joomla! Registration Form

  • Set an upload folder to the respective option.
  • Set Files Limit to 1.
  • Set File Size Limit to 3 MB.
  • Set Allowed Files Types to .jpg, .png.

Step 3: Set how the uploaded file will be displayed in the user profile page

In the 2nd group called Front-end Display, we can define how the uploaded files will be displayed in the front-end. In our case, we want to display the actual uploaded image when the user views their profile page. To do so, set Layout to Image.

Add a File Upload Field to Joomla! Registration Form

Save the field and proceed to the next steps.

Step 4: Test the Joomla! Registration Form

Go to the registration form in the front-end. There, you should be able to see the file upload field we created in the previous step.

Add a File Upload Field to Joomla! Registration Form

Note: Keep in mind that the styling of the form showing in the picture above may vary depending on your site's template.

Step 5: View the Uploaded Photo in the User Profile Page

After you've created a test account, go to the User Profile page, where you should be able to see an overview of the account including the uploaded photo.

Add a File Upload Field to Joomla! Registration Form

To remove the uploaded photo or upload a new one, go to the Edit Profile Page.

The File Upload Field Settings

Below, you can find a list of the available options of the File Upload Field.

File Upload Settings
Upload Folder Enter the path relative to the root of your webspace where the uploaded files will be stored. Make sure the path entered is writable, otherwise the file upload will fail.
Files Limit Enter the total number of files the user is allowed to upload. Enter 0 for no limit.
File Size Limit Configure the maximum allowable size for each uploaded file in megabytes. Enter 0 for no limit.
Allowed File Types Comma separated list of allowed file types. Example: .jpg, .gif, .png, .pdf. Keep in mind that this is not fool-proof and can be tricked.
Randomize File names Enable to add a random prefix to the beginning of each uploaded file name. This helps to ensure existing files with the same name never get replaced.
Front-end Display
Layout Define the layout that will be used to display each uploaded file in the front-end. The available options are: Link, Image and Custom Layout where you can set your own HTML layout.
Link Text The text that will be used in the link. (Available in the Link layout).
Force Download Select whether to download the file instead of navigating to the link. (Available in the Link layout).

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:

  • ACF_UPLOAD_DRAG_AND_DROP_FILES="Drag and drop files here or"
  • ACF_UPLOAD_BROWSE="Browse"

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

Create Advanced File Upload Forms in Joomla!

In case the Joomla! Custom Fields don't fit your needs or you're looking for a way to create advanced file upload forms, try Convert Forms. A Joomla! Form Builder extension that integrates with the same Drag & Drop File Upload Field as Advanced Custom Fields does.

LIMITED SALE 20% off any Tassos.gr extension. Coupon code ABCEKDJUEO