SWFUpload - anyone familiar?

Question

I'm experimenting with SWFUpload ( http://swfupload.org ) and I'm wondering if, in PHP, its data will still be in the $_FILES array. If not, where does it go?

Answer 1

SWFUploader uses HTTP POST to upload the files. So from PHP's perspective, it is not different than a being posted with a file.

The file will be in $_FILES and the extra postvars will be in $_POST.

Answer 2

I am going to post a complete example using swfupload and PHP. I believe swfupload documents are not very helpful for beginners and this example would help many people. what you need to download is following

Copy/create all necessary files first

• Download v2.2.x.y core and samples
• Then create the following folder structure

create a folder called swfupload and copy following files from 2.2.x.y core into it

• swfupload.js (from core root folder)
• swfupload swf file (from core/Flash folder)

copy following files from 2.2.x demos folder into our swfupload folder

• default.css (from 2.2.x.y samples/demos/css)
• copy 2.2.x.y samples/demos/simpledemo/js folder here (as it is)
• copy 2.2.x.y samples/demos/images folder here (as it is)

Now create a PHP script to receive the file (call it receiver.php) inside swfupload folder. Now you have a folder called swfupload inside your document root that contains all the required files.

Create test html page with swfupload control

 <!-- file upload component  -->
    <div class="fieldset flash" id="fsUploadProgress">
        <span class="legend">Upload Queue</span>
     </div>
     <div id="divStatus">No Files Uploaded</div>
      <div>
          <span id="spanButtonPlaceHolder"></span>
      <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
      </div>

include javascript to interact with swfupload control

now you have to include swfupload css file and required javascript files inside our test html. we also have to initialize and configure the js required to interact with swfupload control.

<link href="/swfupload/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/swfupload/swfupload.js"></script>
<script type="text/javascript" src="/swfupload/js/swfupload.queue.js"></script>
<script type="text/javascript" src="/swfupload/js/fileprogress.js"></script>
<script type="text/javascript" src="/swfupload/js/handlers.js"></script>


<script type="text/javascript">
            //attach events
            $(document).ready(function(){
                $("a.removeMedia").live("click", function(event){
                    event.preventDefault();
                    var docId = $(this).attr("id");
                    //remove flexi data
                    webgloo.gMedia.table.removeRow(docId);
                }) ;

                //initialize gMedia table with documentId coming from server
                webgloo.gMedia.debug = false ;
                webgloo.gMedia.table.load();

            });

            //swffileupload related javascript
            var swfu;

            window.onload = function() {
                var settings = {
                    flash_url : "/swfupload/swfupload.swf",
                    upload_url: "/swfupload/receiver.php",
                    post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
                    file_size_limit : "10 MB",
                    file_types : "*.*",
                    file_types_description : "All Files",
                    file_upload_limit : 100,
                    file_queue_limit : 0,
                    custom_settings : {
                        progressTarget : "fsUploadProgress",
                        cancelButtonId : "btnCancel"
                    },
                    debug: false,

                    // Button settings
                    button_image_url: "/swfupload/images/TestImageNoText_65x29.png",
                    button_width: "65",
                    button_height: "29",
                    button_placeholder_id: "spanButtonPlaceHolder",
                    button_text: '<span class="theFont">Upload</span>',
                    button_text_style: ".theFont { font-size: 16; }",
                    button_text_left_padding: 12,
                    button_text_top_padding: 3,

                    // The event handler functions are defined in handlers.js
                    file_queued_handler : fileQueued,
                    file_queue_error_handler : fileQueueError,
                    file_dialog_complete_handler : fileDialogComplete,
                    upload_start_handler : uploadStart,
                    upload_progress_handler : uploadProgress,
                    upload_error_handler : uploadError,
                    upload_success_handler : uploadSuccess,
                    upload_complete_handler : uploadComplete,
                    queue_complete_handler : queueComplete  // Queue plugin event
                };

                swfu = new SWFUpload(settings);
            };

        </script>

Please see the changes that you need to do in settings. Now we are set to hit the PHP script. we will hit the PHP script and PHP script will return some response that our test html can use (things like doc location, or doc_id if you are storing in a DB, name,size,mime) etc. can be returned.

PHP script for server side processing

if you know how to handle files in PHP then the only thing you need to know is that the file element name sent by swfupload is Filedata. rest all is details. After processing your file upload via $_FILES , your receiver script can return some data that can be used to update your html with document details. The PHP upload sample included in swfupload forum is pure spaghetti. if you want to look @ an object oriented model, look @ following files

http://code.google.com/p/localo/source/browse/job/web/swfupload/receiver.php http://code.google.com/p/localo/source/browse/lib/webgloo/common/Upload.php http://code.google.com/p/localo/source/browse/lib/webgloo/job/FileUpload.php

That is for illustrative purpose only. The code will not work as it is as it has dependencies on my library.

wiring PHP script return data back into html containing swfupload control

This is the last step. what the server script returns on a successful upload should be processed by one of swfupload javascript handlers to update the html (say storing returned file upload URI in document to further submit it to some other script etc.) The way you can do wiring is open up /swfupload/js/handlers.js and make changes there.

function uploadSuccess(file, serverData) {
    // The php script may return an error message etc. but the handler event for swfupload
    // client is still uploadSuccess. we have to parse data returned from server to find known/script
    // error case.
    try {
        var progress = new FileProgress(file, this.customSettings.progressTarget);
        //try parsing server data now
        var dataObj ;

        try{
            if(webgloo.gMedia.debug) {
                alert("server returned => " + serverData);
            }

            dataObj = JSON.parse(serverData);
            //process server data
            if(dataObj.error === undefined || dataObj.error != 'yes'){
                //no error object or error is not yes!
                //process document object received from server
                webgloo.gMedia.table.addRow(dataObj.document.uuid, dataObj.document.originalName);
                progress.setComplete();
                progress.setStatus(dataObj.message);
                progress.toggleCancel(false);
            }else {
                //known error
                progress.setStatus("Error: " + dataObj.message);
            }

        } catch(ex) {
            //we need to gaurd against JSON parsing errors as well
            progress.setStatus("Error: " + ex.toString());
        }


    } catch (ex) {
        this.debug(ex);
    }
}

You can hot wire your own javascript here. For a sample (I am updating a table of documents and storing returned documents meta data as a json string in form document) please see here:

http://code.google.com/p/localo/source/browse/job/web/js/main.js

I hope this is enough information to get you started with swfupload. Happy coding :)