Verification: a143cc29221c9be0

Powered by joomla add new post

Powered by joomla add new post

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

In case the field is displayed disabled in the form and you're not allowed to upload files, you're probably don't have the right permissions to edit the content of the field. To fix it, you must set the Edit Custom Field Value option to Allowed in the Permissions tab in the Field settings as well as in the Content component configuration page.

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.

In case the field is displayed disabled in the form and you're not allowed to upload files, you're probably don't have the right permissions to edit the content of the field. To fix it, you must set the Edit Custom Field Value option to Allowed in the Permissions tab in the Field settings as well as in the Users component configuration page.

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.
Allow Unsafe Files

Allow the upload of unsafe files. A file is considered unsafe when:

  • There's a null byte in the file name.
  • The file's extension is forbidden, for example .php, inc, py, java etc.
  • There's a (
  • There's a () short tag in file content.
  • There's a forbidden extension anywhere in the content.

Keep in mind that this option keeps you safe from unsafe files included in a compressed file (zip, rar, tar e.t.c.) as well.

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).

Frequently Asked Questions

How can I translate the field into my language?

To translate the texts used by the File Upload Field 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

How can I set a different upload folder for each user?

If you rather each user have their own upload folder, you can use the {user.id} Smart Tag in the Upload Folder to pull the ID of the user's account, eg: /media/{user.id}. In this case, users with id #456 and #678 will have their uploads stored to /media/456/ and /media/678/ respectively.

Joomla File Upload with different folder for each user

If the ID of the user is not that practical, you may use {user.username} Smart Tag to pull the login name of the user, eg: /users/uploads/{user.username}. In that case, users with username, john and maria will have their upload files stored to /users/uploads/john/ and /users/uploads/maria/ respectively.

Note that the User-based Smart Tags require the user to be logged-in. Otherwise, the Smart Tag will always return an empty value.

Troubleshooting

I get "Unsupported File" error when I try to upload any file

First make sure the type of the file you're trying to upload is set in the Allowed File Types option in your file upload field settings. Next, verify the Fileinfo PHP extension is installed and enabled on your server. This is required to guess the mime type of the file.