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.

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.

About mahmud ahsan

Founder And Lead Programmer at iThinkdiff.net

, , , , , ,

15 Responses to iframe based photo/file uploader

  1. 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,
    Rogier

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

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

  2. 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,
    Rogier

  3. 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 :)

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

    @Saif, You’re welcome.

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

  6. 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 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>";
      ?>
      
      • 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…

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

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

    Good work. Thanks a lot..

  9. olabode folarin December 24, 2010 at 2:54 am #

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

  10. olabode folarin December 24, 2010 at 2:57 am #

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

  11. metamorfoself May 20, 2011 at 3:49 am #

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