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.
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:
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.
From the edit dialog you configure how the uploader popup dialog appears to your users. Make it minimal or comprehensive by selecting options for:
(* 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:
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.
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.
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.)
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.
If you also have Magic Data, you can use Magic Data expressions to specify the destination of uploads and who has access.
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.
The entered Magic Data expression must return a single file ID. The file with this ID will be replaced with the uploaded file.
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.
Front End File Uploader fires concrete5 events on upload and on completion of the upload (see /tools/do_the_upload.php)
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.
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.
Front End File Uploader triggers browser JavaScript events for each file uploaded and when the upload dialog closes.
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.
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.
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.
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.