$(function(){ var dropbox = $('#dropbox'), message = $('.message', dropbox), button = $('#file-input'); dropbox.filedrop({ // The name of the $_FILES entry: paramname:'image', maxfiles: 5, maxfilesize: 2, url: '/upload/process/', uploadFinished:function(i,file,response){ if(response.type == 'error') { alert('There was an error: ' + response.status); $.data(file).addClass('error'); $.data(file).find('.linkBox').remove(); return false; } else { $.data(file).addClass('done'); $.data(file).find('.linkBox').val(response.file); $.data(file).find('.linkBox').click(function() { this.focus(); this.select(); }); } // response is the JSON object that post_file.php returns }, error: function(err, file) { switch(err) { case 'BrowserNotSupported': showMessage('Your browser does not support HTML5 file uploads!'); break; case 'TooManyFiles': alert('Too many files! Please select 5 at most! (configurable)'); break; case 'FileTooLarge': alert(file.name+' is too large! Please upload files up to 2mb (configurable).'); break; default: break; } }, // Called before each upload is started beforeEach: function(file){ if(!file.type.match(/^image\//)){ alert('Only images are allowed!'); // Returning false will cause the // file to be rejected return false; } }, uploadStarted:function(i, file, len){ createImage(file); }, progressUpdated: function(i, file, progress) { $.data(file).find('.progress').width(progress); } }); var template = '