iframe based photo/file uploader

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.


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

in facebook app, i’ve to use




in iframe src=”” i’ve specified photo.php and below is the code for photo.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');


<?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();">
<?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.

mahmud ahsan

Computer programmer and hobbyist photographer from Bangladesh, lives in Malaysia. My [Github | Business | Twitter | Linkedin | Instagram | 500px]

You may also like


  • Rogier
    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,

    • mahmud ahsan
      mahmud ahsan
      August 25, 2009 at 10:30 pm

      you’re welcome and this uploader is still online on facebook.

  • Rogier
    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,

  • saif
    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 🙂

  • mahmud ahsan
    mahmud ahsan
    March 9, 2010 at 9:32 pm

    @Saif, You’re welcome.

  • Praveen Puglia
    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.

  • Praveen Puglia
    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.

    • mahmud ahsan
      mahmud ahsan
      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 "</pre>";
      • Praveen Puglia
        July 11, 2010 at 11:31 am

        thank you sir for your reply…
        i have understood the php uploading system now…
        thanks a lot for that…
        but how can i use those photos.upload, photos.createAlbum, photos.addTag in this uploader??
        like the application “My Top Fans” does in facebook…
        they create an album in user’s photo directory and name it…how do they do that??? i am able to do that with the old sdk…but with the new sdk i am unable to implement those…please help…

  • Praveen Puglia
    July 12, 2010 at 6:47 pm



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

  • Jaffer
    September 3, 2010 at 2:51 pm

    Good work. Thanks a lot..

  • olabode folarin
    December 24, 2010 at 2:54 am

    assuming i want to get picture from user am using adobe cs5 dreamwaver

  • olabode folarin
    December 24, 2010 at 2:57 am

    if am using iframe how do i retrieve the pic in my database

  • metamorfoself
    May 20, 2011 at 3:49 am

    hi..mahmud…thx for great tutorial…. how to upload multiple image thx and regard metamorfoself

Comments are closed here.

About Me

Computer programmer and hobbyist photographer from Bangladesh, lives in Malaysia. My [Github | Business | Twitter | Linkedin | Instagram | 500px]


Working life at home Muaz < 4 Months Muaz and Jayed First Smile Little Angel Trees Horse Ride Maritime Museum in Malacca Dome of Blue Mosque Malaysia

Twitter Feed