mmSWFUpload 0.5

New version! 0.7

What is it?

Upload files via flash to get the flash-upload dialog goodness. NEW VERSION!



    How do i use it?

    It's very simple!
    1. Download the files: SWFUpload_beta.zip

    2. Include the javascript:

    <script type="text/javascript" src="jscripts/SWFUpload/mmSWFUpload.js"></script>

    If you look at the simple example you will notice that all you need to do to use SWFUpload is to specify your backend-upload script and a target div where the button should be.

    The script will insert the small swf + an a-tag with the class name that you specify.

    New! The script can now be applied to any link

    
    Simple example:
    <script type="text/javascript">
    
    	mmSWFUpload.init({
    		upload_backend : "../../upload.php",
    		target : "SWFUpload",
    	});
    
    </script>
    
    And in the html-code
    <a href="javascript:mmSWFUpload.callSWF();">link</a>
    
    Full featured example:
    <script type="text/javascript">
    
    	mmSWFUpload.init({
    		upload_backend : "../../upload.php",
    		target : "SWFUpload",
    		cssClass : "SWFUploadLink",
    		allowed_filesize : "40000",
    		allowed_filetypes : "*.gif;*.jpg;*.png",
    		upload_start_callback : 'uploadStart',
    		upload_progress_callback : 'uploadProgress',
    		upload_complete_callback : 'uploadComplete',
    		upload_error_callback : 'uploadError',
    		upload_cancel_callback : 'uploadCancel'
    	});
    
    </script>
    
    
    And in the CSS:
    a.SWFUploadLink {
        width: 300px;
        height: 100px;
        background: url(images/custom_button.png) no-repeat;
        display: block;
    }
    
    a.SWFUploadLink:hover {
          background: url(images/custom_button_over.png) no-repeat;
        }
    
    

    Most of the configurations are optional, but if you want to do something more advanced you probably want the flash to call back to some javascript and present the information.

    all the callbacks will return an image object, so you will only need one argument in your javascript callback functions. The object always contains the file name, the file size and the file type.

    The object looks like this:
    fileObj.name = filename (filename.png)
    fileObj.size = filesize (192912)
    fileObj.type = filetype (.png)

    New! set allowed_filesize (in Kb)

    upload_progress_callback also gets reports on bytes loaded.

    Please see the provided example.js for more info and more advanced examples.

    Some simple callbacks:
    uploadStart = function(fileObj) {
    	var container = document.getElementById("fileContainer");
    	container.innerHTML += "<span id='" + fileObj.name + "' >";
    	container.innerHTML += fileObj.name + ", ";
    	container.innerHTML += fileObj.size + ", ";
    	container.innerHTML += fileObj.type + "</span><br />";
    }
    
    uploadProgress = function(fileObj, bytesLoaded) {
    	var pie = document.getElementById("progressInfoElm");
    	var proc = Math.ceil((bytesLoaded / fileObj.size) * 100);
    	pie.innerHTML = proc + " %";
    }
    
    uploadComplete = function(fileObj) {
    	document.getElementById(fileObj.name).className = "uploadDone";
    	document.getElementById(fileObj.name).innerHTML = objFile.name + " done!";
    }
    
    

    The other callbacks works on the same principle.
    Please note: above scrips are fairly untested... Just do a view-source on the javascript for this page for more info on how to work with the callbacks.

    Error handling

    There is a bit of simple error handling built-in, but this can be expanded by using the upload_error_callback. The SWF will return a few different error codes depending on what goes wrong. Here is a short explanation:

    The error always contains one of these codes and the file object that caused the error, some, like the http error also contains a message (the http error code).

    Here's a spanish tutorial as well!

    Known bugs

    If you are using Apache with mod_security this will not work, you need to put the following in your .htaccess file to disable mod_security:

    SecFilterEngine Off
    SecFilterScanPOST Off

    p.s. Disabling mod_security isn't allowed on some shared hosts, and only do this if you know what you are doing.

    This is due to a bug in the way that flash sends the headers back to the server according to the Flash 8 documentation

    Updating ScriptLimits

    If you do any editing in the .FLA-file and re-export the .swf you need to run a program called SWF Script Patch to update the ScriptLimits tag in the .swf bytecode to update the timeout from the default 15 seconds. Download it from macromediaturk. (I know, it looks shifty, but i've used it and haven't had any problems with it so... :-))

    Thanks & Licensing

    A big thanks to Geoff Stearns for his SWFObject, without that this litte hack wouldn't have been half as good. Check it out here: blog.deconcept.com/swfobject

    SWFUpload is (c) 2006 Lars Huring - Profandesign and Mammon Media and is released under the MIT License: http://www.opensource.org/licenses/mit-license.php

    Send comments, suggenstions and/or updates to lars(at)profandesign.se