JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
  <div class="col-md-8">
                <form class="form-horizontal" method="post"  action="<?php echo site_url('add/insertproducts')?>" id="form" >
                           <fieldset>
                              <input type="hidden"  name="id_user" id="id_user" value="<?php echo $id_user ;?>"/>
                             
                              <input type="hidden" class="form-control"  name="id" value="<?php echo $id ?>"   >
                            
                            




                             <div class="form-group col-md-12 no-margin">
                                 <label for="email">Merek / Brand :</label>
                                 <input type="search" class='form-control autocomplete ' name="merk"  required=""/>
                                 <input type="hidden" class='autocomplete' id="id_brand" name="id_brand" required=""/>
                                
                              </div>




                              <div class="form-group col-md-12 no-margin">
                                 <label for="email">Tipe</label>
                                 <input type="search" class='form-control autocomplete1 '  name="tipe"/>
                                 <input type="hidden" class='autocomplete' id="id_tipe" name="id_tipe"/>
                              </div>

                              
                              

                               <div class="form-group col-md-12 no-margin">
                                 <label for="email">Nama Toko/ Twitter:</label>
                                 <input type="text" class='form-control ' name="product_toko" ...

JavaScript

$(function() {
 var minImageWidth = 350,
  minImageHeight = 200;
    
    
    $("div#myDropZone").dropzone({
        url : "/file-upload",
        maxFiles: 2,
         autoProcessQueue: false,
         acceptedFiles: 'image/*',
        addRemoveLinks: true,
        accept: function(file, done) {
        console.log("uploaded");
            done();
 		 },
        
init: function() {
 this.on("addedfile", function() {
      if (this.files[1]!=null){
        this.removeFile(this.files[0]);
      }
    });

  this.on("success", function(file, responseText) {
                file.previewTemplate.setAttribute('id',responseText[0].id);
              });
    
  this.on("thumbnail", function(file) {
       if (file.width < minImageWidth || file.height < minImageHeight) {
                  file.rejectDimensions()
                }
                else {
                  file.acceptDimensions();
                }
    });
    

    
    
    
 
},
        
   accept: function(file, done) {
        var ext = file.name.substr(file.name.lastIndexOf('.'));
        if (ext && ext.match(/\.psd|\.ai/)) {
            done();
            return;
        }
        file.acceptDimensions = done;
        file.rejectDimensions = function() { 
            done("Image too small."); 
        	//alert("image too samll");
        
        };
        }   
        
 });
         
    
    
//should click this button then images will be uploaded
$('#btnSave').click(function(){           
     myDropzone.processQueue();
});
    
});






/*--here is another js file-----

//$('#btnSave').live('click', function(e){
$('#btnSave').on("click", function(e){  
        e.preventDefault();
        $.ajax({
            url: base_url +"welcome/add",
            type: "POST",
            data: $('#form').serialize(),
            dataType: "JSON",
            success: function(data)
            {
                 //if success close modal and reload ajax table
                 alert("Data Sukses");
        ...