hayageek / jquery-upload-file

jQuery Upload File plugin provides Multiple file Uploads with progress bar.Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
http://hayageek.com/
MIT License
682 stars 417 forks source link

"allowDuplicates: false" not working after page reload with "onLoad:function" enabled #208

Closed uomopalese closed 3 years ago

uomopalese commented 3 years ago

The allowDuplicates: false option works fine until you reload the page.

When you reload the page, with onLoad: function (obj) {...} enabled the already uploaded file is listed correctly, but if you try to upload the same file, the ajax-file-upload-statusbar container is duplicated. Note that the file is uploaded to the server only once (the first time).

The main problem is that if you delete one of the listed files, the original file is deleted from the server leaving you in the false belief that there is another copy of the file on the server.

If you don't delete any file and try to upload the same file for the third time, the error message correctly appear, telling you that the file is already on the server

If you reload the page, the dummy container disappears.

...
allowDuplicates: false,
onLoad:function( obj ) {
  $.ajax({
    cache: false,
    url: "load.php",
    dataType: "json",
    success: function( data ) {
      for( var i=0; i<data.length; i++ ) {
        obj.createProgress(data[i]["name"],data[i]["path"],data[i]["size"]);
      }
    }
  });
},
...

With these options enabled you can reproduce the issue in this way:

  1. Upload a file
  2. Reload the page
  3. Upload the same file again
uomopalese commented 3 years ago

After checking the script jquery.uploadfile.js i found out that there's a line that save the filename ina a list (array) whenever you upload a file : obj.existingFileNames.push(files[i].name);

You can check the console upon saving.

The list isn't saved anywhere, and disappear if you refresh the page, and this is why if you try to upload the same file after a page reload, the ajax-file-upload-statusbar container is duplicated.

To avoid this behavior modify the onLoad:function() as follow:

...
allowDuplicates: false,
onLoad:function( obj ) {
  $.ajax({
    cache: false,
    url: "load.php",
    dataType: "json",
    success: function( data ) {
      for( var i=0; i<data.length; i++ ) {
        obj.createProgress(data[i]["name"],data[i]["path"],data[i]["size"]);
        obj.existingFileNames.push(data[i]["name"]);  //  ...add this line
      }
    }
  });
},
...