How does SWFUpload work?

Question

My code below works, except for the upload part. So far I am able to load the script without any problems, and the file dialogue opens when the a user clicks the upload button.

However, what I am trying to do is to assign the file to a form which contains other text input and text-area elements.

Basically I am trying to do this:

1. User fills the form up with values (i.e. filling up text input, text-area fields)
2. User selects a file using SWFUpload
3. User submits the form

Is it possible to hook the file to a file input element on the form so when the form is submitted manually, all the values are sent on one go?

As far as I know, SWFUpload is used to submit the file automatically on the background on its own... Can this be done manually instead and on one form?

     $('.swfupload-control').swfupload({

        // 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 : "/images/upload_song.gif", // Relative to the SWF file
        button_placeholder_id : "spanButtonPlaceholder",
        button_width: 186,
        button_height: 32,

        // Flash Settings
        flash_url : "/javascripts/swfupload/swfupload.swf"

    });


    $('.swfupload-control')
        .bind('swfuploadLoaded', function(event){
            $('#log').append('<li>Loaded</li>');
        })
        .bind('fileQueued', function(event, file){
            $('#log').append('<li>File queued - '+file.name+'</li>');

          //$('#song_attachment').val(file);

          $('#update-media').parents('li').find('p').remove();
          $('#update-media').parents('li').append('<p>'+(file.name.length >= 45 ? file.name.substr(0, 45) + '...' : file.name)+'</p>');
            // start the upload since it's queued
            //$(this).swfupload('startUpload');
        })
        .bind('fileQueueError', function(event, file, errorCode, message){
            $('#log').append('<li>File queue error - '+message+'</li>');
        })
        .bind('fileDialogStart', function(event){
            $('#log').append('<li>File dialog start</li>');
        })
        .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
            $('#log').append('<li>File dialog complete</li>');
        })
        .bind('uploadStart', function(event, file){
            $('#log').append('<li>Upload start - '+file.name+'</li>');
        })
        .bind('uploadProgress', function(event, file, bytesLoaded){
            $('#log').append('<li>Upload progress - '+bytesLoaded+'</li>');
        })
        .bind('uploadSuccess', function(event, file, serverData){
            $('#log').append('<li>Upload success - '+file.name+'</li>');
        })
        .bind('uploadComplete', function(event, file){
            $('#log').append('<li>Upload complete - '+file.name+'</li>');
            // upload has completed, lets try the next one in the queue
            $(this).swfupload('startUpload');
        })
        .bind('uploadError', function(event, file, errorCode, message){
            $('#log').append('<li>Upload error - '+message+'</li>');
        });

Answer 1

Sorry, I don't know SWF Upload and am ready to delete this answer if irrelevant... BUT:

I made two apps here: https://github.com/apneadiving/Pic-upload---Crop-in-Ajax

One with Uploadify and one with jQuery-File-Upload.

They both answer your needs (ajax submitting, multiple files upload). I would recommend Jquery file upload because it's flash-free.

I also wrote a tutorial here: https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-for-Rails-3