weixiyen / jquery-filedrop Goto Github PK

What license does this code use?

Nothing critical, just a typo in the docs in case someone tries using the example in production:

allowedfiletypes: ['image/jpg','image/png','image/gif'],

Should be

allowedfiletypes: ['image/jpeg','image/png','image/gif'],

Otherwise uploading valid JPEGs will trigger the FileTypeNotAllowed error.

In the java script you check for response code 200 only (and ignore, 201, 204, ..). Those should be considered as well (e.g. 201 CREATED or 204 NO CONTENT), as one does not always send back data when something was uploaded.

if (xhr.status != 200) {
    opts.error(xhr.statusText);
}

FF9.0.1/Fedora 16 with master copy of jquery filedrop as at Jan 23, 2012.

Worked OK with FF7 if I recall rightly, but upgrading to FF9 it has stopped working. Chrome 16 is fine and upload on drag+drop works A-OK.

With FF9 I get 'BrowserNotSupported' error. I think I've tracked it down to the try/catch block on line 253, but that's as far as I've got in debugging.

[EDIT]

function drop(e) {
        opts.drop(e);
        files = e.dataTransfer.files;
    alert(e.dataTransfer.files.length); FF9=0, Chrome16 = 1
...
}

[/EDIT]

I think your plugin is awesome! Thanks for all the hard work.

But I need more cross browser support, mainly Safari (IE support would be phenomenal, but I know all the headaches it would cause).

And I also need file chunking to avoid your script freezing when upload multiple large files.

Finally, it would be nice to have a failsafe that presented a simple form file select button if the browser was incompatible.

I would be willing to pay you for this work.

Is this something you might be interested in?

These seem to end up landing on the server with an empty $_files in PHP. I've verified my upload_max_filesize and post_max_size are large enough to handle the size. However, the more I research into this, it looks like a max limit of an XMLHTTPRequest.

Looks like other file uploaders have the option to split the file into several XMLHTTPConnections for files that go over the max size. This would be a cool option to wrap into your uploader.

Doesn't return itself.

http://docs.jquery.com/Plugins/Authoring#Maintaining_Chainability

Hi,

I write this to check if the function works correctly, and they constantly call the function but is ok

dragOver: function(e) {
    console.log("Over....");
    // user dragging files over #dropzone
},
dragLeave: function(e) {
    console.log('Leave.....');
    // user dragging files out of #dropzone
},

But when I put something like this, the function call dragLeave and dragOver twice

dragOver: function(e) {
console.log("Over....");
$('.over_text').fadeIn('slow');
// user dragging files over #dropzone
},
dragLeave: function(e) {
console.log('Leave.....');
$('.over_text').fadeOut('slow');
// user dragging files out of #dropzone
},

I think is something with jQuery returning true after fadeIn function, console log looks like this:

Over....
Leave.....
Over....

Regards

Does this library support the latest Safari and IE?

Hi, this is a really awesome plugin with a clean implementation...props on that. The issue I'm running into is that the data I'm sending along is getting URL-encoded. The data object looks like this:

data: {
    'cmd': 'upload-file',
    'site-id': siteID,
    'upload-path': '/path/to/somewhere/'
}

So, you would expect to see '/path/to/somwhere' when you check the value of $_REQUEST['upload-path'] (using PHP), but instead it's encoded:

%2Fpath%2Fto%2Fsomewhere%2F

Yes, it's easy enough to decode with urldecode(), but I don't believe this is the correct behavior. The fallback for my uploader is a form that posts directly to the same PHP handler with the same parameters and there's no need to decode. Any idea why this might be the case?

I'm trying to post some parameters to be persisted in the database but they are not sent through the post method
adding
post :{
param1:'value1',
param2:'value2'
}
I can't get these parameter in the server side I don't know why can somebody help me please
thanks in advance

callback isn't called

I need multiple drop boxes for various kinds of files. The last $(dropbox) selected is the only one that works.

