iframe based photo/file uploader

Posted by mahmud ahsan on July 21, 2009 Facebook, Java Script, PHP

suppose your client tell you to create a form where he needs file/photo uploader that will work instantly when you will select file/photo.

recently i’ve faced same type of situation for one of facebook app and here is the solution i developed for my purpose.

<form name="fuser" action="http://temp.com/fsubmit.php" method="POST">
 <iframe src="photo.php" style="margin-left:-10px;" frameborder="0" scrolling="no" width="465" height="70"></iframe>
</form>

in facebook app, i’ve to use

<fb:iframe></fb:iframe>

not

<iframe></iframe>

in iframe src=”" i’ve specified photo.php and below is the code for photo.php

<?php
 if ($_FILES['photo']['error'] == UPLOAD_ERR_OK && !empty($_FILES['photo']['tmp_name'])) {
 //here i've to upload file into amazon s3 and i set $fileUrl = true;
 //you can upload file in local filesystem that code you have to write in this place
 $fileUrl		=	true;
 }
?>

<script type="text/javascript">
 function photoUpload(){
 var obj =	document.getElementById('fphoto');

 obj.submit();
 }
</script>

<?php if (isset($fileUrl) && !empty($fileUrl)) { ?>
 Photo uploaded successfully!
<?php } else { ?>
 <form action="photo.php" id="fphoto" method="POST" enctype="multipart/form-data">
 <input type="file" name="photo" size="56" onchange="photoUpload();">
 </form>
<?php } ?>

now when user will select any file, the from will submit by javascript inside iframe, so the main page will not reload and user will instantly see the success message.

Related Posts

• Communicating with Users via Email in Facebook
• Render fbml app as iframe or vice versa
• Inspire user to bookmark your facebook app

Tags: Facebook, facebook photo uploader, iframe, iframe based photo uploader, iframe file uploader, javascript file uploader, photo uploader