File Upload Previews

when a user uploads a file as part of a form, you can automatically show previews of the images it uploads introduction 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 syntax 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" file 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 images 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 standard images 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 file background images 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 file other file types 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 css recommended css 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 https //www w3schools com/cssref/css3 pr background asp for example background size cover; background position center center; background repeat no repeat; height 100px; useful selectors 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]) { }