I've had better luck using the jQuery.parseJSON. Just a suggestion.

opts.uploadFinished(index, file, jQuery.parseJSON(xhr.responseText), timeDiff);

https://github.com/weixiyen/jquery-filedrop/blob/master/jquery.filedrop.js#L216

File has name with unicode character can't be uploaded.

example: Chào_ngày_mới.jpg.

May be add function bellow as default of "rename" event:

function removeUnicode(str) {
str = str.toLowerCase();
str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a");
str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e");
str = str.replace(/ì|í|ị|ỉ|ĩ/g, "i");
str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o");
str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u");
str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y");
str = str.replace(/đ/g, "d");
str = str.replace(/!|@|%|^|*|(|)|+|=|<|>|?|/|,|.|:|;|'| |"|&|#|[|]|~|$|_/g, "-");
str = str.replace(/-+-/g, "-"); //replace (--) to (-)
str = str.replace(/^-+|-+$/g, "");
return str;
}

Works in mobile Safari iOS 6 but I have to add random string (timestamp) the XHR due to iOS 6 caching requests issue:

xhr.open("POST", opts.url + '&ts=' + new Date().getTime(), true);

may be '?ts=' depending on your url

I am using the example as is, except to change the URL to my PHP script. However, when I drag a file onto the drop zone, the PHP script's $_POST variable is set to:
param1"value1--------multipartformboundary1284039485329] => \xff\xd8\xff\xe1$\x8eExif\n
The HTML is:

The drop even conflicts with the mouseup event from droppable if droppable is applied within an element affected by filedrop.

I changed the following in the drop(e) function :

opts.drop(e);
if(e.originalEvent.type == 'drop'){
    files = e.dataTransfer.files;
}
if (files === null || files === undefined) {
    opts.error(errors[0]);
    return false;
}

when i select more than 5 files an alert shown : "Too many files! Please select 5 at most!" ... ok thats's good

but when i try to upload more than 5 files one by one ... nothing happens and i can always upload more and more files ?

so please how to fix this ?

maybe you can Decrease the maxfiles limit every time a file uploaded !!

In my experiments, afterAll is not triggered if all files are rejected. This doesn't work with what I'm using the plugin for, so I added a couple lines in the following commit:

• Reactor5/jquery-filedrop@ef67d47df372d4d8260cdcbf160594c90e174788

The issue here is: should this behavior be moved to a separate method or stay in afterAll? I can see use cases where afterAll definitely should not be triggered for all files erroring out, but also use cases where it definitely should.

Thought this might be useful in case you haven't come across it yet:

http://www.deadmarshes.com/Blog/20110413023355.html

Just as the title says. With out anything added to the data object parameter the post data comes out correctly however when adding anything to the data object parameter the posted data stops after the data parameters are added in.

Hi... Congrats on a great plugin.

I was wondering if it's possible to access either the file data or the file's local path so I can show a thumbnail of the file while uploading. This would only apply to images. I'm allowing upload of several images at the same time and it'd be nice to show a thumbnail with a spinner (or something along those lines) to give the user visual feedback about which files are still uploading.

Is this possible w/o modifying the plugin?

Thanks,

Luis

Has anyone tested this feature?

#38

I can't seem to get it to work. I'm doing

var uploadDiv = $("#upload_wizard");
uploadDiv.filedrop({
      blah blah options
});
uploadDiv.filedrop('destroy');

but the functionality remains.

How can I prevent dragging and uploading of directories and shortcuts? Is there a way using allowedfiletypes[]? I want to allow any filetype, except directories or shortcuts.

Thanks.

Hello,

The callbacks you are using are sensitive also when for example you select some text in the page and try to drag it somewhere.
For example I have a css that applies a bigger border when a user drags a file in the browser window, and this class is being applied also when some text from the webpage is being dragged.
I'm using chrome 13, hope that helps.

Firefox latest is triggering the errors[0] on line 241
any ideas why or if this is happening with anyone else?

When dropping files while queues are being uploaded, it starts processing the newly dropped files in parallel instead of queuing it in the back.

Eg: You have queuefiles: set to 2 at a time and you are processing 10 files. Drop another batch during the process, it will start uploading 4 files simultaneously. 2 from the old drop and 2 from the new drop while it should be 2 at all times.

Hi!

First of all, thanks for a great plugin! Made adding drag&drop uploads a breeze.

I've got two improvement suggestions:

1. Instead of doing "not supported" detection retroactively by catching errors you might want to detect FileReader class being undefined already at initialization and thus providing an easier way to cancel initializing the element. This can obviously be done outside the plugin too, but if it was built-in, it'd make reacting to situations where local file uploads are unsupported a bit easier.

2. Safari (or any Webkit with no FileReader support) can be taken care of with a bit of a hack: Create an opacity 0 file input into the dropzone, make it the same height / width as the dropzone and z-index on the top. The on "change" event of the input just add logic for creating an iframe, a form into it and copying the file input element in there, then submitting it.

Let me know if I can help you bring these in or if you even consider these worth bringing into the plugin.

i have multiple dropzones on a page, all but one are created dynamically. when i try to drag and drop a file, only the dropzone that is created manually is usable, the dynamic ones are not.

i made a simplified jsfiddle to show what im talking about

http://jsfiddle.net/seesoe/4qcfK/

I found the fact dragleave triggered when entering a child utterly infuriating as I wanted it to work more in the same way mouseleave does, rather than the way mouseout does.

I created a jQuery special event which I've called dragout to replicate the behaviour I needed..

https://github.com/dancork/jquery.event.dragout

Whether you want to use it with this plugin is up to you but I amended the events that trigger so that my dragout triggers the dragLeave function sent to it and the html5 dragleave event triggers a new dragOut event I added. This way the functionality matches the mouse events.

Hi!

Great plugin - I had a lot of trouble getting others to work nicely without an existing form, this one seems to handle that really well.

I want to have several "drop targets" on my page, and the upload script (and uploadFinished handler) will do specific things dependent on which element the file was dropped on. I'm trying to use the data option to send the element name to the upload script. This seems to work (upload script sees the element name) but in every case, the element name that is sent is the last one that was defined, not the one that the file was dropped on. Eg:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-filedrop/jquery.filedrop.js"></script>


<script language="javascript" type="text/javascript">

$(document).ready(function(){
        $('.dropdiv').each( function(){
                var blockname = $(this).attr('id');
                $(this).filedrop({
                        url: '../misc/upload.php',
                        data: { 
                                source: blockname,
                        },
                        uploadFinished: function(i, file, response, time) {
                                $('#msgdiv').html(file.name + ' is done and responded <pre>' + response.files + response.request + '</pre>');
                        },
                })
        });
        $('#msgdiv').text('all quiet.');        
});     

</script>
</head>
<body>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv" >Drop images here</div>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv2">Drop images here2</div>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv3">Drop images here3</div>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv4">Drop images here4</div>
<div id="msgdiv">no messages.</div>
</body>
</html>

Here I'm passing the data as "blockname" which I set earlier (since $(this) appears... broken) but no matter which div I drop a file onto, the "source" paramater is set to "dropdiv4".

I'm testing on Chrome 14. I did make another change to the events (I made it call xhr.onreadystatechange instead of onload - the latter appears non-functional in chrome14? At any rate, I don't think it will affect this)

