JSFiddle - React, Tailwind, and code Playground

by Bhavik Bamania

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<input id="images" type="file" name="file[]"  title="Upload Images" class="upload" multiple/>

<div id="taskbar">
          <div id="preview"></div>

        </div>

JavaScript

$('#images').on("change", previewImages);
                
                var count=0;

                function previewImages(evt) {


                  var $fileUpload = $("input#images[type='file']");
                  count = count + parseInt($fileUpload.get(0).files.length);

                 

                  if (parseInt($fileUpload.get(0).files.length) > 7 || count > 6){

                   alert("You can only upload a maximum of 6 files");

                   count = count - parseInt($fileUpload.get(0).files.length);

                   evt.preventDefault();
                   evt.stopPropagation();

                   return false;
                 }



                 $("#taskbar").css("height", "auto");

                 var $preview = $('#preview').empty();

                 if (this.files) $.each(this.files, readAndPreview);

                 function readAndPreview(i, file) {

                  // if (!/\.(jpe?g|png|gif|mp4)$/i.test(file.name)){

                  //   return alert(file.name +" is not an image");
                  // }

                  var reader = new FileReader();

                  $('#preview img').addClass('img-responsive');

                  $(reader).on("load", function() {
                    $preview.append($("<img/>", {src:this.result, height:100}));

                  });

                  reader.readAsDataURL(file);

                }

              }