IUpload.js

Upload files without flash while simulating asynch using a dynamically created I-Frame and JSON callbacks

IUpload a cross browser single file uploader alternative to flash

• populates a div with an iframe that uploads your file as normal without refreshing your page
• callbacks to handle the response from the iframe
• works in IE
• the iframe will automatically be the size of the container you pass in as the parameter
• the server-side must respond with a window.response object that contains status:"success" or status:"error"
• if status = "success" then include the path to the file that was uploaded so you can display it.

Parameters

• container (the div container to have the iframe placed in)
• frame_src (the location of the iframe.html document)
• file_name (the field name for the file input)
• action (where the form gets posted to)
• extra_html (any additional html you would like to add to the form, like a CSRF token in Rails for example)

Default params, what the parameters will default to if not specified, if you specify a parameter as Null, the value in the iframe will not be overwritten with Javascript

[javascript]
{
  container:"#uploadContainer",
  iframe_src:"iupload/iframe.html",
  action:"upload.php",
  label:"Upload a File",
  file_name:"iuploadFile",
  extra_html:""
}

Build the Iframe

[javascript]
var element = document.getElementById("uploadContainer");
// example with all options, none are required, the defaluts above will be used if omitted
var uploader = new dpm.IUpload({container:'#uploadContainer', frame_src:'../../iupload/iframe.html', file_name:'iuploadFile',action:'../examples/php/upload.php', '<input type="hidden" name="extra" value="extra"/>'});

Handle the Response

[javascript]
// fired on upload start, passes in the name of the file being sent.
uploader.uploadStart = function(fileName){
  alert( 'uploading ' + fileName );
}

// fired when the upload is complete
uploader.uploadComplete = function(response){
  if( response.status == "success" ){
    $('#images').append( '<img src="' + response.file + '" />' );
  }else{
    alert(response.message);
  }
}

Server side usage

[html]
// error
<script type="text/javascript">
  window.response = {message: "could not move uploaded file", status: "error"}
</script>
// success
<script type="text/javascript">
  window.response = {file: "http://www.newfinds.com/someimage.jpg", status: "success"}
</script>

---

IUpload.js On GitHub