THIS IS AN OLD POST
Please go to the jQuery Multiple File Upload Plugin Project Page
Version: 1.1 | Documentation / Examples | Download | Discussion Forum
The new version of the plugin has the following features:- Events
Gives you total control of the plugin's functionality - Simple validation
Can automatically disallow the selection of invalid file types by checking the file's extension
Example: This file input will only accept files with .jpg, .gif or .png extension.
Official jQuery project page: http://jquery.com/plugins/project/MultiFile
Documentation, download and demos: Multiple File Upload Plugin for jQuery
As always, please post comments/suggestions here...
35 comments:
Is this compatible for the Forms plugin? I'm trying to get the two to play nice together, but not having much luck. The forms plugin thinks that files.length is 0, so never attempts to upload anything.
-- hugh
To be honest Hugh, I don't know but I don't see any reason why it shouldn't work. I use the form plugin myself and have not had any problems...
This plugin simply creates (and hides) several file elements. The form plugin should loop through all elements before submitting the form.
Do you have an URL where I can test this?
Well, it just dies miserably in newest Opera. You choose the first file and that's it. Nothing shows, nothing happens.
Working nice in IE/FF though.
I have 3 suggestions:
1 - Option to change the place of the link "remove" (I mean, before or after the name of the file)
2 - Option to give a classname to each div of a new insertion.
3 - Option to insert a message (HTML) for invalid files, instead of using "alert".
1 - change the place of the link "remove"
That can be done...
2 - classname to each div
This is more efficient by wrapping the file input element in a div.
instead of "div.test", do ".test div"
3 - insert a message (HTML) for invalid files
I'll consider integrating this with another plugin (BlockUI for example)
Please make a mode like google mail attachment
1. Hide current multi_x_y file input by absolute positioning at -1000px;
2. Provide a link "file upload", simple bind onclick event with $('#multi_x_y').click();
This is a more friendly to the user than default interface
IE 6/7 does not seem to work when your form elements are contained within an ordered list with list items. It will just select the file but not add them to the DOM.
After stripping out all the ordered list and list tags the plugin works. I will probably use a table for my form until there is a fix.
UPDATE
Actually the ordered list was not the problem causing the plugin to not work in IE. I had an input field named 'length' that after renaming, the plugin works.
If you're having troubles with IE, check your field names.
As like file limit (max no. of files to upload), its better to have file size limit for uploading files... say, 300 kb (i.e. not exceeding 300 kb)
Thanks
Prabhu
Hi Prabhu,
OF COURSE, a limit of the file size would be great (!!!!!!).
But that can't be done with Javascript (without using ActiveX components)
how about allowing multiple selection of files in the browse window?
is this something jquery multiple file upload could also handle or is that a limitation elsewhere?
The script handles the elements of the page, but the browser is responsible for the file selection dialogue.
The dialogue cannot be controlled by javascript and as far as I'm aware, multiple selection of files is not supported by any browser.
I love this plugin. But, he is interesting to use in the format $(elemento).multifile({limit:0, accept:'jpg, gif, bmp, png'});
He is more interesting to use thus, personal opinion.
Tk's for this...
Thanks for your plugin. It's quite a help around here.
I would like to suggest the ability to add text fields that can be used to add a title to a file in order to save to a database, for example.
hi,
i'm trying to use the plugin in combination with the validation plugin, but it seems that the multiple file plugin makes the validation plugin lost focus
grtz Reijer
The multiple file plugin uses Javascript to create new elements. At the moment the validation plugin is not compatible with this plugin because the validation plugin can not handle elements that are created after the page has loaded.
Diego,
I love your multi file upload plugin. But I would like to add 2 suggestion:
1. File extension filter. Say if I am only interested in uploading gif file, then non gif files are not in file selection window.
2. File duplication. An alert message should be popped up when users mistakenly select a file twice.
Thanks
Thank you for your comments Spruce.
1. There is no way to control the file selection window. That's between the browser and the OS - not accessible to Javascript
2. Duplication validation was introduced in version 1.28. Please download the latest version
Diego
Thanks for your quick reply.
I downloaded the most current one (1.2.8). Unfortunately it doesn't work in either IE7 or FF2.x. Then I tried the demo page: http://www.fyneworks.com/jquery/multiple-file-upload/ It doesn't work either. Basically, file ext. type and file limit are not working.
Hi Spruce,
Thanks for explaining the problem (which helps). I found it and fixed it. Please download the latest version (dated 2008-05-02).
Thanks for your update. I tried that page http://www.fyneworks.com/jquery/multiple-file-upload/ . It seems worse :-) It doesn't accept any type of file. I always got a warning message no matter what a file extension name is.
Hi Spruce,
Can you check again? and make sure you refresh the page?
Thanks,
Diego A.
Yes, it works fine both in IE7 and FF2.x
Thanks for your work.
One more thing, looks like it is a bug in IE7.
The file name will be filled in file box when I click on remove (just remove a newly added file). However nothing is filled in FF2.x when I do the same thing (I guess this is how it is supposed to work). Another thing is (still in IE7) I click Browse button after I removed a file, that filled in file ext is used as file ext. filter.
Thanks
To fix the bugs I've seen in IE 7 (since version 1.26), I selectively applied an IE 7 fix courtesy of Vasily Selivanov (http://vasiliy-selivanov.com.ua/blog/2008/05/14/multiple-file-upload-plugin-for-jquery-and-ie7-and-jquery-validation-form/).
My version of the fix (his messed up FF) just uses his patch inside of jquery browser checking to make sure only IE 7 is modified.
This fix is as follows (ln 322):
/// now let's use jQuery
slave = $(slave);
becomes:
/// now let's use jQuery
slave = $(slave);
if ($.browser.msie && (parseInt($.browser.version) == 7)) {
slave.attr("name",(slave.name || $(MASTER).attr('name') || 'file'));
slave.attr("id",(slave.id || MASTER.generateID(slave.i)));
slave.val('');
slave.focus();
}
and,
// Remove element, remove label, point to current (ln 434 or so)
if(slave.i==0){
$(MASTER.eCur).remove();
MASTER.eCur = slave;
}
else{
$(slave).remove();
};
needs to become:
// Remove element, remove label, point to current
if ($.browser.msie && (parseInt($.browser.version) == 7)) { $(slave).remove(); }
else {
if(slave.i==0){
$(MASTER.eCur).remove();
MASTER.eCur = slave;
}
else{ $(slave).remove(); };
}
The patch above fixed issues where IE 7 will not clear the file input field successfully whenever you delete the first (and sometimes the last) file you've previously listed to attach. This bug would prevent attempts to reattach the file you'd just removed, and would lead to a removed file being submitted despite it's "removal."
1. The problem was not in the logic of the plugin
2. You work-around isn’t very reliable / neat
I was able to reproduce this behaviour in IE7 and found that - for some reason - the browser was firing the onchange event twice: onchange and onblur.
I fixed the problem by changing this code:
// Triggered when a file is selected
$(slave).change(function(){
…into this:
// Triggered when a file is selected
$(slave).change(function(){
// Lose focus to stop IE7 firing onchange again
$(this).blur();
Please download the latest version of the plugin to avoid future version conflicts:
http://www.fyneworks.com/jquery/multiple-file-upload/
PS.: Would you care to explain why you think this plugin is so awful?
I DO NOT think this plugin is awful. I am quite thankful for your having written it. I just posted a hack that fixed my particular problem when using the plugin with IE 7, as I thought others might have a similar problem.
My solution was not even remotely neat, and I didn't come up with the logic of Vasily's changes that fixed IE 7 (but destroyed functionality on FF). Please go ahead and delete my previous posts if they are no longer applicable to the latest version of the plugin.
Again, thank you for the work you've done, Diego.
Is there already a fix for the problem with IE (IE 6, IE 7), that when you remove the first file the filename will be selected to the input file element? (the value of the first [and then hidden] file element get's not cleared)
See also: Spruce's Comment
Yep. Just try it out here:
jQuery Multiple File Upload Plugin
Hi Diego!
Thanks for your fast support!
I tried it and it doesn't work (at least not in IE 6.0).
I've just tried it.
Select a file - remove it - and the filename is in the file-type field.
See this screenshot I've just made:
http://img228.imageshack.us/img228/5525/multifileieja1.jpg
The problem with that is, that if the users submits the form, the file will be sumbitted.
I have FINALLY (I hope) managed to work around the IE security feature that cause this problem. I've uploaded the new version (1.3) to:
http://www.fyneworks.com/jquery/multiple-file-upload/
GREAT NEWS!
I just checked it and it works pretty fine!
Thanks for your great support!
Post a Comment