When a User uploads a File as part of a Form, you can automatically show previews of the images it uploads.
When a User uploads a File as part of a Form, you can automatically show previews of the images it uploads.
We've aimed for maximum flexibility- you create the preview element with any HTML structure you like. Set the correct HTML attributes and we'll use your element to display an image preview as soon as one is available.
In these examples, we have a Form with a single upload field. In these examples the field's ID in the database is form_field_11_1
.
The upload field already consists of the following:
A label element (optional)
A type="file" input which is used by the User to select their file
A hidden input which uploads the CDN URL of the file to the database once it has been added to S3 successfully.
If you wish to add a File Preview, you'll need to add a further element. This can be any element you like, but you'll need to add a data attribute: data-file-preview="form_field_11_1_file"
...where form_field_11_1_file
is the ID of your type="file"
element.
If the File is an image, we'll either:
If the element with the attribute is an <img>
tag, set the src
attribute to display the preview image
If the element with the attribute is not an <img>
tag we'll change the CSS to apply the preview image as a background image.
We'll also give you some feedback on what kind of file type the Image is by setting the data-preview-file-type
attribute on the preview element. In itself, this has no functionality, but it allows you to set up custom CSS rules depending on the file type.
You can set the CSS of your element in advance so that the image displays in a manner of your choosing. See recommended CSS below.
Here's an example img
preview element:
<img data-file-preview="form_field_11_1_file" height="100" width="100">
Full code for this input:
Here's an example <div>
element designed to use background-image
to display the preview:
<div data-file-preview="form_field_11_1_file"></div>
Full code for this input:
With a file input, you can't be certain that an image will be uploaded. We'll check this for you by inspecting the MIME type of the file. We won't attempt to display an image preview if the MIME type is not an image.
We will however, still set the data-preview-file-type
attribute to the value of the file's file type. You will then be able to use custom CSS to display different Icons for different common file types if you choose.
For example:
When using this feature, we'd recommend you set up your CSS before you start.
Remember, an empty element will have a height of 0, even if it has a background
set in CSS, so we'd recommend you set a height to any elements which will display the preview image as a background image.
You may wish to set other CSS relating to the background
property: https://www.w3schools.com/cssref/css3_pr_background.asp
For example:
As we use data-attributes extensively in this feature, you may also find it helpful to target these attributes.
For example, the following selector will target all of your File Preview elements: [data-file-preview] { }
The following will target all of your File Preview elements which have a File uploaded to them: [data-file-preview][data-preview-file-type] { }
The following will target all of your File Preview elements which have an image uploaded to them: [data-file-preview][data-preview-file-type|=image] { }
The following will target all of your File Preview elements which have a File which is not an image uploaded to them: [data-file-preview][data-preview-file-type]:not([data-preview-file-type|=image]) { }