Control upload processing

Front End File Uploader comprises a block edit dialog that a site administrator uses to configure who can upload and how the uploader behaves, and a front end dialog that is popped up to do the actual uploading.

  • File types can be individually enabled
  • Optional image resizing - immediately after upload
  • File or File Set(s) - where the files are uploaded
  • Optional file size restriction in addition to any environment limits
  • iOS device specific options


Front End File Upoloader enables selected registered users to upload images with no further permissions settings to configure. The user(s) enabled to upload can be selected from:

  • The owner of the page
  • A single user
  • A group of users
  • Any registered user

Front End File Upoloader does not allow uploads from guests (non-registerd site visitors). This is a deliberate design limitation to protect sites from upload spam.

Users that don’t have access simply don’t get to see the block. You can even have multiple Front End File Uploaders on the same page, each set up for a different user and placed next to a different gallery block. Each user will only see their own Front End File Uploader link.

If you also have Magic Data, you can use a Magic Data expression to determine who has access.

Fully configurable upload dialog

From the edit dialog you configure how the uploader popup dialog appears to your users. Make it minimal or comprehensive by selecting options for:

  • Dialog heading - prompt users intelligently
  • Dialog dimensions - resize the front end dialog to fit into a phone (*)
  • File title and description fields can be hidden/shown/required
  • Upload history - users can keep track of multiple uploads
  • Automatic upload when file selected

(* Integrates with iCab Mobile to fully support file uploads from iOS devices. See below for details.)


Front End File Uploader includes multiple templates that solve most design requirements and serve as an easy base for custom template development:

  • A big icon to click for the Uploader
  • A small icon to click for the Uploader
  • Plain text links
  • High z-index templates

With the default and most templates, the upload icon is floated to the right. If positioned immediately in front of some image galleries and sliders this may be obscured as images change. The high Z-index versions keep the uploaded icon visible above such blocks.

Custom Templates

From v2.2, the way custom templates work has been re-designed for easier custom styling of both the uploader link/icon and for the uploader dialogs. Each template within the block's /templates directory has a corresponding css file in the package's css/fefu/ directory.

All styling relating to the upload icon and the popup dialog is now controlled through the corresponding css file.

To create a new template, place the template view.php in siteroot/blocks/jl_front_end_uploader/templates/templatename/view.php and place the corresponding view.css in siteroot/css/fefu/templatename/view.css.

iPhone, iPad and iOS devices

Front End File Uploader can upload files from iOS devices such as iPads and iPhones that have the iCab Mobile App installed. Front End File Uploader  integrates with iCab Mobile to overcome the lack of file upload support of iOS devices to enable any file to be uploaded.

A dedicated tab in the Front End File Uploader edit dialog provides options to assist configuration and guide iOS users.

(Note - iCab Mobile must be purchased separately from the Apple App store.)

Drag and Drop Uploading

Version 2 of Front End File Upoloader introduces an option for drag and drop uploading of files.

When selected, uploading is automatic when files are dragged onto the uploader dialog. 

When a browser does not support drag and drop uploading, the user will be presented with a normal Front End File Uploader dialog.

  • Entry of Title and Description text is not supported within drag/drop uploading.
  • Timeouts are not supported within drag/drop uploading.

Magic Data Integration

If you also have Magic Data, you can use Magic Data expressions to specify the destination of uploads and who has access.

Access decision

The entered Magic Data expression must return true or any other non false value for front end access to be enabled.

A false, zero or null value will prohibit front end access.

Destination as a file

The entered Magic Data expression must return a single file ID. The file with this ID will be replaced with the uploaded file.

Destination as a file set

The entered Magic Data expression must return either a single file set ID or a list of file set IDs. The file will be uploaded into these file set(s).


If uploaded files do not appear immediately when a page showing the file is loaded, the chances are that the file is stuck in a cache. concrete5 has block and page caches which can hold blocks and pages linking to versions of a file from before an upload. When a sized version of an image is generated, blocks can be left linking to a previously resized version of an image.

In both cases, the answer is to clear the concrete5 cache.

For Developers

concrete5 events

Front End File Uploader fires concrete5 events on upload and on completion of the upload (see /tools/do_the_upload.php)

Fire: on_fefu_upload_started

The first event concerns whether the upload is allowed. A null return from any attached event handler is considered a success. Any other return is considered a failure. The upload will be abandoned and returned text will be passed back to the upload dialog as an error message and shown to the user.

Fire: on_fefu_upload_completed

The second event indicates the upload has completed. It is fired after everything is complete and the uploaded file has been saved without error. A return from any attached event handler will be passed back to the upload dialog and replaces the success message shown to the user.

JavaScript events

Front End File Uploader triggers browser JavaScript events for each file uploaded and when the upload dialog closes.

Trigger: fefu_file_uploaded

Whenever an upload completes, the browser fefu_file_uploaded JavaScript event with parameters of the BlockID and the ajax response object is triggered. This event is triggered on the DOM element of the associated upload icon or link. ie. The element you click to open the upload dialog.

Trigger: fefu_upload_dialog_close

Whenever the upload dialog is closed, the browser fefu_upload_dialog_close JavaScript event with a parameter of the BlockID is triggered. This event is triggered on the DOM element of the associated upload icon or link. ie. The element you click to open the upload dialog.

Listen: fefu_force_close

The upload dialog listens for the event fefu_force_close being triggered on the the DOM element of the associated upload icon or link. ie. The element you click to open the upload dialog. When the event is triggered, the uploader dialog will immediately close.

Internet Explorer

The styled 'Choose File' button provided by the Front End Uploader upload dialog is disabled for Internet Explorer versions up to and including IE9 and in its place a browser default file upload input element is shown, typically a pseudo-input field with an associated 'Browse..' button. In Internet Explorer 10+, the styled 'Choose File' button is shown, but requires a double-click to pop up the Windows file selection pane.