Easy Multiple Image Uploader In Vanilla JavaScript

Preview:

Description:

A lightweight, responsive, easy-to-use image uploader that allows you to upload multiple images with live preview support.

How to use it:

1. Create the multi-image uploader next to your HTML form.

<form action="" method="" enctype="multipart/form-data" id="example"></form>
<div class="multiple-uploader" id="multiple-uploader">
  <div class="mup-msg">
    <span class="mup-main-msg">click to upload images.</span>
    <span class="mup-msg" id="max-upload-number">Upload up to 10 images</span>
    <span class="mup-msg">Only images are allowed for upload</span>
  </div>
</div>

2. Load the main script multiple-uploader.js right before the closing body tag.

<script src="./src/js/multiple-uploader.js"></script>

3. Load the main.css stylesheet for the basic styling of the uploader.

<link href="./src/css/main.css" rel="stylesheet" />

4. Initialize the uploader.

let multipleUploader = new MultipleUploader('#multiple-uploader').init({
    // input name sent to backend
    filesInpName:'images', 
    // form selector
    formSelector: '#example', 
});

4. Set the maximum number of files allowed to upload. Default: 10.

let multipleUploader = new MultipleUploader('#multiple-uploader').init({
    maxUpload : 5
});

5. Set the maximum size of files allowed to upload. Default: 2mb.

let multipleUploader = new MultipleUploader('#multiple-uploader').init({
    maxSize: 20,
});

6. Clear all images in the uploader.

multipleUploader.clear();