superfile
Intro
An ES6 class to improve uploaders. Works great with Bootstrap but works with any input.
- Resize image on client side to avoid large uploads
- Preview image
- Clear uploads
- Crop to ratio
- Drop support
- Multiple/directory upload support
How to use
import Superfile from "./superfile.js";
Superfile.init();Create a file input. It needs to be wrapped by a div with the superfile class.
You can add a clear button and a preview image if you want.
<div class="mb-3 superfile">
<label for="formFile" class="form-label">Default file input example</label>
<div class="input-group">
<input class="form-control" type="file" id="formFile" name="file" />
<button class="btn btn-outline-secondary superfile-clear" type="button">Clear</button>
</div>
<img class="img-fluid superfile-preview" />
</div>Available options
These are set through data attributes:
- disable-resize: don't try to resize the images and keep original files
- max-width: the maximum width of the image (keep ratio)
- max-height: the maximum height of the image (keep ratio)
- hide-clear: hide clear element (if any) until preview is showed
- ratio: set a ratio (eg: 1:1 for a square ratio) for the image. Image is cropped from the center. It can be used with max-width/max-height or independantly.
Limiting accepted file types
You can use the regular accept attribute.
<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">
<input type="file" accept="image/*">Recommended css
- Hide preview element when no src is set
- Hide inputs until ready (avoids fouc)
- Change input background color when dropping files
img:not([src]) {
display: none;
}
.superfile:not(.superfile-ready) {
visibility: hidden;
}
.superfile-drag input {
background: palegoldenrod;
}When set, the preview will get a src attribute like blob:http://someaddress/30fde1c6-911e-4b50-a823-e778d100ffb3
and be displayed
Demo
https://codepen.io/lekoalabe/pen/wvdVoNa
I need more
This is a simple improvement over regular file input.
If you need more, look at :