File Uploader With Preview – file-upload-with-preview.js

Category: Form , Javascript | March 15, 2019
Author: promosis
Views Total: 2,784
Official Page: Go to website
Last Update: March 15, 2019
License: MIT


File Uploader With Preview – file-upload-with-preview.js


The file-upload-with-preview.js JavaScript library enhances the default file input with support for file preview before uploading. Supports images, videos, PDFs and more.

How to use it:

Install it via package managers.

# Yarn
$ yarn add file-upload-with-preview

$ npm install file-upload-with-preview --save

Or directly download the zip and include the following files on the html page.

<script src="/path/to/file-upload-with-preview.js"></script>
<link rel="stylesheet" href="/path/to/file-upload-with-preview.css">

The HTML structure for the file input & file preview area.

<div class="custom-file-container" data-upload-id="myUploader">

  <label>Upload File <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">x</a></label>

  <label class="custom-file-container__custom-file" >
      <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
      <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*">
      <span class="custom-file-container__custom-file__custom-file-control"></span>
  <div class="custom-file-container__image-preview"></div>


Initialize the library and done.

var myUpload = new FileUploadWithPreview('myUploader')

Enable a custom button to get the file information.

var myUploadInfoButton = document.querySelector('.upload-info-button');
myUploadInfoButton.addEventListener('click', function(){
  console.log('Upload:', myUpload, myUpload.cachedFile);


v3.2.7 (03/15/2019)

  • removes @babel/polyfill from dependencies, adds specific polyfills for older browsers

v3.2.0 (03/14/2019)

  • Moves from Gulp to Webpack.

v3.1.3 (03/08/2019)

  • Made updates for accessibility.
  • Added text object to options so that the input copy can be changed.

v3.0.1 (10/03/2018)

  • Removed the option to not show a grid of files when setting multiple on the input. The logic messiness wasn’t worth it considering we don’t really need the option now that we have a grid view for multiple images.
  • Cleaned up logic flow.
  • Added buttons for deleting indivudual files in the grid view. Also includes the option to disable this feature.
  • Added a deletion event that gets triggered when a file is deleted.
  • Updated the README accordingly with this changes.

v3.0.0 (09/24/2018)

  • Rewrite of the library code. Made the handling of multiple images a bit more clear. Tried to clean up the logic and set properties only a single time when needed. Should all be a bit more clear now.
  • Showing the grid of images in the case of multiple is now the default setting. To stop that, pass {showMultiple: false}when initializing the class.
  • All further options are now set up to be passed in a single options object during initialization. This will be good for any further additions.
  • Restructured how the imageSelected event is done as to make it a bit easier to use – see updated documentation on how to use that event.
  • custom-file-container__image-preview__active was changed to custom-file-container__image-preview--active to be inline with BEM style.
  • Added overflow to multiple image pane, so when there’s a ton of images it doesn’t just keep growing in height.

v2.1.2 (09/22/2018)

  • support for .gifs in both single and multiple previews

v2.1.0 (07/28/2018)

  • fixes bug in single file upload

v2.0.3 (06/23/2018)

  • Add a imageSelected event

v2.0.2 (06/23/2018)

  • Add an external method to trigger image browser by script

You Might Be Interested In:

Leave a Reply