CODEWITHSUNDEEP
javascriptjqueryfile-uploadblueimp
Vinod
Vinod

Reputation: 675

Prevent folder upload in jQuery File Upload

I am using blueimp jQuery-File-Upload for uploading files (https://github.com/blueimp/jQuery-File-Upload/) . I wish to prevent users to drag folders to the drop area in Google Chrome (or any other brwosers). I have tried the option multiple and multiple directory webkitdirectory mozdirectory . I do not want user to drop folder in any browser(including chrome).

Does we have the option to prevent folder? Or can we have the option to zip a folder before it appears drop area? Or Is it possible to show an alert message that indicate, the user have to convert the folder to zip/rar and drag?

Upvotes: 0

Views: 3038

Answers (2)

hyojungkim
hyojungkim

Reputation: 1

I don't find option but it changed code in jquery.fileupload.js

 } else if (entry.isDirectory) {
       // directory drag prevent
       //dirReader = entry.createReader();
       //readEntries();
} else {

Upvotes: 0

melissanoelle
melissanoelle

Reputation: 112

So, I had this same issue. The way to detect it on Chrome is to look for data.originalFiles.length > 1, and on Firefox you want to look for data.files[0].size === 0.

I tried playing around with setting the options for minFileSize: 1, maxNumberOfFiles: 1 (and setting getNumberOfFiles too!), singleFileUploads: false, and limitMultiFileUploads: 1... but none of them seemed to work very well, and the documentation was kind of fuzzy and the code a bit convoluted.

They do have an option for validations (https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processqueue), but the example uses the deprecated $.Deferred method in jQuery.

So, I ended up doing something like this (I removed all of my custom stuff and extras to make it a little more simple/to the point):

var jqXHR = null;

$('#fileupload').fileupload({
  multipart: false,
  add: function(e, data) {
    if (data.originalFiles.length > 1 || data.files[0].size === 0) {
      fileError(null, 'zip');
    } else {
      jqXHR = data.submit();
    }
  },
  error: function(jqXHR, textStatus) {
    self.fileError(jqXHR, textStatus);
  }
});

var fileError = function(jqXHR, textStatus) {
  var statusCode = jqXHR ? jqXHR.status : 0;
  // Figure out something nice to say, then close modal and clear out input box.
  var friendlyError = 'Your file failed to upload.';

  if (textStatus === 'abort') {
    friendlyError = 'Your file upload was aborted.';
  } else if (textStatus === 'error') {
    friendlyError = 'There was a server error that prevented your file from being uploaded.';
  } else if (textStatus === 'zip') {
    friendlyError = 'This file cannot be uploaded. Please zip the file and try again.';
  }

  // Your custom UI code here!
};

Basically, if it's got more than one file or the file size is 0, trigger the error code instead of submitting the jqXHR data. Then, override the error handling in fileupload to also use this error handler, because DRY.

Upvotes: 2

Related Questions