jqUploader: jQuery plugin for javascript / flash file upload and progressbar
I just released my first plugin for jQuery, the best of the best javascript libraries.
jqUploader is a jquery plugin that substitutes file input fields ( form input with type attribute set to”file”) with a flash uploader, containing a progressbar.
In other terms, this small script allows you to display a progress bar showing the upload progress, via javascript and a small flash file. You can modify the look by tweaking the source flash file provided with the plugin. Note that it is completely unobtrusive: users with javascript turned off will simply see the classic html file upload field.
How it works:
The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1″ so that the upload code is initiated when it sees that key/value is on the posted data.
NB: for use in a cakePHP application:
Make sure that you put in the full local dev path instead of /admin/.
So you can do something like:
$("input#ImageFilename").jqUploader({
src: '/js/jqUploader/jqUploader.swf',
uploadScript: '< ?php echo $html->url('/admin/images/
add/');?>',
afterScript: '< ?php echo $html->url('/admin/images/
add/');?>',
background: 'FFFFDF',
barColor: '64A9F6',
allowedExt: 'jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF'
});
Author: pixeline
Date: February 22nd, 2007
filed in: Development
Follow the discussion on this entry via RSS 2.0 feed.
Hi im getting a http error: #406 any idea what this is?
never heard of this error code before: do you get this error with any browser?
error 406 doc: http://www.checkupdown.com/status/E406.html
I have the same error…with the demo page, even (so it’s not just me forgetting something, which happens
).
i can’t help if i cannot see your implementation… you mean my demo page? can you post your link or file you are trying to upload, so that i can reproduce the error? which browser are u using?
http://redcoredesigns.com/jquery/demo.html
Since it’s bascially a straight install (just loaded ur files directly, chmod’d the folder, and tested the demo.html) there must be a server configuration that doesn’t allow it to work.
hi i downloaded and tried the script but when i integrate it locally on my website it returned an error in the flash text field “IO error” what that does mean and what remedy can i do to make it work. hoping for a positive response.
– james clavel
@james clavel:
here is the possible causes of your IO error:
- An input/output error occurs while the player is reading, writing, or transmitting the file.
- The SWF file tries to upload a file to a server that requires authentication, such as a user name and password. During upload, Flash Player does not provide a means for users to enter passwords. If a SWF file tries to upload a file to a server that requires authentication, the upload fails.
- The SWF file tries to download a file from a server that requires authentication, in the stand-alone or external player. During download, the stand-alone and external players do not provide a means for users to enter passwords. If a SWF file in these players tries to download a file from a server that requires authentication, the download fails. File download can succeed only in the ActiveX control and browser plug-in players.
- The value passed to the url parameter in upload() contains an invalid protocol. Valid protocols are HTTP and HTTPS.
(taken from the flash manual)
for further help, please post a link to your implementation.
Hi, great script. Though I’m wondering if I can pass variables from flash_upload.php to the afterScript page, or how to reload the page on successful upload and server-side processing to contain some info on how the upload went.
More specifically, I’m adding a row in a db table for each file and would like to fetch data from this entry and use it in the next page the user is being taken to after the upload.
Any ideas on how to achieve this?
Great Script ! thanks ! However is there any way to limit the file’s upload size ?
Alex: Here is what I did:
list_obj.onSelect = function()
{
siz = int(file_fr.size/1024/1024);
if(siz > 100)
{
upload_butn.enabled = false;
name_txt.text = “Max 100 MegaBytes!”;
}else{
upload_butn.enabled = true;
name_txt.text = file_fr.name+” – “+siz+” MB”;
};
};
It must be edited in the .FLA file in Adobe Flash.
Has anyone figured out how to send other form fields? If I want other info than the file, which the user can select – how can i parse this to the flash_upload file?
Hi thomas, thanks for sharing!
if i can find some time this week, i’ll implement a max file size functionality. Probably you will only have to write it in the html using the attribute max_file_size, and use jquery to retrive its value, feed it to the flash file.
BUT remember that this for ergonomy, not security, you will have to make sure your server side upload script is checking that too, because it’s easily bypassable as a security measure otherwise.
Thomas, regarding your question:
“Has anyone figured out how to send other form fields? If I want other info than the file, which the user can select – how can i parse this to the flash_upload file?”
i ‘ll send you by mail a how-to. I should update the doc after that!
Hi there!
What a very smooth upload form, nice work
But, (there is always a 'but'!), I really can't find how to send other form fields, is there a simple solution?
Thanks
Hi,
Love the script. Very smooth. However i get an 404 error: HTTP error: with CV.doc:error #404 in the input box after I have selected a doc file to upload? What could I have done wrong?
Thanks and keep up the good work.
pascal, please post a link to your page, otherwise i cannot help.
getting a HTTP 404 error (see at yourself):
http://www.tftpro.com/cgi-bin/jqUpload/test.php
picture:
http://www.tftpro.com/cgi-bin/jqUpload/404error.jpg
@RAMI7250: are you kidding me? On your test page you did not even include all the javascrpt files. Looks like i should explicate the installation procedure.
So, in your head file:
< script type="text/javascript" src="jquery-latest.pack.js">< script type="text/javascript" src="dependencies/swfobject.js">
< script type="text/javascript" src="jquery.jqUploader.js">
then you have to instantiate the jquploader. Simply putting the flash file won’t work !
check the demo page : http://www.pixeline.be/experiments/jqUploader/test.php
still getting the same error..
btw, i do not understand- what do i need to instantiate?
the real problem is there’s no simply installtion document that guide’s you..
i solved it:
i was download the test.php from:
http://www.pixeline.be/experiments/jqUploader/test.php
i was takin the code, put it in my test.php file and its working!
thanks!
great RAMI: on my side i’ll add an installation guide. I realize it’s not that straightforward for non jquery users
Installation guide added.
btw, there is a chance to include inside a multiple uploads?
Note for version 1. It may be for version 2, or i could post an example on how to do it, shouldn’t be too difficult. Donations are welcome, or click on banners so i feel motivated
ok, i will click on the banners just show me where to find them..
i would love to see that post..
there you go: http://www.pixeline.be/experiments/jqUploader/setup.php
ok, now where is your banners?
Great piece of code!
One thing I’d like to comment on though. In you installation instructions you write that one should add this javascript to the page:
$(“input[@type='file']“).jqUploader({
background: “FFFFDF”,
barColor: “64A9F6″,
allowedExt: “jpg|JPG|jpeg|JPEG”
});
I found, however that this would not work unless you wrapped that inside this:
$(document).ready(function(){
});
Maybe this is obvious for people who are used to jquery but I’ve never used it before so I didn’t find this out until I checked your test.php page (which I think you should add to the download package!).
Thanks for your scripts! it’ll come in handy, I’m sure!
Regards, Olle Mattsson
thanks Olle for the useful feedback, i’ll update the explanations accordingly.
Glad to be of help!
I dugg your page btw! Hope that doesn’t bother you
Hi,
Very smooth script. I tried with large files, above 30MB. After 100%, I needed to wait about two minutes to see actual uploaded file from my ftp client. If I test with huge file, I am sure I have to wait very long after 100% message appears. That problem always exists in all flash upload scripts. Let me know if you know any way to solve that. I don’t want my visitors think they stuck in 100%. They won’t know they have to wait after 100%.
Thanks.
hi Kevin, can i see your implementation ? I ‘ve never had such issue but never worked with such a large filesize.
Thanks, this is the test url.
http://66.90.118.214/~dreams/test/demo.html
Please test with use case 1. You can test with any file type less than 700MB. I edited my php.ini, so that I can upload large files. But I have to wait after 100% message appears. I did not edit the codes in fla file because I don’t know much about flash. In youtube.com, I don’t need to wait that much long with their player, I think. May be I am wrong. Let me know.
p.s After you upload the file, you can check that file in here->
http://66.90.118.214/~dreams/test/files/yourfile.jpg .
Thanks.
Dave, did you create a “file” folder? because even with javascript off, i was unable to upload… where is the url where the file gets uploaded?
also, can i see a phpinfo() of your server? i think you may have to return the document mime type, according to what i’ve found about error 406:
this is to inform you that i have set up a forum, which should be a more comfortable way to assist each other!
the forum is located here: http://www.pixeline.be/experiments/jqUploader/forum/
cheers,
Alex
Somebody knows more about the #406 error? Files get send till 100%, but then the error comes and the upload dir is still empty.
I have created a standard ‘files’ dir and chmodded it 757 and 777.
http://www.doitfromvids.com/demo.html
I have read it has something to do with a wrong header mime type. So flash is expecting a specific mime type after upload or something…
Hi,
A very nice plugin I must agree , however I was wondering if I should know of any other problems regarding its use in cakePHP?
Thanks
not that i know of, but it’s possible, due to the htaccess mods, you probably ‘ll have to tweak your script url. You may not be able to use the form action url, and have to provide a specific one. let us know how it works. please post in the forum (contact/help)
What’s the open source status of this script? (I also wrote you through jquery.com)
Thank you!
am getting an error “HTTP error : with filname.jpg: error#404″ can any one help me ..wer have i gone wrong ???
am getting an error “HTTP error : with filname.jpg: error#404″ can any one help me ..wer have i gone wrong ???