Zum Inhalt springen

File upload for frontend users

Extension Key: pluploadfe

TYPO3 Version:12 LTS11 LTS10 LTS9 LTS

Introduction

This extension allows website visitors to upload files via the frontend.

There are basically two types of use:

  1. Every visitor to the site can upload files. This is generally not recommended for "normal" websites on the Internet, but could be interesting for intranets.
  2. Only registered front-end users may upload files. Visitors must therefore first authenticate themselves with a user name and password.

The following video and text instructions show how to install and configure the extension.

Please note

If only logged-in frontend users are authorized to upload files, frontend user groups and users must be created beforehand. A login option must also be available. The setup and configuration of the frontend login is not shown in these instructions; you can find various instructions on the Internet or on our website.

The JavaScript framework jQuery must be integrated for the plugin to work in the frontend. If this is not yet the case on your website, you must do this first, otherwise the frontend plugin of the extension will not work.

Video instructions

Install the extension

The extension can be installed as usual via the Extension Manager. To do this, search for the extension key pluploadfe in the Add extensions area. First make sure that the list of extensions is up to date.

Then click on the button on the left-hand side to install the extensions.

Add static TypoScript template

Switch to the template module in the Info & Edit, Edit complete template data set area to add the static TypoScript of the extension to your TypoScript template.

Create configuration data set

In the next step, you must create at least one configuration data record. This determines, for example, the directory in which the files are loaded and whether a user must be logged into the frontend.

This data record can be created on any page or folder. In this example, we create a folder with the name Upload-Config. This name can of course be freely chosen.

Switch to this folder in the list module and create a new data record of the type Plupload configuration.

You can assign any title in the General tab.

Here you can also set whether a user must first authenticate themselves in the frontend with their user name and password.

In the Upload folder tab, enter the directory to which the files are to be uploaded in the Upload path field. In the example, we enter fileadmin/user_upload/ here.

Optionally, you can have another directory level created according to certain criteria under Create folder from user data. In the example, we select the User name option here.

This means that a separate folder is created for each logged-in user, for example fileadmin/user_upload/maxmuster/

You can configure the permitted file extensions in the File restrictions tab. Remove unwanted file types from the list or add further permitted types separated by commas.

Create the frontend plugin

Create a new content element on the page where you want the upload plugin to appear. You will find the plug-in for the extension in the Plug-ins tab.

In the Plug-in tab, select the previously created configuration data set.

The plug-in is now already visible in the frontend. If you see an error message instead of the view in the screenshot, check whether jQuery is really integrated (in the <head> area of the HTML source code).

If you have only allowed uploads for authenticated users in the configuration data set, non-authenticated users will see the plug-in but will not be able to upload any files.

To hide the plug-in for non-authenticated users, simply set in the Access tab of the plug-in in the backend that only logged-in users are allowed to see the plug-in.

Files can now simply be dragged and dropped into the gray area.

Alternatively, clicking on the Add Files button opens a window in which you can select the desired files.

Once the files have been added, start the upload by clicking on the Start Upload button.

If everything has worked, the files should now be visible in the File list module in the backend.

As we had set in the configuration in our example that a subfolder should be created from the user name, we can see a corresponding directory in the screenshot.

This page contains automatically translated content.

Updated: 17.07.2024