SWFUpload jQuery Plugin
When I first stumbled across SWFUpload about two years ago I was impressed by how easy it was to implement. However, their example code has always bugged me as being rather crap, having to assign a separate global event handler for each event, and the lack of multiple handlers for a single event.
Using jQuery (the solution to all things painful), I've written a plugin to create a real event dispatcher for SWFUpload without modifying the SWFUpload core!
The SWFUpload jQuery Plugin
This plugin makes working with SWFUpload easier!
Get straight to the source code at my SWFUpload jQuery Plugin repository on GitHub.
And the benefits are...
- Native jQuery event handling using .bind()
- Ability to assign multiple callbacks per event
- Makes multiple SWFUpload instances on a single page easier to manage
- Ability to completely separate SWFUpload object from UI code (callbacks)
- Assign event handlers before SWFUpload instance is even created!
- No global functions or variables needed!
- A nice, chainable solution!
Live Examples
Here are some live examples you can pull apart. Although the UI is not pretty, it demonstrates how you listen to events, and from there you can create whatever UI you want.
Although these examples upload to a PHP script on my server, the uploaded files are not saved.
How do I use it?
If you know how to use SWFUpload already, the following should be fairly easy to consume.
$(function(){
$('.swfupload-control').swfupload({
// Backend Settings
upload_url: "../upload.php", // Relative to the SWF file (or you can use absolute paths)
// File Upload Settings
file_size_limit : "102400", // 100MB
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "0",
// Button Settings
button_image_url : "../multiinstancedemo/XPButtonUploadText_61x22.png", // Relative to the SWF file
button_placeholder_id : "spanButtonPlaceholder",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "../swfupload/swfupload.swf"
});
// assign our event handlers
$('.swfupload-control')
.bind('fileQueued', function(event, file){
// start the upload once a file is queued
$(this).swfupload('startUpload');
})
.bind('uploadComplete', function(event, file){
alert('Upload completed - '+file.name+'!');
// start the upload (if more queued) once an upload is complete
$(this).swfupload('startUpload');
});
});
<div class="swfupload-control">
<span id="spanButtonPlaceholder"></span>
</div>
How does it work?
Rather than creating a SWFUpload instance and assigning handlers directly, it associates the SWFUpload instance with an element in the DOM, and all events handlers are bound to that DOM element.
Calling methods on the SWFUpload instance
The following code will execute the startUpload method on all SWFUpload instances that exist within the selector .your-swfupload-control.
$('.your-swfupload-control').swfupload('startUpload');
Getting properties on the SWFUpload instance
Sometimes you just need to get at the SWFUpload instance... easy!
var swfu = $.swfupload.getInstance('.some-selector-for-your-control');
alert(swfu.settings.custom_settings.your_custom_setting);
Additional event handlers
Due to the way SWFUpload works, all event names must be defined before the SWFUpload instance is created. This means if you are using any plugins that define additional events, you'll need to add them to the handler list before the SWFUpload instance is created.
$.swfupload.additionalHandlers('some_plugin_handler');
The source code
If you missed it the first time, you can download all the source code including all support files and example files from my SWFUpload jQuery Plugin repository on GitHub.
Enjoy!
Comments
188 Responses to “SWFUpload jQuery Plugin”
Leave a Reply
General Statement
When implementing SWFUpload or other flash-enabled upload widgets, please provide graceful degradation for linux users:
http://bugs.adobe.com/jira/browse/FP-377
nice script
@Mike: I like the Workaround adobe suggests.
"Workaround (if any): Use Mac OS or Windows OS to perform uploads, where the exact same SWF works fine."
@opus131: in that quote, Adobe shows its incompetency.
@opus131: I propose a better workaround:
"Workaround (if any): stop using Flash in your site. Use W3C standard and open technologies instead."
@Andy: I probably should have added tags.
sarcams tags, that is....
lets get back to the subject -
nice script Adam, thanks very much for sharing.
Thanks for script, why not correctly work in IE6?
@Gibi: The plugin works fine in IE6 - however you must have flash player 9 or higher installed. By default SWFUpload doesn't do flash version detection. There is a plugin to allow this (http://code.google.com/p/swfupload/source/browse/swfupload/trunk/core/plugins/swfupload.swfobject.js) although you'll need to add the additional event handlers to listen to the new events defined in that script.
Thank you, this is great. I hope the dude at SWFUpload will consider adding this to his examples in the future.
Does this work with jQuery 1.2.6? I can't upgrade to the latest 1.3.
I keep getting a type mismatch error on line 29 and I was wondering if it was because of jQuery v1.2.6.
@John: I didn't realise it when I wrote it, but it uses the new jQuery.Event object for triggering custom events and returning values back to SWFUpload. Unfortunately I don't have time at the moment to see if I can make it compatible with 1.2.6, but if you (or someone else) manage to get it working then I am happy to integrate your changes into the source.
I'm confused why is this useful? Is it to change the style of the upload button? You could do that with CSS if you knew what you were doing. I've done upload buttons that are images. It'd be pretty easy to set them as rollovers using sprites, and using Ajax with the right server code, you could do upload monitoring with a progress bar too without Flash. Hence my confusion with using Flash.
If you wanted to do something interesting see if you can download someone's Windows Registry by just having them visit the site. You can't do that with CSS/Ajax.
@SeanBlader: Your questions are really targeted towards SWFUpload itself, rather than my jquery plugin. However, a few reasons people might use flash to upload...
- select and upload multiple files in a queue, selecting what filetypes to be displayed in the file dialog, and having access to file names and sizes *before* uploading
- display a progress bar independent of server-side code (PHP does not give upload status on file uploads)
- "ajax" does not support file uploads
Customising the look of the upload button is supplementary to the above features.
Hi!
I'm trying to use your plugin with swfobject swfupload plugin.
$.swfupload.additionalHandlers('swfupload_loaded_handler');
$('#swfupload-control').swfupload({
upload_url: "/gallery/upload.html",
file_size_limit : "10240",
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "0",
flash_url : "/js/swfupload/swfupload.swf",
button_image_url : '/js/swfupload/swfbuttin.png',
button_width : 61,
button_height : 22,
button_placeholder_id : 'test'
})
.bind('swfupload_loaded_handler', function(event){
alert('WTF>!');
});
It just doesn't fire plugin event. I have latest SWFUpload
Hi, just found this plug in. Seems almost exactly like what I was looking for. I have a pretty big form built. In the middle of it there is an option to upload a file.
The way I'd like it to work, is when the file is sent to the server, I want the server to rename it as the DatabaseID.extension and save it in the proper place. Then to return the URL back to the client. So that the User can click the link to see the file. Can that be done? Is there some sort of call back function that can display an error or if successful then somehow replace the text field with the link?
var stats = $('#swfupload-control').swfupload('getStats');
alert(stats.successful_uploads);
alert box undefined
plz...
@micle: Because the swfupload method is chainable, the commands sent as the first parameter don't return a single result. You can however do it like this:
var stats = $.swfupload.getInstance('#swfupload-control').getStats();
alert(stats.successful_uploads);
@Roman: Yes, certainly it can be done... as for how you actually do that on the server, that is up to you. In my php upload script I return an xml string of the uploaded file data, which is returned as the third param in the uploadSuccess event. I then parse that XML, and grab the details and insert what I need into the form. Good luck!
Hi Adam,
Thanks for the response. I was able to get this to work very well for a form with two separate file fields. I was able to even automatically delete an existing file if a new one was uploaded.
But, now I need to do this in a different form that should allow uploading and multiple files at the same time for one field. Not quite sure how to approach that.
If you need to add some other parameters to be posted to the upload.php add something similar to the fileQueued event.
.bind('fileQueued', function(event, file){
// start the upload once a file is queued
var param = {'product' : $("#product").val()};
$(this).swfupload('setPostParams', param);
$(this).swfupload('startUpload');
})
Has anyone gotten this to work with SwfUpload in transparent window mode?
(BTW, great plugin!)
Im trying to get this to grab a variable from the URL. I.E.: http://www.webby.com?id=78234
How do I set it up to grab that id? The way I have it set up so far is that when it uploads, it sends some data to a database, but I don't know how to grab the id from the URL, and use $_GET in the php file. it doesn't work..... Do I have to use the example posted above for adding extra parameters? if so, how? I'm new to Javascript..... sorry guys.
@lemps hero - saved me about 20 minutes of googling
Anyone else seeing Firebug catch errors with the SWFUpload.prototype.cleanUp on page load?
Every load i see a movieElement is undefined, from the comments in the source its supposed to be a IE only function so using the support feature ( JQuery 1.3.x ) i simply just checked if something that returns false across IE 6-8 is true than return ...
// only returns false in IE 6-8 as far as i can see
if ($.support.leadingWhitespace == true) { return; }
but this is a temporary fix, for if i find a better way of am doing something wrong in the first place will change later
I'm a bit confused here. I'm not new at coding but new at Flash and how to refer to it. I'm working in ASP, if it could helps.
The script works well but when i try to save it in a fast way i think i could improve it but i don't have the right idea, i fear.
I changed this line:
upload_url: "upload.asp",
In the file upload.asp there's this piece of code to retrieve the content:
RecByte = Request.TotalBytes
if RecByte > 0 then
Data = Request.BinaryRead(RecByte)
but working with binary data in ASP is best done with ADODB.Stream so, in conclusion, i removed the COM i used to upload files to use another object to save it to the disk.
Is there something am i missing? Does SWFUpload is capable to save directly to the disk?
Thanks Adam,
This is fantastic! I re-wrote the SWFUPload application demo to use your plugin and it work's great. (Although I personally use Java Servlets rather than PHP!).
Below is a link to a re-written "index.php" for the application demo that I produced for anyone who might find this useful (includes a jQuery re-working of the FileProgress Object).
http://docs.google.com/Doc?docid=0AT35gd52_6HRZGhodGJiNDJfNWN4ZzRkNmNr&hl=en
Thanks again,
Mark
would it be possible to redirect to another page when there are no more downloads? I have been googling and looking through the code and using firebug, but so far no luck
Sorry let me rephrase. When the image uploads complete (no more queued images), I want to redirect to another page.
@jason: Yes, just listen to the uploadComplete event like this...
$('.magicUpload-control').bind('uploadComplete', function(event, file){
var stats = $.swfupload.getInstance(this).getStats();
console.debug(stats);
if (stats.files_queued == 0) {
window.location = 'otherpage.htm';
}
});
@Adam: Thanks for your quick response. I actually came up with this a few minutes after posting:
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
var swfu = $.swfupload.getInstance('#swfupload-control');
if(swfu.getStats().files_queued == 0){
window.location.href = 'otherpage.htm';
}
})
The upload complete handler was already there, but Is there a reason to use your method rather than mine? Thanks
Is there a way to pass the files to some otherpage.php file that can save them client side? If I'm not mistaken, the files are uploaded to the server's temp folder.
Sorry for bumping, I meant server side :)
@confused uploader: in the example above
upload_url: "../upload.php", // Relative to the SWF file (or you can use absolute paths)
it calls the upload.php via ajax which moves the file from the temp folder to a folder you specify and then delete the tmp file.
@jason: Have you tried it?
doesn't work because the key 'file' in $_FILES does not exist. Can you provide some code that works, please?
Sorry, my code dissapeared from the post. It was:
move_uploaded_file($_FILES['file']['tmp_name'],'upload/' . $_FILES['file']['name']);
echo 'Stored in: ' . 'upload/' . $_FILES['file']['name'];
Try adding this to the settings under $('.swfupload-control').swfupload({
file_post_name: 'file',
Nice plugin thnx!
Is there a way to add something to the upload.php file to create thumbnails? I've tried many different ways of doing this, but nothing works.
@David: Yes, there are ways to do this, however that is out of scope for this tutorial.
SWFUpload has an example as part of their "Application Demo"- http://demo.swfupload.org/v220/index.htm
where can i file my uploaded files. plz help
where can i find my uploaded files. plz help
I'd like to put this into a jQuery modal dialog. Is this possible?
TIA
Nevermind, I had an error in my code. The modal dialog works fine. Now I have another question... how can I change the upload url on the fly?
Hi Adam,
wonderful plugin! :-) I have one question: How do I destroy a swfupload instance on upload complete? I've tried $.swfupload.getInstance('.swfupload-control').destroy(); Doesn't work. :-(
Can you help me?
Greets
@Matt: It should work fine. Here is some example code I've ripped from a project (I was using multiple swfupload instances). Which is almost the same as what you've got.
$('.swfupload-control').each(function(){
var swfu = $.swfupload.getInstance(this);
swfu.destroy();
});
@Ken: I don't think you can change the upload URL on the fly. You would have to destroy and re-create the swfupload instance.
Hi, I can't make your plugin work with the last version of SWFUpload (v2.2.0).
Has anyone else tried to solve the issue?
Regards
Alberto
@Alberto: The plugin should work fine with 2.2.0, you can see in the github repository that is the version I am using for my examples.
Hi Adam,
Your Plugin is great.
Can you explain to us, How can we auto generate the thumbnail of the uploaded SWF File.
Thanks
Neeraj
Hi Adam, thanks for sharing this as first.
Is there any way to track down what is sent to the server side? Cause the plugin works great but on my server side i cannot see anything working.
Thanks again
@Zoran: If you are using PHP, the upload file should be in your $_FILES['Filedata'] array.
@Zoran & @Neeraj: My plugin is just a wrapper for SWFUpload, which comes with full examples on how to receive uploads, make thumbnails, etc, so I suggest you look at the SWFUpload documentation for the server-side code.
Need a little help.
Once a file has successfully uploaded I save the details in a database to retrieve later on.
Is there a way to pass an ID back from my upload.php to the SWF instance?
Can I echo an ID at the end of the upload.php and grab it some how in one of the binders?
Looks excellent, do you think you could share a basic upload.php?
Can you help me with adding a custom post parameter, I need to read to in upload.php (cms/handle_forms/upload_images) to decide which folder to put the images into.
$().ready(function() {
$('#swfupload-control').swfupload({
upload_url: '" . base_url() . "index.php/cms/handle_forms/upload_images',
file_post_name: 'uploadfile',
file_size_limit : '10240',
file_types : '*.*',
file_types_description : 'All Files',
file_upload_limit : '0',
flash_url : '" . base_url() . "js/swfupload/swfupload.swf',
button_image_url : '" . base_url() . "js/swfupload/image.png',
button_width : 61,
button_height : 22,
button_placeholder : $('#button')[0],
debug: true,
custom_settings : {something : 'here'}
})
.bind('swfuploadLoaded', function(event){
$('#log').append('Loaded');
})
.bind('fileQueued', function(event, file){
$('#log').append('File queued - '+file.name+'');
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
$('#log').append('File queue error - '+message+'');
})
.bind('fileDialogStart', function(event){
$('#log').append('File dialog start');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
$('#log').append('File dialog complete');
})
.bind('uploadStart', function(event, file){
$('#log').append('Upload start - '+file.name+'');
})
.bind('uploadProgress', function(event, file, bytesLoaded){
$('#log').append('Upload progress - '+bytesLoaded+'');
})
.bind('uploadSuccess', function(event, file, serverData){
$('#log').append('Upload success - '+file.name+'');
})
.bind('uploadComplete', function(event, file){
$('#log').append('Upload complete - '+file.name+'');
// upload has completed, lets try the next one in the queue
$(this).swfupload('startUpload');
})
.bind('uploadError', function(event, file, errorCode, message){
$('#log').append('Upload error - '+message+'');
});
$.swfupload.getInstance('#swfupload-control').addPostParam('swf_folder', '" . $swf_folder . "');
Everything works fine - except I can't read the post param $swf_folder in upload.php.
What do you think?
@Nicholas: I don't see where you are defining your $swf_folder variable - is it in php? If so you might want to wrap it in some php tags. You can also pass it through as a javascript object in the swfupload call.
eg.
$('#swfupload-control').swfupload({
upload_url: '" . base_url() . "index.php/cms/handle_forms/upload_images',
post_params: < ?php echo json_encode($post_params) ?>,
...
});
@Ian: You can return text from upload.php by echo()ing the values out, and it will be passed to the third param in the uploadSuccess callback.
eg.
from Nicholas' code above - .bind('uploadSuccess', function(event, file, serverData){...
Hello Adam, thank you for your reply, I foolishly thought I'd receive an email notification when you replied so I didn't think to come back and look. You replied on the same day so I feel pretty bad about it. Thanks heaps.
I've been building a small cms with CodeIgniter and have been trying to ( going well! ) get swfupload to work with your jquery plugin.
This plugin is a SUCH a big help, because I'm also using tinyMCE editor's jquery launcher and so everything can be done using jquery!
I was wondering if you had any ideas for using swfupload/jquery with sessions in codeigniter.
I'm thinking if I can't get sessions to work with it correctly I might pass an md5 password as a POST param with each upload, or something similiar.
What do you think?
Hi,
is there possibility to change post parameters during upload, dynamically..
There is addPostParam method, i found out, but how do you implement this in your jquery version ?
Tnx.
@Kristo: You can use something like this:
$('.swfupload-control').swfupload('addPostParam', 'someKey', 'someValue');
I had trouble using $('.swfupload-control').swfupload('addPostParam', 'someKey', 'someValue'); I could never access the param in upload.php, so I went it like this. Sorry for posting this unnecessarily, but just incase it helps someone.
.bind('fileQueued', function(event, file){
$('#log').append('File queued - '+file.name+'');
var param = {'swf_folder' : '" . $swf_folder . "' };
$(this).swfupload('setPostParams', param);
// start the upload since it's queued
$(this).swfupload('startUpload');
})
Hi,
OK, i found another problem with it...
i got this issue with this uploader, i dont know why, but firefox isnt sending session info... in IE everything works, but in firefox this upload gives me login window as response. I use Zend Framework...
Kristo.
hi
i have used your plugin it works fine in windows but it not upload image in any browser for Mac
please help..
@Rahil: I've not had any problems on the mac, hope your sort it out!
Hi, I have problem with you jquery plugin. I'm using jq 1.4 . Everything is all right untill I start uploading the where
.bind('fileQueued', function(event, file){
// start the upload once a file is queued
$(this).swfupload('startUpload');
})
I get error from firebug $(this).swfupload is not a function
Nice plugin. I have one problem though and I am hoping you can lead me in the right direction.
I am using the swfupload in a lightbox (I am using facebox actually) which loads the page containing the upload form. Therefore, the "swfupload-control" is not available initially. Is there any way I can get it to work in my situation?
Also trying to use the SwfObject plugin to detect flash and gracefully fail.
// Set the additional handlers $.swfupload.additionalHandlers('swfupload_pre_load_handler', 'swfupload_load_failed_handler');
$('#swfupload-control').swfupload({
upload_url: "",
post_params: ,
....
})
.bind('swfupload_pre_load_handler', function(event, file) {
// Need this to add a standard input since graceful degradation not available in 2.2
alert("swfUploadPreLoad");
})
Sorry hit the space bar - with the above the event just doesn't get called as with Psihius previous post. Great plugin. JS
Please help me with post param:
index.html
...
file_post_name: 'uploadfile',
...
debug: false})
.bind('fileQueued', function(event, file){
var param = {'product' : $("#product").val()};
$(this).swfupload('setPostParams', param);
(in this place alert($("#product").val()); show right value)
var listitem=''+
...
...
upload-file.php
...
$kategorija=$_FILES['uploadfile']['product']; ???
$kategorija=$_FILES['product']; ???
$kategorija=$_POST['product']; ???
i try more variants... no result... files uploads fine, but no post params
Hi All,
i am new to jquery.frankly speaking don't know anything. i want to implement this plugin for a project. what i want is that i don't want to HARDCODE file size, no of files allowed and applications.
i have a table to store all these 3 values and each time when a user trying to upload it should check table and do accordingly.
how to assign a variable name to function parametres? i am facing problem there.
whether we use single quotes, double quotes or something else?
please help me...
mtv
$(function(){
$('.swfupload-control').swfupload({
// Backend Settings
upload_url: "../upload.php", // Relative to the SWF file (or you can use absolute paths)
// File Upload Settings
file_size_limit : "102400", // 100MB
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "0",
Finally a question I can actually answer I think.
Assuming you're using PHP for your website, since your upload file is .php, you can simply put the results of your database query inside your jQuery block of code, in essence making the jQuery code itself dynamic and generate on the fly. I do it all the time. When you go to view source on that page you'll see all your file types and file sizes, etc.
thanks this is great
@manjushatv
Get your instance as shown above:
var swfu = $.swfupload.getInstance('.some-selector-for-your-control');
Then use:
swfu.setPostParams({...your post param name:value pairs here...});
to set the post parameters dynamically. As see other SWFUpload methods which can be used in the same way.
Hi Adam, great plug-in. Your effort is much appreciated.
I was trying to add a "minimum size limit" and I was curious if there's a simple way to achieve this (since I'm not comfortable with javascript or php).
Basically I want to add another alert if the file is smaller than 500k, but I don't how should I approach this.
Thanks and good luck.
Great plugin, implemented it into my current project, and everything works great.
The only problem I could not solve is refreshing page after _all_ uploads are completed. This may sound wierd, but the page which I upload from also shows all files, so it is a bit confusing when files get uploaded, and user can not see them in the filelist.
Thank you in advance.
i try to use the php images upload class but its not working, can any one help me
This code not working on Mac,can any one help me
Hi..I've a problem..not shure if with this plugin or the SWFUPLOAD(original). I just want this: when I click on "cancelButton" the image disapperar, the user can click on "uploadButton" and so upload another image.I've done in this way:
.bind('uploadComplete', function(){
$('#cancelButton').show(); // was hide before
$('#cancelButton').click(function() {
var swfu= $.swfupload.getInstance('#swfuploadcontrol');
var stats = swfu.getStats(); stats.successful_upload=0;
swfu.setStats(stats);
});
});
I've set the limit to '1' of max number of image can upload.After the first upload and click on 'cancelButton' the stats.successful_upload is always '1', so the user can't upload no new image.
Help please :(
Nice job, this swfupload plugin works great in my asp.net site.
I appreciate that you have added the queue complete event, but why not go the extra mile and add the cancelQueue event?
@Erin: At the time I wrote the code there was no cancelQueue event! But the code is on Github so feel free to fork it and improve it.
hi there, I implemented this and added a jquery ui progress bar. I want to calculate the percentage of the upload progress in
.bind('uploadProgress', function(event, file, bytesLoaded){
})
but, I need to know the filesize of the upload file. Otherwise I do not know how far bytesLoaded is compared to the total.
So, how can I get the filesize of the file that's being uploaded?
Can anybody help me??? It was working before, but today its not working ... I have the error: SWF DEBUG: Event: uploadError : IO Error : File ID: SWFUpload_0_0. IO Error: Error #2038
and also Ill go there: http://blogs.bigfish.tv/adam/examples/swfupload-jquery-plugin/examples/01%20-%20single%20uploader.html and I have the same error ...
Какого же сука хуя нельзя добавить в конструктор SFWUpload такое:
upload_progress_handler : uploadProgress,
Пиздеееееццц.... сука, нахуя это было убирать?!
When an error occured,I want to cancel all the files that not uploaded.
Would you like to help me ,thank you .
Is this compatible with jQuery 1.4? I'm getting a ".swfupload is not a function" error when I try to use it following the example at http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/
Is it possible to upload dynamically generated content?
I have a Div tag with some user generated content and I want to upload this to server. Is this possible with the plugin?
@jachdiv - probably not what you want. You would need to place the div tag/content in a text/html file and upload that. Assuming your server knew what to do with the file it would work. However you'd need to create/edit the file in a separate application. All you probably need is a form with textarea/field where you edit/enter the div tag and content and post to your server. The server of course needs code to handle the posted data.
Since upgrading to jQuery 1.5.1, this line no longer works, swfu returns undefined.
var swfu = $.swfupload.getInstance('.some-selector-for-your-control');
Seems like I can't get the swfupload instance anymore, any ideas?
@Rob: I'm using jQuery 1.5.1 and it's working fine for me. Is something else you might have changed? If you can't figure it out create a small example of your code and I'll try to help you out.
I was looking for a Flash-less solution, but for the moment will go with your script. Thanks for sharing.
Hi,
I am trying out your code and works beautifully, but am facing few problems , UI is updated when onSuccess event comes, but many times this event is not getting fired , directly onComplete gets called because of which UI is stuck at uploading ! Went thru docs and came to know that there is a bug in Flash because of which ack is not recieved from server. But they also mention that there is some timeout after which it is assumed that it is uploaded. (assume_success_timeout) , Right now I am updating UI in the event handler of uploadComplete rather than uploadSuccess. Does jquey-swfupload plugin handles this situation ? or Am I trying to solve the problem at wrong place ?
How do I get the filename from the upload script?
Thank you
Nevermind, just found it:
http://stackoverflow.com/questions/3562152/swfupload-asp-net-return-new-filename-of-uploaded-files
Looks like just what I need. But I'm having trouble uploading anything larger than ~40MB- I'm getting Upload error - 404. I have my php.ini settings very high- 2G for both post_max_size and upload_max_filesize, and it's not an execution timeout thing... any ideas?
Thanks,
Nick
(I also changed the File Size Limit to something really high)
Two things
1) When I center the button/progress area, the progress bar starts in the middle and spans both sides until complete. This is awkward, can I would like it to proceed left to right. How do I do this?
2) How can I add a “stop upload” for uploads that are in progress?
I figured out number 2), but cannot work out the solution for number 1 :/
@Nick George - I've tried a lot of uploaders and for very large files the best is the java applet jFileUpload (http://www.jfileupload.com/). I use it with the compression and chunking options and then reassemble and uncompress the file on the server.
Unfortunate having to resort to a java applet but it works reliably and the support is very good.
Is there a way to retrieve information from the upload.php file? For instance, in the upload.php file I will define the path for the uploaded file. Is there a way to send that back to the page?
I have problem specifying the upload_url, which would point to the Action that would process the upload.
I used both absolute and different relative path to point to the right action, but it wouldn't find it:
e.g.:
upload_url = /path/to/control/action or
upload_url = http://www.sitename.com/control/action
etc...
What ever way I specify my action never gets invoked.
In none zend framework you would say:
upload_url = upload.php
and it would work correctly...
Please, how do I avoid overwriting of uploaded files? At least a way to echo an error message like "File already exist. Please rename file(s)" and NOT overwrite file(s)...
hi adam i have different scenario , i have to show the uploaded image and i have to validate the width and height of the image let say eg.512x512 if the user gives big images eg.1024x910 i have to enable crop using Jcrop can you please suggest any solutions thanks in advance
the part of calling methods on the swfupload instances is cool!
Im using this plugin i dont see the upload button in IE9 it renders in the rest of the browsers..
any solutions??
I am trying out your code and works beautifully, but am facing few problems , UI is updated when onSuccess event comes, but many times this event is not getting fired , directly onComplete gets called because of which UI is stuck at uploading !
the part of calling methods on the swfupload instances is cool
Hi,
This is a nice tool. Is there a way of telling the uploader where in the file system you want the uploaded files to be stored, handling overwriting and returning information about the file(s) uploaded?
thax.
Im using this plugin i dont see the upload button in IE9 it renders in the rest of the browsers..
any solutions??
I need to alert out the "post parameters",for debugging purposes. I've defined a function in swfupload.js :
SWFUpload.prototype.alertAllPostParam = function () {
for(key in this.settings.post_params)
alert(this.settings.post_params[key]);
};
I have a button in my HTML markup :
Ping Me!
What should my script be so that when the button "Ping" is clicked, the function "alertAllPostParam" is called ?
Curious, is there anyway to hook into the regular events when I create the settings? upload_complete_handler : function() { }
Hi yeah same question as Anthony, I have the orginal swf uploader working but I need to use addPostParam at present it doesn't want to work in firefox and I read about yours and it seemed like it would solve my problem but I want it to work just the same and using the same handlers how do I do this?
Thanks
Richard
File seems to be missing the first character from its name when moved from the temp folder to the uploads folder... Anyone else have that problem?
Nice artical, this plugin works great in my asp.net site. Thanks
How can i implement this in codeigniter.When i give the url as I do in general codeigniter(eg: http://mysite/uploadflash) it throws a 302 error in DEBUG log. OR can it be other problems
For people trying to do progress bars.
The total file size is in the progress callback
uploadProgress (event, file, bytesComplete, bytesTotal)
I try to hide the upload button and display a progress bar once a file is selected. This works fine in Firefox. But in Chrome, the uploading process hangs, once I add a css class to the div container in which the button placeholder sits.
The button placeholder:
The uploadStart bind:
.bind('uploadStart', function(event, file){
$('#log').append('Upload start - '+file.name+'');
$('#upload-button').addClass('hidden');
})
This will hide the div container, but stops the upload process in Chrome. In Firefox the div container gets hidden and the upload process just continue.
It looks like all jquery updates on the button placeholder or parent div container, during uploading, stops the uploading process in Google Chrome.
Is there a solution for this?
You'll need helpful information to start trading and you can get this
info from a top brokers.
it converts ğ,ü,ş,ç characters to any other characters that i dont understand. so how to setup this problem??
Thanks loandin very god nice comment's yes o teadz
helpful information to start trading and you can get this
info from a top
asdasdhelpful information to start trading and you can get this
info from a top
tion to start trading and you can get this
info from a top
very gusper blogos
Thanks for posting this. Your blog is so interesting and very informative.Thanks sharing. Definitely a great piece of work Thanks for your work.
Wonderful post. I am searching awesome news and idea. What I have found from your site, it is actually highly content. You have spent long time for this post
Thanks for posting this article. I really appreciate posts, which might be of very useful. I am also building new sites all of the time and getting good results by using natural methods. I look forward to future updates. Once again thanks. Keep smiling.
I saw you visit my blog, thank you, I will publish my blog link to the webpage. In fact I think this site needs to consider many.
Please let me know if youre looking for a author for your weblog. You have some really great articles and I feel I would be a good asset. If you ever want to take some of the load off, Id love to write some material for your blog in exchange for a link back to mine. Please send me an email if interested. Kudos! super vcads
Health has been a beautiful work of your hands. However, I was wondering Can we use them to turn the game website with video or image, or just use it. Because the video is not my intention, but my server will not install strategy games playable online .. Ready to use does just fine.
Thanks for posting this article. I really appreciate posts, which might be of very useful. I am also building a new sites all of the time and getting good results by using natural method. I look forward to future update. Once again thanks. Keep smiling.
it converts ğ,ü,ş,ç characters to any other characters that i dont understand. so how to setup this problem??
thanks editor
Thank you admin.
thank u for share admin
Thanks you very nice.
Hi Adam,
I'm noob/new to jquery. Though the document is readable, I was not able to implement it successfully. There is no button displaying in my page. Could you please send me another documentation on how to implement it. Especially the upload_url part since im using spring. Thanks
Thank you Adam, this plugin is exactly what I need :)
@Ouyen, could please assist on how to implement this? Im noob with jquery. Thanks