javascriptphpjquerydropzone.jsjquery-file-upload

How to remove a file from the drop box area of Dropzone?


I use the Dropzone.js for uploading the files in an application.After a user selects the pictures from his local computer's file manager to the dropzone area,if user later finds that he/she want to remove one of the picked pictures or files.How to achieve it?

HTML code :

 <form id="file-up" action="upload_file.php" method="post" enctype="multipart/form-data" class="dropzone" id="my-awesome-dropzone">

 <div class="fallback">

 <input type="file" id="upload_file" name="upload_file[]"  multiple/> 
 <input type='hidden' id='uploadvalues' />

 </div>

 </form>

The jquery

   <script type="text/javascript">

    Dropzone.options.myAwesomeDropzone = {
      maxFilesize: 20, // Size in MB
      addRemoveLinks: true,
        removedfile: function(file) { 
          var fileRef;
          return (fileRef = file.previewElement) != null ? 
                  fileRef.parentNode.removeChild(file.previewElement) : void 0;
        },

   success: function(file, response) {
              alert(response);
            },

   error: function(file, response) {
                  alert(response);
            }

 };




  </script>

PHP server side code for uploading

     <?php
      if(isset($_POST['submit_image'])){
     $ds          = DIRECTORY_SEPARATOR;  //1

     $storeFolder = 'uploads';   //2

     if (!empty($_FILES)) {

     $tempFile = $_FILES['file']['tmp_name'];          //3             

     $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

     $targetFile =  $targetPath. $_FILES['file']['name'];  //5

     move_uploaded_file($tempFile,$targetFile); //6

       }
     }
    ?>

Solution

  • You can also use the following snippet:

    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
     addRemoveLinks: true,
     removedfile: function(file) {
       var name = file.name; 
       
       $.ajax({
         type: 'POST',
         url: 'upload.php',
         data: {name: name,request: 2},
         sucess: function(data){
            console.log('success: ' + data);
         }
       });
       var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
     }
    })