Popular posts

After years of doing this common feature needed in every app today I've written a small Image utility object (which allows you to download images as Blob, convert images to base64, canvas, etc, resize image) and came up with this simple algorithm:

1. Still use <input type="file"> to file uploads
2. Allow custom input._file property to store a Blob.
3. If input._file is undefined, use the original input.files[0]
4. In case of image uploading I recommend to do client-side image resizing and optimization. When user uploads a file you resize an image and store it in input._file.
5. This algorithms also allows you to, for example, create registration with Facebook and download user profile image from Facebook and put it into input._file
6. It is impossible with JavaScript to put a custom file (Blob) into file input, but with this approach, you can now just do a input._file = blob
7. And finally to do AJAX there is a Vanilla JS FormData API which is supported in every browser today.
8. input._file has higher priority then the original. If it is set, then upload it or input.files[0] instead which is an instance of Blob interface also.
9. When uploading custom input._file to server make sure in FormData you set POST param name same as original input name.
10. Finally in the back-end you don't need to change everything. For example in PHP my Request receives same valid File instance.

Sample code:

import { BunnyImage } from 'bunnyjs/src/file/image';

const imageURL = '...';
const fileInput = document.getElementById('photo_upload');
const form = document.getElementById('photo_form');

BunnyImage.getImage(imageURL).then(image => {
   return BunnyImage.resizeImage(image, 800, 600);
}).then(image => {
   fileInput._file = BunnyImage.imageToBlob(image);
});

form.addEventListener('submit', e => {
  e.preventDefault();
  const fd = new FormData;
  const blob = fileInput._file ? fileInput._file : fileInput.files[0];
  const postName = fileInput.getAttribute('name');
  fd.append(postName, blob, 'picture.jpg');
  const request = new XMLHttpRequest();
  request.open("POST", form.getAttribute('action'));
  request.send(fd);
});

All that algorithm soon will be a part of a new component in BunnyJS. If you liked an answer, please star project on GitHub and share it. If you will have any feedback, ideas, proposals or questions please let me know.