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.
- Add a File Upload Field to Joomla! Articles
- Add a File Upload Field to Joomla! Registration Form
- The File Upload Field Settings
- Set custom titles and descriptions for your files
- Frequently Asked Questions
- Troubleshooting
- Translate the File Upload Field into your language
- Create Advanced File Upload Forms in Joomla!
- Can I use ACF - File Upload with YooTheme Pro Dynamic Content?
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.
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.
- 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:
- 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.
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.
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.
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.
- 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.
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.
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.
To remove the uploaded photo or upload a new one, go to the Edit Profile Page.
Set custom titles and descriptions for your files
To set custom titles and descriptions for your uploaded files, click on the pencil icon by hovering over an uploaded file as seen below:
Once you have clicked the pencil icon, a modal should appear that allows you to set a custom title and description for this file.
Once you have set a title and/or description, you will be able to display them via the Link or Custom Layout options via the respective Smart Tags that can be read in the settings section.
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. Supports Smart Tags.
File Smart Tags {acf.file.basename} {acf.file.extension} {acf.file.filename} {acf.file.index} {acf.file.total} Field Smart Tags {acf.field.id} Item Smart Tags {acf.item.id} {acf.item.alias} {acf.item.cat_id} {acf.item.cat_alias} Also supports any common Smart Tags such as: {date} {time} {day} {month} {year} |
| 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:
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 | Select 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). Supports Smart Tags.
File Smart Tags {acf.file.basename} {acf.file.filename} {acf.file.extension} {acf.file.title} {acf.file.description} Also supports any common Smart Tags such as: {date} {time} {day} {month} {year} |
| Custom Layout |
Define the custom layout that will be used. Supports HTML and Smart Tags.
File Smart Tags {acf.file.basename} {acf.file.filename} {acf.file.path} {acf.file.url} {acf.file.size} {acf.file.extension} {acf.file.title} {acf.file.description} {acf.file.index} {acf.file.total} Also supports any common Smart Tags such as: {url} {date} {time} {day} {month} {year} |
| 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.
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.
Can I use ACF - File Upload with YooTheme Pro Dynamic Content?
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.
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.
