Automatically resize images input by users before forms are submitted! No javascript code to write, no server processing, easy peasy!
- Reference the CDN script
<script src="https://cdn.jsdelivr.net/gh/benkaiser/fileinput-image-resize@1.0.1/dist/bundle.js"></script>- Add a couple attributes to a form image input
<input type="file" data-max-width="500" data-max-height="500" data-quality="90" data-format="webp" />- That's it! Your file will be submitted to the server with the correct format, quality, and size!
| Attribute | Description | Default |
|---|---|---|
| data-max-width | The maximum width of the image | 500 |
| data-max-height | The maximum height of the image | 500 |
| data-quality | The quality of the image (0-100), only applies to webp and jpeg | 90 |
| data-format | The format of the image (webp, jpeg, png) | webp |
| data-fit | If an image should be resized to fit (preserve aspect ratio) or to crop (to fill exact max dimensions, chopping off the overflow) | fit |
| data-preview | The query selector of an image element to preview the image before submission | null |
- If the browser does not support the format, it will default to jpeg (since it is supported by all browsers)
- You will need to server-side validate (i.e. reject if the image does not meet your requirements) the image as well, since the user can bypass the client-side validation by disabling javascript
- Clone the repo
- Run
npm install - Run
npm run devto run esbuild in watch mode (building the library) - Run the demo server in a separate terminal with
npm run demo, visit http://localhost:8777/ in your browser to test out an upload.
MIT