I am trying to implement Dropzone JS to help with uploading files to the server. I'm using a generic implementation of Dropzone on the client side with my html looking like this:

  <form id='portfolioupload' action='PortfolioUpload.php' class='dropzone'>
    <div class='fallback'>
      <input name='file' type='file' />
    </div>
  </form>

In the server, I do some checks and, in the end, I rename the file and move it into it's final place:

$newname = substr(GetGUID(false), -7) . '.' . $ext;
move_uploaded_file($_FILES['file']['tmp_name'], PortfolioPath() . $newname) 

I pass this information back using json, as suggested in Dropzone.js- How to delete files from server?:

header_status(200); // output header, error 200
echo json_encode(array("Filename" => $newname));

The code sample there looks like it adds it to an array that can be passed to the server for deletion. So close, but not quite what I'm looking for.

I then stumble on the question, how to upload and delete files from dropzone.js, and see that I can listen to the removedfile event. So I implement the code there like so:

Dropzone.options.portfolioupload = {
  acceptedFiles: '.png, .jpg, .gif',
  addRemoveLinks: true,
  maxFiles: 25,
  maxFilesize: 500000,
  removedfile: function(file) {
    alert('Deleting ' + file.name);
    var name = file;
    $.ajax({
        type: 'POST',
        url: 'app/assets/PortfolioUpload.php',
        data: "f=delete&fn="+name,
        dataType: 'html'
    });

    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
  }
};

The request is sent to the server successfully except that the filename is that of the original, not the server's renamed filename.

After scouring the net today I feel like I can't figure out how to tie the two items together. For example, if I uploaded foo.jpg and rename it in the server to dk03p7b.jpg, how do I tell Dropzone that foo.jpg = dk03p7b.jpg so that when the user clicks Remove file, it's also removed in the server?

I am trying to implement Dropzone JS to help with uploading files to the server. I'm using a generic implementation of Dropzone on the client side with my html looking like this:

  <form id='portfolioupload' action='PortfolioUpload.php' class='dropzone'>
    <div class='fallback'>
      <input name='file' type='file' />
    </div>
  </form>

In the server, I do some checks and, in the end, I rename the file and move it into it's final place:

$newname = substr(GetGUID(false), -7) . '.' . $ext;
move_uploaded_file($_FILES['file']['tmp_name'], PortfolioPath() . $newname) 

I pass this information back using json, as suggested in Dropzone.js- How to delete files from server?:

header_status(200); // output header, error 200
echo json_encode(array("Filename" => $newname));

The code sample there looks like it adds it to an array that can be passed to the server for deletion. So close, but not quite what I'm looking for.

I then stumble on the question, how to upload and delete files from dropzone.js, and see that I can listen to the removedfile event. So I implement the code there like so:

Dropzone.options.portfolioupload = {
  acceptedFiles: '.png, .jpg, .gif',
  addRemoveLinks: true,
  maxFiles: 25,
  maxFilesize: 500000,
  removedfile: function(file) {
    alert('Deleting ' + file.name);
    var name = file;
    $.ajax({
        type: 'POST',
        url: 'app/assets/PortfolioUpload.php',
        data: "f=delete&fn="+name,
        dataType: 'html'
    });

    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
  }
};

The request is sent to the server successfully except that the filename is that of the original, not the server's renamed filename.

After scouring the net today I feel like I can't figure out how to tie the two items together. For example, if I uploaded foo.jpg and rename it in the server to dk03p7b.jpg, how do I tell Dropzone that foo.jpg = dk03p7b.jpg so that when the user clicks Remove file, it's also removed in the server?

• javascript
• php
• dropzone.js

2 Answers 2

I solved this myself by, first, taking the json from the success response and saving it to the element file.previewElement.id like this:

  success: function( file, response ) {
    obj = JSON.parse(response);
    file.previewElement.id = obj.filename;
  }

Then I use that value when doing the delete ajax call in the removedfile event:

  removedfile: function(file) {
    var name = file.previewElement.id;
    $.ajax({
        type: 'POST',
        url: 'deletefile.php',
        data: "fn="+name,
        dataType: 'html'
    });

    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
  },

This also worked for me

 // "myAwesomeDropzone" is the camelized version of the HTML element's ID
var myDropzone = new Dropzone("#myAwesomeDropzone", {
   /*
    * This step isn't required.
    success: function(file, response) {
        file.previewElement.id = response.id;
    }
   */

});
myDropzone.on('removedfile', function(file) {

    var id = jQuery(file.previewElement).find('.dz-filename span').html();
    //  directly access the removing preview element and get image name to delete it from server.
   // var id = file.previewElement.id;
    $.ajax({
        type: 'POST',
        url: '<?php echo base_url('seller/deleteImagegalleryById'); ?>',
        data: {id: id, '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'},
        dataType: 'html'
    });
    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
});