I figure I am doing something silly with the .each call or more general-boneheadedness :-) What am I missing here?

How would you cancel an upload that is in progress?

Latest version compared to previous one I downloaded (with same version number) has numerous syntax errors which are thrown in console as soon as trying to load.

Chrome seems to crash when trying to upload large files. Any plans to support this any time soon? A bit of googling revealed HTML5 should support this via chunking.

So may just be my crappy internet, but for a number of larger-ish uploads, when the progress reaches 100% chrome's js console just spits out a 404 error when trying to communicate with the specified url and the user doesn't even see anything, it just freezes on 100%. Any way to deal with this?

Note: it doesn't happen everytime and haven't seen it happen on smaller uploads yet.

I've made some work on filedrop to make sure all functions get called with the filedrop area jQuery object as context (this). Also true for opts.* functions. All of this by wrapping function calls with $.proxy.

Moved variable opts to each droparea's jQuery data, and so, every droparea now has its own options.

Prevent from using addEventListener on progress and upload: change it to use bind (and proxy).

In the latest version of Chrome 22.0.1229.94 the following warning is thrown:

ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.

Hello,

I've tried using your plugin with jQuery 1.6 and I'm getting this error:
Uncaught SyntaxError: Unexpected token ILLEGAL.

Stack:
Uncaught SyntaxError: Unexpected token ILLEGAL
f.e.extend.parseJSONjquery-1.6.1.min.js:16
xhr.onloadjquery.filedrop.js:223

