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="row">
<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"  required=""/>
</div>
<label for="email">Harga yang di tawarkan</label>                                  
<div class="form-group  no-margin">
<div class="col-md-8">
<input type="text" class="form-control" name="product_harga"  required="" >
</div>
<div class="col-md-4">
<div class="check">
<input type="checkbox" value="Bekas" name="status"  required="" >Bekas</label>
</div>
</div>
</div>
<div class="form-group col-md-12 last-no-margin">
<label for="email">Keterangan (255 Char)</label>
<textarea class="form-control" id="textarea" name="product_keterangan"  required></textarea>
</div>
</fieldset>
</form>
</div>
<div class="col-md-4">
<!-- <form action="<?php echo site_url('welcome/addfoto')  ?>"...

JavaScript

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

  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 s i command it to understand what i asked for

$('#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");
                 $("#myModal").modal("hide")
                 location.reload();
           ...