Drag and Drop File Uploading With jQuery - Image Uploader

Drag and Drop File Uploading With jQuery - Image Uploader
File Size: 15.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is a simple, customizable jQuery image uploader plugin that features drag'n'drop file selection, image preview, predefined image list, and extension/mime/file size validation.

How to use it:

1. Link to jQuery JavaScript library and the Image Uploader's files.

<link href="dist/image-uploader.min.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/image-uploader.min.js"></script>

2. The plugin requires Material Icons to provide close & upload icons.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

3. Create a container element for the drag'n'drop file selection area.

<form action="url" enctype="multipart/form-data">
  <div class="input-images"></div>
</form>

4. Attach the plugin to the container element and done.

$(function(){
  $('.input-images').imageUploader();
});

5. Define an array of pre-select images.

let preloaded = [
    {id: 1, src: '1.jpg'},
    {id: 2, src: '2.jpg'},
    {id: 3, src: '3.jpg'},
    // more images here
];

$('.input-images').imageUploader({
  preloaded: preloaded
});

6. Specify the allowed extension, mime type, and max file size.

$('.input-images').imageUploader({
  extensions: ['.jpg', '.jpeg', '.png', '.gif', '.svg'],
  mimes: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'],
  maxSize: 2 * 1024 * 1024,
  validateExtension: true,
  validateMIME: true,
  validateMaxSize: true
});

7. More customization options.

$('.input-images').imageUploader({
  imagesInputName: 'images',
  preloadedInputName: 'preloaded',
  label: 'Drag & Drop files here or click to browse'
});

Changelog:

2019-10-19

  • Added extension, mime and size validations and updated the responsiveness.

This awesome jQuery plugin is developed by christianbayer. For more Advanced Usages, please check the demo page or visit the official website.