title: Dropzone removing a file after upload
body: <p>I'm using dropzone to allow a user upload a max of 3 images.  All is working fine however I want to remove the image from the server.  This is working fine when the page initially loads.  I check server to see if any of the 3 files exist and load them with their server name in the dropzone area.</p>
  
  <pre><code>var fs1 = &lt;?php echo $filesize1; ?&gt;;
  if(fs1 != 0)
  {
  var mockFile1 = { name: "&lt;?php echo $id; ?&gt;-1.&lt;?php echo $ext1; ?&gt;", size: &lt;?php echo $filesize1; ?&gt; };
  myDropzone.emit("addedfile", mockFile1);
  myDropzone.emit("thumbnail", mockFile1, "/logos/&lt;?php echo $id; ?&gt;-1.&lt;?php echo $ext1; ?&gt;");
  myDropzone.emit("complete", mockFile1);
  file_up_names[0] = "&lt;?php echo $id; ?&gt;-1.&lt;?php echo $ext1; ?&gt;";
  }
  
  var fs2 = &lt;?php echo $filesize2; ?&gt;;
  if(fs2 != 0)
  {
  var mockFile2 = { name: "&lt;?php echo $id; ?&gt;-2.&lt;?php echo $ext2; ?&gt;", size: &lt;?php echo $filesize2; ?&gt; };
  myDropzone.emit("addedfile", mockFile2);
  myDropzone.emit("thumbnail", mockFile2, "/logos/&lt;?php echo $id; ?&gt;-2.&lt;?php echo $ext2; ?&gt;");
  myDropzone.emit("complete", mockFile2);
  file_up_names[1] = "&lt;?php echo $id; ?&gt;-2.&lt;?php echo $ext1; ?&gt;";
  }
  
  var fs3 = &lt;?php echo $filesize3; ?&gt;;
  if(fs3 != 0)
  {
  var mockFile3 = { name: "&lt;?php echo $id; ?&gt;-3.&lt;?php echo $ext3; ?&gt;", size: &lt;?php echo $filesize3; ?&gt; };
  myDropzone.emit("addedfile", mockFile3);
  myDropzone.emit("thumbnail", mockFile3, "/logos/&lt;?php echo $id; ?&gt;-3.&lt;?php echo $ext3; ?&gt;");
  myDropzone.emit("complete", mockFile3);
  file_up_names[2] = "&lt;?php echo $id; ?&gt;-3.&lt;?php echo $ext1; ?&gt;";
  }
  
  myDropzone.options.maxFiles = myDropzone.options.maxFiles - &lt;?php echo $num_images; ?&gt;;
  </code></pre>
  
  <p>When I uploaded an image, I check server and using AJAX save it to the server.  JSON returns the file image name and size. I rename the image when it is uploaded to uniqueID-1.jpg or uniqueID-2.jpg or uniqueID-3.jpg depending on the what images have been uploaded previously.  So if only one image has been uploaded, the next one gets renamed uniqueID-2.jpg and so on.</p>
  
  <p>Note: fs1, fs2 and fs3 are js variables that are set to the file size of images already uploaded when the page loads.</p>
  
  <p>Here is my full code so far:</p>
  
  <pre><code> Dropzone.autoDiscover = false;
    var file_up_names = new Array;
   var myDropzone = new Dropzone("#my-awesome-dropzone", { // Make the     #my-awesome-dropzone a dropzone
      url: "new-logo.php",
      paramName: "file", // The name that will be used to transfer the file
      maxFiles: 3,
      maxFilesize: 1,
      addRemoveLinks: true,
      acceptedFiles: 'image/jpeg, image/jpg, image/png',
      thumbnailWidth: 260,
      thumbnailHeight: 120,
      dictRemoveFile: 'Remove Logo',
      accept: function(file, done) {
          console.log("Uploaded");
          done();
      },
      success: function( file, response ){
          var obj = JSON.parse(response);
          console.log(obj.filename + " " + obj.filesize);
          var fn = obj.filename;
          var fnsize = obj.filesize;
          file_up_names.push(obj.filename);
  
          $(file.previewElement).find('[data-dz-name]').html(fn);
          myDropzone.emit("thumbnail", file, "logos/" + fn);  
      },
      removedfile: function(file) {   
          x = confirm('Do you want to delete this logo?');
          if(!x)  return false;
          for(var i = 0; i &lt; file_up_names.length; ++i) 
          {       
            alert(file_up_names[i] + " " + file.name);
            if(file_up_names[i] == file.name) 
            {
              $.ajax({
                  type: 'POST',
                  url: 'delete-logo.php',
                  data: "file_name="+file_up_names[i],
                  dataType: 'html'
              });
              myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;
              var _ref;
              return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
            }
          }
      }
  </code></pre>
  
  <p>});</p>
  
  <p>So here is the issue that I cannot seem to sort.</p>
  
  <p>Lets say I upload an image called test.jpg and this get renamed to 15-2.jpg.  This name gets stored in the array of file names no problem.  But when I click the Remove Logo link I alert out the file name from the array file_up_names and the file.name property value for testing.</p>
  
  <p>The file.name is showing still as test.jpg so it never will match the 15-2.jpg in the file_up_names array.</p>
  
  <p>The success is changing the file name but this is not globally set so the removedfile cannot see the updated file name from server.</p>
  
  <p>How can I set the file.name to be 15-2.jpg (i.e. the served file name returned by JSON in success) rather than test.jpg?</p>