The InputfieldFrontendFile module provides file and image fields that can be used on the front-end of a website with LoginRegisterPro. It works with ProcessWire’s existing file and image fields as a drop-in replacement that applies itself automatically. It is specifically designed for the safety considerations of a front-end, non-admin environment.
Features
- Drag and drop Ajax image upload support.
- Thumbnails for already uploaded files/images.
- Drag-sorting of files or images.
- Ability to view file details and edit file descriptions.
- Client-side image resizing (in addition to server-side).
- File-upload progress indicator.
- Support for “temp” files that do not become permanent till “submit”.
- Works as a drop-in replacement for InputfieldFile and InputfieldImage.
- Accommodates all types of files and images in a single Inputfield.
- Links to newly uploaded files are emailed to administrator (by LoginRegisterPro).
Images can be clicked and dragged to change their order, or you can click the image filename (or edit icon) to go to the zoom/edit view, which looks like this:
About the front-end file Inputfield
InputfieldFrontendFile is very similar to ProcessWire’s built in File and Image Inputfields except that it is designed for front-end use, so it doesn’t require a ProcessWire admin environment. It is also more strict about what it will accept in uploads and it performs additional validation, consistent with its intended use in a non-admin environment. Though for the same reason, its feature set is also intentionally more limited than ProcessWire’s file fields designed for the admin. However, it still goes pretty far in terms of features.
InputfieldFrontendFile does not extend any other Inputfield, nor is it based upon the existing file/image Inputfield. It’s basically starting from scratch with an assumption that we’re in a non-administrative environment. But it accepts many of the exact same field configuration options as ProcessWire’s InputfieldFile and InputfieldImage. This is necessary because this module is a drop-in replacement for InputfieldFile and InputfieldImage, and it applies automatically to LoginRegisterPro's Profile forms.
When LoginRegisterPro sees that there is a file or image field editable in the user’s Profile form, it replaces what would be an InputfieldFile or InputfieldImage field with the InputfieldFrontendFile field. But if this module is not installed, then LoginRegisterPro removes the field entirely since ProcessWire’s core file fields are not designed for front-end use.
This module supports both images and other file types in a single field. The screenshot above demonstrates this, as well as the “deleted” and “hovered” states for files.
Install and use
Requirements (preflight checklist)
The frontend file Inputfield requires LoginRegisterPro (v3+) and can only be used on the Profile form (not the Registration form).
ProcessWire 3.0.148 or newer is recommended.
You must understand and accept the risks of hosting a front-end file upload system — please carefully read Considerations and Risks at the end of this page.
If you will be using this file field for image uploading functions, you must first install the FileValidatorImage module. All you need to do is install it, nothing more, and it'll validate images uploaded from this module. I developed that module as part of this one, but released it as its own FileValidator module as I thought it would be useful for other cases as well.
Like with LoginRegisterPro, jQuery is required and is loaded automatically. If you don't want it to load automatically then load your own version of jQuery before calling any LoginRegisterPro API methods.
In order to support drag-n-drop sortable file lists, InputfieldFrontendFile also requires jQuery UI and it will be loaded automatically by LoginRegisterPro. If you want to use your own version of jQuery UI then make sure to load yours before calling any LoginRegisterPro API methods. If you don't have any other fields in your Profile form that require jQuery UI, it is also acceptable to create a minimal build with only Draggable, Droppable and Sortable Interactions. No Widgets or Effects are required and the only required Core items are those required for the mentioned interactions. No CSS is required either. But if you are using other fields that use jQuery UI (like Datepickers or asmSelect) then you'll need more than a minimal build. If you aren't sure about any of this, then just ignore it and LoginRegisterPro will load whatever it needs automatically.
Installation
Download: The InputfieldFrontendFile module can be downloaded form the LoginRegisterPro support board in the downloads topic.
Install: To install the module, unzip and place its files in the directory /site/modules/InputfieldFrontendFile/ on your server, and then in your admin click to Modules > Refresh. Now on the Modules screen (Site tab), click Install for the Inputfield > Frontend File module.
Create or select a field: After installing this module, you can choose to create a new File or Image field in ProcessWire, or you can use an existing one. To create a new field navigate to Setup > Fields > Add New, and choose either File or Image as the type, according to your need. Whether you created a new field or used an existing one, add the field to your “User” template.
Note that you will be using a regular ProcessWire File or Image field, as this InputfieldFrontendFile module is something LoginRegisterPro uses automatically on existing File or Image fields.
If you aren’t sure how to edit or add fields to the User template in ProcessWire, Navigate to Setup > Templates, and then in the Filters, check the box to indicate you want to show System Templates. Now you should see the User template. Click to edit it. In the Fields, add your File or Image field and Save. When the page reloads, check the box to enable the field in the User Profile (this is referring to the admin User Profile, but chances are you want it there). Save again.
Add field to Profile form: Now go to your LoginRegisterPro module settings (Modules > Configure > LoginRegisterPro). In the “Profile” section — Profile form fields — select the File/Image field that you added to your User template, to add it to your Profile form.
Config max upload size: While still in the LoginRegisterPro Profile fields, locate the “Max allowed file size for file upload fields” setting (it's at the bottom of the fieldset). Populate this with an appropriate value according to the field instructions (i.e. "5 M" for 5 megabytes).
Configure notification email: The LoginRegisterPro module config screen also has an "Admin notification email" setting at the bottom of the the "Confirm" fieldset. This email address receives notifications of new account registrations. But when this module is installed, the email also receives notifications of newly uploaded files. This is recommended so that you can keep an eye on things and make sure people aren't uploading anything inappropriate or illegal.
When the Profile form is rendered for any user, the File/Image field will be replaced with an InputfieldFrontendFile field automatically without you doing anything further. But before the field is ready to use, you'll need to configure it — see the next section below.
Configure field settings
Now that you know how to add a File field to your Profile form, we need to take a closer look at the actual file/image field settings. In the ProcessWire admin, go to Setup > Fields and edit your File or Image field. Please make note of the following:
File field settings
Specify the file extensions you want to support (this is on the “Details” tab when editing the file/image field). Likewise, remove any file extensions that don’t need to be there.
In the “Maximum files allowed” specify a value of 1 or higher. Do not specify “0” which would allow any number of files — it’s important NOT to have any kind of “unlimited” settings on the front-end. Always setup limits!
In “Text formatters (for file descriptions)” I recommend selecting “HTML Entity Encoder” if it isn't already.
On the “Input” tab, there is a “Number of rows for description field” setting. If you want to support user-entered file descriptions, enter 1 for single-row file descriptions, or 2+ for multi-row descriptions. To disable descriptions, specify 0.
InputfieldFrontendFile does not use any settings other than those mentioned above for File fields. But if you are working with an Image field, then consider the following additional settings that InputfieldFrontendFile does support in addition to those mentioned above for File fields.
Image field settings
Default image grid mode: This module supports either the “square” or “proportional” option, and will honor the setting you select here. It does not currently have any equivalent for a “Vertical list” option, so that setting is ignored. Note that this setting is not something the user can change on the front-end.
Maximum image dimensions: This module supports the “max width” and “max height” settings. It always uses client-side resize (when available) to reach those dimensions. If the client does not support resize, and the image they upload is too large, it is refused.
Minimum image dimensions: This module supports both the “min width” and “min height” settings, and is is recommended that you use them. Images that do not meet the minimum required dimensions are refused.
File/Image settings that are ignored
Please note the following settings in File and Image fields are intentionally ignored by InputfieldFrontendFile. Items with an asterisk may be supported in future versions:
- Decompress zip files
- Overwrite existing files
- Focus point selection*
- How to resize to max dimensions
- Max megapixels*
- Client-side resize quality for JPEG*
Considerations and risks
This module makes it safer to have file uploads on the front-end than it otherwise would be. But any time a non-trusted user can upload files to the server, there is an element of risk involved. In this case, the risk is more specific to the content of the files uploaded—and whether it is legal or appropriate—than it is to anything else.
Unlike user input containing text or numbers, the contents of file uploads are a black box that can contain anything. File properties like the file extension and MIME type tell us how the file identifies itself. Performing validation of the file contents helps further to assure us that the file is what it identifies itself as. But most files are big blocks of binary data that remains a black box either way. We can identify something as an image (for example), but will it render in a web browser? And if it does render, is the imagery safe for our audience?
Consider the case of a “profile photo” field on your website. Some user uploads their profile photo, but rather than a photo of their face they opted for some other body part that nobody wants to see. Now your website is potentially showing an inappropriate photo to other visitors. Consider the implications, laws, and how much worse it could potentially get. Sooner or later someone will abuse the file uploads in such a way, so be prepared. A module like this cannot determine whether a photo (or file) contains content that is appropriate for the audience it's being delivered to.
File uploads also tend to be a weak point in any website/application, so they attract hackers looking for ways to exploit the system to gain additional access or cause some kind of service interruption. This is a big part of why this module exists, to attempt to limit the dangers, provide extra validation, and reduce (and hopefully eliminate) any potential weak points. I’ve covered everything here that in my years of experience I could find as a potential issue with file uploads. But I'm not perfect and also can’t claim this solution is perfect either. Nobody can make such a claim. I feel comfortable with it for my own applications, and in my opinion this module takes appropriate security measures to make it a reliable solution for front-end file uploads. But only you can be the judge for your own applications. Because this is an inherently risky area (front-end file uploads), there are no promises or guarantees with this module, other than that I will provide ongoing development, improvements, fixes and support of this module as part of the LoginRegisterPro package.
To summarize, file uploads are always open to abuse, especially in a front-end environment with non-trusted users. Use file fields on the front-end of your website at your own risk. If you accept the risks, then recognize that you’ll have to keep a close watch on what gets uploaded and be able to respond to correcting abuse in a timely manner. As always, you should also maintain consistent and regular backups of both the file system and database.
