title: Dropzonejs with Rails - Deleting Files from Server
body: <p>I'm working with the dropzonejs-rails gem and incorporating a dropzone for file management. I have uploading working great, but removal of files is causing me anguish. I can't get the listener to attach so that the ajax will hit my server. My forte is Ruby on Rails, and I have only limited javascript experience, so that's probably the real issue here... but maybe someone can help me solve my [shameful] 2-day struggle.</p>
  
  <p>Dropzone is displaying the previewTemplate correctly in the dropzone once the file is uploaded, and the <code>addRemoveLinks: true</code> is displaying the remove link on the thumbnail preview. My goal is that upon the user clicking a file's remove link, a request should be sent to the server to delete the file. I tried many different approaches from blogs, dropzone FAQ, github issues, etc. The closest I have come to success is this: <a href="https://github.com/enyo/dropzone/issues/456" rel="nofollow">https://github.com/enyo/dropzone/issues/456</a>.</p>
  
  <p>I tried add an event listener to the <code>.dz-remove</code> button upon successful upload. This listener is intended to hit the server with an ajax request to delete the file. Currently, clicking the remove link on the preview thumbnail only removes the preview thumbnail from the dropzone, but does NOT hit the server with the ajax. Here is the javascript code:</p>
  
  <pre><code>// Listening for Dropzone upload success
  // imageDropzone is the camelized version of the dropzone form's id. 
  Dropzone.options.imageDropzone = {
    init: function() {
      this.on("success", function(file, response, event) {
  
        // Loads image ID to the file preview for use w/deletion
        var elem;
        elem = document.createElement('input');
        elem.setAttribute("name", "id");
        elem.setAttribute("value", response["id"]);
        elem.setAttribute("type", "hidden");
        file.previewTemplate.appendChild(elem);
  
        // Add the listener to the dz-remove class link
        $('.dz-remove').on("click", (function(e) {
          var imageId, imageToken, _this;
          _this = this;
          e.preventDefault();
          e.stopPropagation();
          imageId = $(_this).parent().find('[name="id"]').val();
          console.log(_this);
          console.log(imageId);
          console.log(imageToken);
          $.ajax({
            url: "/remove_image",
            type: "DELETE",
            dataType: "script",
            data: {
              id: imageId
            }
          });
          return false;
        }), false);
      });
    }
  };
  </code></pre>
  
  <p>So, it should find the file info associated with the clicked remove link, and sends that info to the server for the delete request. Anyone successfully gotten this approach (or a better one??) working using Javascript for a Ruby on Rails (Rails 4) application?</p>
  
  <p>Let me know if you want any additional information or code. Thanks!</p>