iframe based photo/file uploader

Posted by mahmud ahsan on July 21, 2009 in Facebook, Javascript, PHP | 12 Comments

iframesuppose 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.

part_of_form_1 

<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 } ?>


part_of_form_2

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

If you think this article kicked ass, subscribe to the RSS feed or follow me on Twitter! Share with your friends, or leave a comment below (or better still, do both!)

Comments (12)

 

  1. Rogier says:
    August 25, 2009 at 7:47 pm

    Dear Mahmud,

    Your iframe based photo/file uploader is just what i am looking for on Facebook! And i can really use some more help on this.

    Would you like to assist me further? And is this uploader still online on Facebook somewhere?

    Best regards,
    Rogier

    Reply
  2. Rogier says:
    August 26, 2009 at 10:38 am

    Hi Mahmud,

    Where is the uploader on Facebook for us to take it for a test run. ;)

    Best regards,
    Rogier

    Reply
  3. saif says:
    March 9, 2010 at 3:58 pm

    great mahmud!!
    I just use this in an admin panel, where multiple image has to upload without page reloading. I searched and found many Ajax, Flash based , but yours one is shortest and easy :)

    Reply
  4. mahmud ahsan says:
    March 9, 2010 at 9:32 pm

    @Saif, You’re welcome.

    Reply
  5. Praveen Puglia says:
    July 9, 2010 at 2:24 pm

    Thanks a lot for your tutorials sir..but i want to know few more things..

    1.How can i implement this for my facebook application?
    2.How can i use photos.createAlbum, photos.upload, and photos.addTag?
    3.How can i upload a video or audio to facebook via my application?

    all using php.. i am making an iframe based application..
    please help me out…thank you in advance.

    Reply
  6. Praveen Puglia says:
    July 9, 2010 at 2:28 pm

    One more thing… I tried the exact code u have provided and it prompted me for selecting pictures. after that it showed, pictures uploaded successfully…where they were uploaded?
    and how can i modify the address where i want to upload the pictures?..
    i am newbie in this..please help.

    Reply
    • mahmud ahsan says:
      July 10, 2010 at 1:59 pm

      Did you not read the comments? Photo upload code is not provided here just I provided some comments. Because, php upload code and amazon s3 upload codes are different. So learn it and implement as yourself. PHP file upload code is very easy…

      <?php// In PHP versions earlier than 4.1.0, $HTTP_POST_FILES should be used instead
// of $_FILES.
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
echo '<pre>';
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
   echo "File is valid, and was successfully uploaded.\n";
} else {
   echo "Possible file upload attack!\n";
}
echo 'Here is some more debugging info:';
print_r($_FILES);
print "</pre>";
?>
      Reply
  7. Praveen Puglia says:
    July 12, 2010 at 6:47 pm

    http://code.google.com/p/facebook-gallery-import/source/browse/trunk/client/facebook_php5_photoslib.php?r=6

    http://www.easycodingclub.com/facebook-api-tutorials/facebook-php-api-for-photos-upload

    how this codes can be used to use graph api to upload photos or add tags to them… i read your article..understood a bit..but not totally….please post one example on photos.upload or photos.addTag….

    Reply
  8. Jaffer says:
    September 3, 2010 at 2:51 pm

    Good work. Thanks a lot..

    Reply

Leave a Reply