File-upload-with-preview

Simple File Upload That Shows A Preview of Uploaded Image | file-upload-with-preview

by

File upload with preview aims to address the issue of showing a preview of the uploaded user photo in an easy-to-use package. This is a simple front-end utility to aid in the process of uploading files to your website. JavaScript library file-upload-with-preview.js enhances default file entry with support for file preview before upload. Supports images, videos, PDFs, and more…

How to make use of it:

Install it through package deal managers.

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

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

Or instantly download the zip and include the following files on the HTML web 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>
  </label>
  <div class="custom-file-container__image-preview"></div>

</div>

Initialize the library.

var myUpload = new FileUploadWithPreview('myUploader')

Enable a {custom} button to get the file info.

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

All default configs.

var myUpload = new FileUploadWithPreview('myUploader',{
    showDeleteButtonOnImages: true,
    text: { 
      chooseFile: 'Choose file...',
      browse: 'Browse',
      selectedCount: 'files selected'
    },
    maxFileCount: 0,
    images: {
      baseImage: '',
      backgroundImage: '',
      successFileAltImage: '',
      successPdfImage: '',
      successVideoImage
    }
    presetFiles: [] //  an array of preset images
})

API

// adds an array of files
myUpload.addFiles([]);

// appends a single File object to the image preview area
myUpload.processFile();

// adds images from an array of image paths
myUpload.addImagesFromPath([]);

// replaces files
myUpload.replaceFiles([]);

// replaces a specific file
myUpload.replaceFileAtIndex(file object, index);

// deletes a file
myUpload.deleteFileAtIndex(index);

// refreshes the image preview area
myUpload.refreshPreviewPanel();

// adds a browse button to the input
myUpload.addBrowseButton(buttonText);

// opens the image browser programmatically
myUpload.emulateInputSelection();

// clears all files
myUpload.clearPreviewPanel();

Event handlers that might be fired on picture add/delete.

window.addEventListener('fileUploadWithPreview:imagesAdded', function(e) {
  // e.detail.uploadId
  // e.detail.cachedFileArray
  // e.detail.addedFilesCount
  // Use e.detail.uploadId to match up to your specific input
})

window.addEventListener('fileUploadWithPreview:imageDeleted', function(e) {
  // e.detail.uploadId
  // e.detail.cachedFileArray
  // e.detail.addedFilesCount
  // Use e.detail.uploadId to match up to your specific input
})

See the Demo And Download

Demo
Download

Official Website(promosis): Click Here

This superior jQuery/javascript plugin is developed by promosis. For extra Advanced Usage, please go to the official website.

Leave a Comment