filedrop is called with the example from the github readme, i didn't change anything.

If the customizable beforeEach function throw a Javascript Error,
the catch() section launch a BrowserNotSupported error code.

• the real error is hidden to the developer
• the user get a wrong message

It's quite easy to reproduce, I would be glad to send a TestCase for this issue, adding unit test to this plugin would be a great idea!

Also, I think the browser compatibility should be check at only one place ($.fn.filedrop) - actually there is 3 ways to display the BrowserNotSupported error.

May also fix or be related to #46.

I had a hard time finding that out, so for future users it would be convenient if you documented it somewhere in the README.

Thanks!

I was wondering if it was possible to easily 'link' this plugin with your standard HTML5 upload file button. We have an area to drag and drop files, which works fine, but it'd be nice to have the standard upload window as well for people who prefer that.

The current master has an type - in line 245 it is

for (var i=0; i < filesCount; i++) {

but it should be files_count

Is there a method to allow only ONE file to be uploaded?

What's about?:

$('#dropbox1').filedrop();
$('#dropbox2').filedrop();
$('#dropbox3').filedrop();

In the same page?

Why don't you change to:
(function ($) {
$.fn.extend({
filedrop: function (opts)
....

Instead of

$.fn.filedrop=....
...
?

We may have a problem with the ability to send POST parameters to the server along with the file to be uploaded.

The change I want to make is to deprecate the XmlHttpRequest method sendAsBinary() function, because Webkit does not plan to support it (it's a firefox proprietary function).

What we can do instead is use the XHR send() function, which is in the web standards spec.

However, this would mean that you will no longer be able to pass POST variables to the server. A possible workaround is to use the handler URL itself to pass identifying information. For example, your upload URL could be in this format:

/upload/<album_id>

This would of course fundamentally break the API for anyone using POST variables at the moment, which I assume is a lot of people. But I think we have to do it because to get Safari/Chrome to work correctly.

The other possible solution is hacky - dynamically create a multi-file-input tag to appear under the user's mouse as they are dragging. When they release, the multi-file-input tag is populated with all the files and we can use multipart form-data as the transport method.

What are your thoughts on this?

Currently all files are uploads with content-type "application/octet-stream". This is wrong, content type can be taken from File.type attribute:

// get mime from file before call getBuilder
mime = file.type
function getBuilder(filename, filedata, mime, boundary) {
...
builder += 'Content-Type: '+mime;
...

Hi,

Is there a way to add and call an on_cancel event handler to cancel whatever remains on the queued files for uploading?

Thanks

When using org.apache.commons.fileupload on the server for handling POST file uploads, fileupload throws an exception indicating it believes the message does not conform to the required syntax. Moving lines 100-102 in getBuilder to line 85 resolves the issue.