Upload Files Like Gmail - Client Side Gmail Architecture Part 2

In this follow up to the very popular first part of the Gmail Client Side Architecture series we will be looking at how Google handles the file upload process during mail composition in GMail. Ajax is everywhere, and most of the big and well known websites and services out there are moving towards being Ajax enabled to improve usability and create a richer experience for their users. Ajax also makes some things possible within the browser that could previously not even be imagined by users or developers. So in this new Ajaxified web, is there still a place for the old pre Web 2.0 iframe style Ajax mimicking?

Uploading files in GMail provides us with some proof that indeed mimicking Ajax via the iframe is still useful and sometimes unavoidable in the Web 2.0 web development world. GMail is one of these pioneering web applications that really pushes the envelope and revolutionised what users thought was possible with online e-mail application.

[img_assist|nid=3538|title=|desc=The Gmail mail composition interface|link=none|align=none|width=573|height=297]

One of these aspects is how GMail handles file uploads while you are composing a new mail message. It happens so unobtrusively that you might not have even thought about this before. Before you have even completed your mail and sent it off, GMail has already uploaded your file attachments. How did this happen then?

Well, to start of with, this does not use your standard Ajax pattern as Ajax does not support multipart/form-data posts. Instead GMail uses an iframe for the purposes of uploading your file attachments. It does this by pointing the target of the form submission towards the iframe and hiding the iframe with CSS via the style=”display:none” property.

<form target=”iframename” action=”upload.php”>

To mimic dynamic Ajax style updating of your interface, you add JavaScript at the end of your upload.php file to update the interface in a way that will seem similar to Ajax:

<?php
$target_path = "upload/";

$target_path = $target_path . basename( $_FILES['filefieldname']['name']); 

if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}?>
<script>
parent.document.getElementById('uploadedfile').innerHTML += '<br><a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';
</script>

So your interface file that includes the iframe and targets upload.php for uploading the files might look as follows:

<?php
<form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">
<p>
  <label>To:
  <input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />
  <br />
  <br />
  Subject:  
  <input name="textfield" type="text" id="textfield" size="60" maxlength="60" />
  <br />
  <br />
  Attach File:
  <input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>
  </label>
</p>
<p id="uploadedfile" >
  <label></label>
</p>
<p>
  <label>
  <input type="submit" name="button" id="button" value="Submit" />
  </label>
</p>
<iframe name="hiddenframe" style="display:none" >Loading...</iframe>
</form>

This concludes this part of the series. I sincerely hope you will find this helpful in your development. You can download all the source code from this location.

Original Author

Original article authored by Sajith.M.R