jQuery Drag & Drop File Uploader Plugin – Image-Uploader

Image-Uploader, in this image-uploader server you can upload any image with the simple JQuery Drag and Drop image uploader plugin on your website. You can use this plugin in the forms like questionnaire forms, sign up forms, etc.
In the world of responsive website this image uploader plugin is very useful as it is designed according to your needs. For example: In this image upoader plugin you can use various customizations like preloaded images, labeling images, different extensions like (.jpg, .jpeg, .png, .gif, .svg)
The main importance of this plugin is that you do not need to use AJAX, as this plugin works with simple JQuery drag and drop.
In the given demo you can see, how this plugin can be used:

The first one is the “Basic Usage”:
You just need to upload your image in the Drag and Drop button. You can upload multiple images by the use of this plugin.

The Second one is “With Options”:
The next is similar to the first one but in this you can use NAME, DESCRIPTIONS with the multiple images in paddling styles.

This Jquery usage reduces the user’s clumsiness and improves user-friendliness, and also enhances the user experience.

How To Used:

First, include jQuery library and second ‘image-uploadeer’ library files in your web page.

<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>

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>

Add jQuery Function call

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

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
});

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

$('.input-images').imageUploader({
  extensions: ['.jpg', '.jpeg', '.png', '.gif', '.svg'],
  mimes: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'],
  maxSize: undefined,
  maxFiles: undefined,
});

Done