JSFiddle - React, Tailwind, and code Playground

by dauruk0512

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">
   <a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>



<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>





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

JavaScript

$(function() {
 var minImageWidth = 350,
  minImageHeight = 200;
    
    
    $("div#myDropZone").dropzone({
        url : "/file-upload",
        maxFiles: 1,
         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 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");
                ...