diff --git a/README.md b/README.md index 54dc367..0bc582c 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,8 @@ Usage Example ```javascript $('#dropzone').filedrop({ - fallback_id: 'upload_button', // an identifier of a standard file input element, becomes the target of "click" events on the dropzone - fallback_dropzoneClick : true, // if true, clicking dropzone triggers fallback file selection and the fallback element is made invisible. + fallback_id: 'upload_button', // an identifier of a standard input[type="file"] element, becomes the target of "click" events on the dropzone + fallback_dropzoneClick : true, // if true, clicking dropzone triggers fallback file selection and the fallback input[type="file"] element is made invisible. url: 'upload.php', // upload handler, handles each file separately, can also be a function taking the file and returning a url paramname: 'userfile', // POST parameter name used on serverside to reference file, can also be a function taking the filename and returning the paramname withCredentials: true, // make a cross-origin request with cookies diff --git a/jquery.filedrop.js b/jquery.filedrop.js index 1c05ec9..368d3d5 100644 --- a/jquery.filedrop.js +++ b/jquery.filedrop.js @@ -71,20 +71,23 @@ files_count = 0, files; - if ( opts.fallback_dropzoneClick === true ) + this.on('drop', drop).on('dragstart', opts.dragStart).on('dragenter', dragEnter).on('dragover', dragOver).on('dragleave', dragLeave); + $(document).on('drop', docDrop).on('dragenter', docEnter).on('dragover', docOver).on('dragleave', docLeave); + + if ( opts.fallback_dropzoneClick === true && opts.fallback_id ) { + // Fallback must be an input[type='file'] + var fallback_type = $('#' + opts.fallback_id).attr('type'); + if(fallback_type !== 'file') { + throw "Fallback element ["+opts.fallback_id+"] must be of type 'file', but it is of '" + fallback_type + "'."; + } + $('#' + opts.fallback_id).css({ display: 'none', width: 0, height: 0 }); - } - - this.on('drop', drop).on('dragstart', opts.dragStart).on('dragenter', dragEnter).on('dragover', dragOver).on('dragleave', dragLeave); - $(document).on('drop', docDrop).on('dragenter', docEnter).on('dragover', docOver).on('dragleave', docLeave); - if ( opts.fallback_dropzoneClick === true ) - { if ( this.find('#' + opts.fallback_id).length > 0 ) { throw "Fallback element ["+opts.fallback_id+"] cannot be inside dropzone, unless option fallback_dropzoneClick is false"; @@ -97,12 +100,14 @@ } } - $('#' + opts.fallback_id).change(function(e) { - opts.drop(e); - files = e.target.files; - files_count = files.length; - upload(); - }); + if(opts.fallback_id) { + $('#' + opts.fallback_id).change(function(e) { + opts.drop(e); + files = e.target.files; + files_count = files.length; + upload(); + }); + } function drop(e) { if( opts.drop.call(this, e) === false ) return false; @@ -424,7 +429,7 @@ this.send(ui8a.buffer); } } - + xhr.sendAsBinary(builder); global_progress[global_progress_index] = 0;