Prevent folder upload in jQuery File Upload

Question

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?

It should be noted that one reason to not support dropping folders in your web app is that Google Chrome 55 does not correct set the file.type (aka ContentType) for some files types (zip, doc, xls) inside folders. It will set the file.type to an empty string. — dhollenbeck
– dhollenbeck, Commented Dec 25, 2016 at 2:41

melissanoelle · Accepted Answer · 2015-02-18 19:46:13Z

2

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.

answered Feb 18, 2015 at 19:46

melissanoelle

1221 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vinod Over a year ago

the code 'data.originalFiles.length" haven't worked for me. When I used the lines myJsonVin =JSON.stringify(data); var json_obj_vin = JSON.parse(myJsonVin); lenVin = json_obj_vin["files"].length; It showed the number of files in a dragged folder. This worked in Chrome, but not in firefox (on Windows).

Vinod Over a year ago

<code> $('#fileupload').fileupload({ url: 'server/php/' }).on('fileuploaddrop', function (e, data) { myJsonVin =JSON.stringify(data); var json_obj_vin = JSON.parse(myJsonVin); lenVin = json_obj_vin["files"].length; if(lenVin>1){ alert("Please Zip your folder before you up!"); return false; } }).on('fileuploadsubmit', function (e, data) { data.formData = data.context.find(':input').serializeArray(); $('#divupload').load('listfiles.php'); }).on('fileuploaddone', function (e, data) { alert("File upload successfully") }); </code>

melissanoelle Over a year ago

Yeah, that's what I explained above. FF and Chrome handle it differently for whatever reason. :) You're only setting lenVin to json_obj_vin["files"].length and then testing if it's >1. You should try this instead:

if (json_obj_vin["files"].length > 1 || json_obj_vin.files[0].size === 0) { alert("Please zip your folder blah blah"); ... }

and remove the linVin = ..." line. Also, it's good practice to properly scope your variables by putting var in front of them. ;)

melissanoelle Over a year ago

Hey @Vinod -- I think this is correct and that you missed a small detail, you should consider marking it as accepted. :)

roottraveller · Accepted Answer · 2017-03-09 10:26:04Z

0

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 {

edited Mar 9, 2017 at 10:26

roottraveller

8,3108 gold badges65 silver badges70 bronze badges

answered Mar 9, 2017 at 9:08

hyojungkim

1

Collectives™ on Stack Overflow

Prevent folder upload in jQuery File Upload

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related