Deprecated: Assigning the return value of new by reference is deprecated in /home/bigfish/blogs/adam/wp-includes/cache.php on line 36

Deprecated: Assigning the return value of new by reference is deprecated in /home/bigfish/blogs/adam/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/bigfish/blogs/adam/wp-includes/theme.php on line 540
SWFUpload jQuery Plugin : Adam Royle

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...

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

220 Responses to “SWFUpload jQuery Plugin”

  1. Mike on June 14th, 2009 4:48 am

    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

  2. Agus on June 16th, 2009 2:46 pm

    nice script

  3. opus131 on June 16th, 2009 4:06 pm

    @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."

  4. Andy on June 17th, 2009 1:45 am

    @opus131: in that quote, Adobe shows its incompetency.

  5. Andy on June 17th, 2009 1:56 am

    @opus131: I propose a better workaround:

    "Workaround (if any): stop using Flash in your site. Use W3C standard and open technologies instead."

  6. opus131 on June 17th, 2009 2:23 am

    @Andy: I probably should have added tags.

  7. opus131 on June 17th, 2009 2:23 am

    sarcams tags, that is....

  8. fillyouin on June 17th, 2009 6:12 pm

    lets get back to the subject -
    nice script Adam, thanks very much for sharing.

  9. Gibi on June 20th, 2009 8:52 pm

    Thanks for script, why not correctly work in IE6?

  10. Adam on June 21st, 2009 11:41 am

    @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.

  11. Travis on July 3rd, 2009 5:10 am

    Thank you, this is great. I hope the dude at SWFUpload will consider adding this to his examples in the future.

  12. John on July 16th, 2009 8:51 am

    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.

  13. Adam on July 16th, 2009 9:38 am

    @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.

  14. SeanBlader on July 23rd, 2009 10:07 am

    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.

  15. Adam on July 23rd, 2009 10:26 am

    @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.

  16. Psihius on July 24th, 2009 9:59 pm

    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

  17. Roman on July 29th, 2009 5:38 am

    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?

  18. micle on July 29th, 2009 12:05 pm

    var stats = $('#swfupload-control').swfupload('getStats');
    alert(stats.successful_uploads);

    alert box undefined

    plz...

  19. Adam on July 29th, 2009 3:41 pm

    @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);

  20. Adam on July 29th, 2009 3:47 pm

    @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!

  21. Roman on August 11th, 2009 11:21 pm

    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.

  22. lemps on October 2nd, 2009 11:45 pm

    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');
    })

  23. Ron on October 10th, 2009 12:42 am

    Has anyone gotten this to work with SwfUpload in transparent window mode?

    (BTW, great plugin!)

  24. THink on October 11th, 2009 3:55 am

    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.

  25. Martin Sweeney on October 17th, 2009 3:39 am

    @lemps hero - saved me about 20 minutes of googling

  26. RPGonzo on October 23rd, 2009 7:21 am

    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

  27. Lorenzo on October 31st, 2009 2:09 am

    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?

  28. Mark McLaren on November 11th, 2009 8:14 pm

    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

  29. jason on November 24th, 2009 5:20 pm

    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

  30. jason on November 24th, 2009 5:22 pm

    Sorry let me rephrase. When the image uploads complete (no more queued images), I want to redirect to another page.

  31. Adam on November 24th, 2009 5:28 pm

    @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';
    }
    });

  32. jason on November 24th, 2009 5:44 pm

    @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

  33. confused uploader on November 24th, 2009 7:01 pm

    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.

  34. confused uploader on November 24th, 2009 7:03 pm

    Sorry for bumping, I meant server side :)

  35. jason on November 24th, 2009 7:24 pm

    @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.

  36. confused uploader on November 24th, 2009 7:42 pm

    @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?

  37. confused uploader on November 24th, 2009 7:43 pm

    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'];

  38. jason on November 25th, 2009 11:06 am

    Try adding this to the settings under $('.swfupload-control').swfupload({

    file_post_name: 'file',

  39. blackseosoft on November 27th, 2009 4:08 am

    Nice plugin thnx!

  40. David on December 2nd, 2009 3:29 am

    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.

  41. Adam on December 2nd, 2009 7:52 am

    @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

  42. sudhir on December 3rd, 2009 5:41 pm

    where can i file my uploaded files. plz help

  43. sudhir on December 3rd, 2009 5:42 pm

    where can i find my uploaded files. plz help

  44. Ken on December 4th, 2009 4:44 am

    I'd like to put this into a jQuery modal dialog. Is this possible?

    TIA

  45. Ken on December 4th, 2009 6:37 am

    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?

  46. Matt on December 7th, 2009 2:11 am

    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

  47. Adam on December 7th, 2009 9:39 am

    @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.

  48. Alberto B on December 14th, 2009 7:01 pm

    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

  49. Adam on December 14th, 2009 10:39 pm

    @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.

  50. Neeraj on December 27th, 2009 4:25 am

    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

  51. Zoran on December 28th, 2009 3:13 am

    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

  52. Adam on December 28th, 2009 8:39 am

    @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.

  53. Ian on January 8th, 2010 2:49 pm

    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?

  54. Nicholas Reed on January 9th, 2010 10:30 pm

    Looks excellent, do you think you could share a basic upload.php?

  55. Nicholas Reed on January 10th, 2010 4:37 pm

    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?

  56. Adam on January 10th, 2010 5:43 pm

    @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){...

  57. Nicholas Reed on February 1st, 2010 2:12 am

    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?

  58. Kristo on February 4th, 2010 1:46 am

    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.

  59. Adam on February 4th, 2010 6:56 am

    @Kristo: You can use something like this:

    $('.swfupload-control').swfupload('addPostParam', 'someKey', 'someValue');

  60. Nicholas Reed on February 4th, 2010 3:26 pm

    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');

    })

  61. Kristo Kiis on February 4th, 2010 11:36 pm

    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.

  62. rahil on February 24th, 2010 11:42 pm

    hi

    i have used your plugin it works fine in windows but it not upload image in any browser for Mac

    please help..

  63. Adam on February 25th, 2010 9:22 am

    @Rahil: I've not had any problems on the mac, hope your sort it out!

  64. MJ on March 1st, 2010 4:39 pm

    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

  65. SL on March 4th, 2010 6:32 pm

    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?

  66. Jimmy on March 12th, 2010 3:50 pm

    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");
    })

  67. Jimmy on March 12th, 2010 3:52 pm

    Sorry hit the space bar - with the above the event just doesn't get called as with Psihius previous post. Great plugin. JS

  68. Marius on March 28th, 2010 6:05 pm

    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

  69. manjushatv on April 21st, 2010 7:57 pm

    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",

  70. Roman on April 21st, 2010 10:08 pm

    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.

  71. Raghib suleman on April 23rd, 2010 6:07 pm

    thanks this is great

  72. johans on May 5th, 2010 6:26 pm

    @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.

  73. earthdesigner on May 11th, 2010 5:04 am

    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.

  74. alex on May 21st, 2010 5:28 am

    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.

  75. George on June 17th, 2010 3:04 am

    i try to use the php images upload class but its not working, can any one help me

  76. George on June 18th, 2010 2:25 am

    This code not working on Mac,can any one help me

  77. Vince on July 3rd, 2010 12:18 am

    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 :(

  78. Corey on August 10th, 2010 1:34 am

    Nice job, this swfupload plugin works great in my asp.net site.

  79. Erin on August 27th, 2010 5:30 am

    I appreciate that you have added the queue complete event, but why not go the extra mile and add the cancelQueue event?

  80. Adam on August 27th, 2010 8:06 am

    @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.

  81. jeroen on September 17th, 2010 2:48 am

    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?

  82. Valentin on September 21st, 2010 5:58 pm

    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 ...

  83. WT on October 8th, 2010 9:31 pm

    Какого же сука хуя нельзя добавить в конструктор SFWUpload такое:
    upload_progress_handler : uploadProgress,
    Пиздеееееццц.... сука, нахуя это было убирать?!

  84. xcyuzhen on December 16th, 2010 7:49 pm

    When an error occured,I want to cancel all the files that not uploaded.
    Would you like to help me ,thank you .

  85. Billy McCafferty on January 5th, 2011 7:42 am

    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/

  86. jackdive on February 23rd, 2011 7:34 pm

    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?

  87. johans on February 24th, 2011 5:25 am

    @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.

  88. Rob on March 13th, 2011 9:54 pm

    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?

  89. Adam on March 15th, 2011 10:54 am

    @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.

  90. iulian on March 29th, 2011 11:41 pm

    I was looking for a Flash-less solution, but for the moment will go with your script. Thanks for sharing.

  91. sat on April 1st, 2011 7:54 pm

    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 ?

  92. Diego Vieira on April 20th, 2011 3:05 am

    How do I get the filename from the upload script?
    Thank you

  93. Diego Vieira on April 20th, 2011 3:09 am
  94. Nick George on May 4th, 2011 5:51 am

    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

  95. Nick George on May 4th, 2011 5:53 am

    (I also changed the File Size Limit to something really high)

  96. Bob on May 20th, 2011 9:19 am

    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?

  97. Bob on May 20th, 2011 9:20 am

    I figured out number 2), but cannot work out the solution for number 1 :/

  98. johans on July 26th, 2011 2:15 pm

    @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.

  99. jason on August 9th, 2011 3:44 am

    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?

  100. Nikhila on August 29th, 2011 3:14 pm

    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...

  101. fede on August 31st, 2011 8:58 am

    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)...

  102. chandru on September 20th, 2011 4:24 pm

    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

  103. lynette.chen on September 22nd, 2011 3:19 pm

    the part of calling methods on the swfupload instances is cool!

  104. d on September 24th, 2011 9:33 pm

    Im using this plugin i dont see the upload button in IE9 it renders in the rest of the browsers..
    any solutions??

  105. wctube on October 11th, 2011 5:52 am

    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 !

  106. lig tv izle on October 21st, 2011 1:52 am

    the part of calling methods on the swfupload instances is cool

  107. Robert on January 13th, 2012 2:05 am

    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?

  108. movie on January 13th, 2012 7:39 pm

    thax.

  109. car on January 13th, 2012 7:40 pm

    Im using this plugin i dont see the upload button in IE9 it renders in the rest of the browsers..
    any solutions??

  110. Reuben on January 14th, 2012 8:22 pm

    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 ?

  111. Anthony Shaw on February 8th, 2012 11:19 am

    Curious, is there anyway to hook into the regular events when I create the settings? upload_complete_handler : function() { }

  112. Richard Housham on March 1st, 2012 11:11 pm

    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

  113. Tim on June 26th, 2012 10:28 pm

    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?

  114. Jassi on October 10th, 2012 7:56 pm

    Nice artical, this plugin works great in my asp.net site. Thanks

  115. Naren on November 20th, 2012 9:59 pm

    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

  116. Reed Corrick on December 3rd, 2012 10:11 am

    For people trying to do progress bars.

    The total file size is in the progress callback

    uploadProgress (event, file, bytesComplete, bytesTotal)

  117. Martijn on December 15th, 2012 1:02 am

    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?

  118. top brokers on January 30th, 2013 2:29 pm

    You'll need helpful information to start trading and you can get this
    info from a top brokers.

  119. husy on February 6th, 2013 8:01 am

    it converts ğ,ü,ş,ç characters to any other characters that i dont understand. so how to setup this problem??

  120. cinsel sohbet on March 20th, 2013 9:48 am

    Thanks loandin very god nice comment's yes o teadz

  121. sohbet on March 20th, 2013 9:52 am

    helpful information to start trading and you can get this
    info from a top

  122. sohbet odaları on March 20th, 2013 9:52 am

    asdasdhelpful information to start trading and you can get this
    info from a top

  123. sohbet on March 20th, 2013 9:52 am

    tion to start trading and you can get this
    info from a top

  124. chat sohbet on March 20th, 2013 9:54 am

    very gusper blogos

  125. chat on March 25th, 2013 6:26 am

    Thanks for posting this. Your blog is so interesting and very informative.Thanks sharing. Definitely a great piece of work Thanks for your work.

  126. sohbet odaları on March 25th, 2013 6:27 am

    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

  127. canlı sohbet on March 25th, 2013 6:27 am

    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.

  128. mynet sohbet on March 25th, 2013 6:28 am

    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.

  129. car diagnostic tool on April 1st, 2013 7:45 pm

    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

  130. Strateji oyunu on April 10th, 2013 11:48 pm

    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.

  131. Bedava on April 10th, 2013 11:49 pm

    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.

  132. online strateji oyunları on April 10th, 2013 11:51 pm

    it converts ğ,ü,ş,ç characters to any other characters that i dont understand. so how to setup this problem??

  133. sohbet on April 29th, 2013 9:12 am

    thanks editor

  134. Sohbet Odalari on May 1st, 2013 7:28 am

    Thank you admin.

  135. ev aletler on May 14th, 2013 11:41 pm

    thank u for share admin

  136. sohbet on May 16th, 2013 4:18 am

    Thanks you very nice.

  137. enanski on May 16th, 2013 5:36 pm

    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

  138. Quyen on May 17th, 2013 7:41 pm

    Thank you Adam, this plugin is exactly what I need :)

  139. enanski on May 17th, 2013 9:55 pm

    @Ouyen, could please assist on how to implement this? Im noob with jquery. Thanks

  140. Strateji oyunu on May 25th, 2013 10:06 am

    Thank you admin.

  141. Müzik Dinle on May 26th, 2013 5:34 am

    thank you nice share admin

  142. sohbet on May 26th, 2013 2:43 pm

    sohbetli.net

  143. chat on May 26th, 2013 2:43 pm

    turkish chat room

  144. chat on May 26th, 2013 2:43 pm

    turkishchat.net

  145. sohbet on May 26th, 2013 2:44 pm

    turkish chat global

  146. islami sohbet on May 26th, 2013 2:45 pm

    turkish islami chat room's!

  147. sohbet odaları on May 26th, 2013 10:29 pm

    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.

  148. mynet sohbet on May 26th, 2013 10:30 pm

    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

  149. muzik dinle on May 26th, 2013 10:30 pm

    Thank you Adam, this plugin is exactly what I need :)

  150. muhabbet on May 26th, 2013 10:31 pm

    this website perfect thanx admin

  151. Sohbet Et on May 27th, 2013 9:48 pm

    thank you nice

  152. seo on May 29th, 2013 6:00 am

    awesome blog. thank u for share kurumsal web site

  153. fara on June 21st, 2013 11:58 pm

    this plugin is grea8 man ! but why its not working in FFX ?

  154. sohbet on August 6th, 2013 7:58 pm

    thanks you kraldost

  155. sohbet on August 6th, 2013 7:58 pm

    Alayına İsyan Sohbet Odaları

  156. sohbet on August 6th, 2013 7:59 pm

    sohbetchatde Ankara Gücü

  157. demirdöküm kombi servisi on September 10th, 2013 7:44 pm

    Nike UK shoes they are trustable since they are your trustworthy backers. They often assistance their companion appropriately.

  158. vaillant kombi servisi on September 10th, 2013 7:45 pm

    really loved reading your blog. It was very well written and simple to understand. Unlike additional blogs I have read.

  159. vaillant kombi servisi on September 10th, 2013 7:45 pm

    I might not be the first to notice, but there is what seems to be a prefix error on the chart. It’s in the field with the green boxes, third from the top. It says “40mSv” but is graphically represented as 40μSv. No biggie, but might be something to correct.

  160. eca kombi servisi on September 10th, 2013 7:46 pm

    Not sure if you’re still checking it, but in case you are – think I’ve spotted an error. In the red boxes, “Approximate total dose at one station

  161. baymak kombi servisi on September 10th, 2013 7:48 pm

    I always learn something new from your post!Great article. I wish I could write so well and well……

  162. Nilima on September 30th, 2013 11:47 pm

    Is there a way we can get to know the resolution of the video file on selection of the file?

  163. Antalya Escort Bayan on October 13th, 2013 12:03 pm

    always learn something new from your post was very well written and simple to understand. Unlike additional blogs I have read.

  164. Antalya on November 22nd, 2013 8:13 am

    Is there a way we can get to know the resolution of the video file on selection of the file?

  165. antalya Escort on November 24th, 2013 7:44 pm

    Not sure if you’re still checking it, but in case you are – think I’ve spotted an error. In the red boxes, “Approximate total dose at one station

  166. Thomas Vinterberg on December 14th, 2013 1:31 pm

    I'm trying to access some variables behind a Jquery timer plugin. I'm pretty new to Javascript could someone explain to me how it works?

  167. Antalya tabela on January 19th, 2014 9:46 pm

    always learn something new from your post was very well written and simple to understand. Unlike additional blogs I have read.

  168. Cornélio José Wiedemann on January 29th, 2014 1:45 am

    amazing code boy

  169. Balaji on March 15th, 2014 4:02 pm

    hai admin,

    i need video file upload with preview options. any jquery plugin available please mail me :)

  170. Sagliklibirey on March 28th, 2014 8:23 am

    thanks for post. See you

Leave a Reply