Facebook - cannot upload file using the <input type="file"> tag

Question

Hi

I am trying to let the user upload an image from my facebook app using the following php

<?php
echo render_header('Your');

define("MAX_SIZE", "1536");

function getExtension($str){
  $i = strpos($str,".");
  if(!$i) {return "";}
  $l = strlen($str) - $i;
  $ext = substr($str, $i+1, $l);
  return $ext;
}

$errors = 0;

if(isset($_POST['Upload'])){
  $image = $_FILES["file1"]["name"];
  if($image){
    $filename = stripslashes($_FILES["file1"]["name"]);
    $extension = getExtension($filename);
    $extension = strtolower($extension);
    if((strcasecmp($extension,"jpg") != 0) && (strcasecmp($extension,"jpeg") != 0) && (strcasecmp($extension,"png") != 0) && (strcasecmp($extension,"gif") != 0))
    {
      $errors = 1; 
    }
    else{
      $size = filesize($_FILES['file1']['tmp_name']);
      if($size > MAX_SIZE*1024){
        $errors = 2;
      }
      else{
        $image_name = md5(uniqid()) . '.' . $extension;
        $newname = "../images/" . $image_name;
        $flName = "/images/" . $image_name;
        $copied = move_uploaded_file($_FILES['file1']['tmp_name'], $newname);
        if(!$copied){
          $errors = 3;
        }
      }
    }
  }
}

if(isset($_POST['Upload']) && $errors == 0){
  //add to database here
  ...
  if($errors == 0){
    include "uploadedFile.php";
  }
}
else{

$user_details = $fb->api_client->users_getInfo($user, 'first_name,last_name,pic_square');
$image_url = $user_details[0]['pic_square'];
if($image_url == ""){
  $image_url = "http://static.ak.fbcdn.net/pics/q_silhouette.gif";
}
$user_name = $user_details[0]['first_name'] . " " . $user_details[0]['last_name'];
if(isset($_POST['Upload']) && $errors == 0){
?>
<div id="error" class="error">
<h2 id="standard_error" name="standard_error">Failed to upload tattoo.</h2>
<p id="standard_explanation" name="standard_explanation">
Error uploading file. This error occurred because either the photo was a size we don't support or there was a problem with the image file.
<br/>
</p>
</div>
<?php 
}
?>
<div id="newalbum" align="center">
<form id="upload" enctype="multipart/form-data" name="upload" action="" method="post">
<table class="formtable" cellspacing="0" border="0">
<tbody>
<tr class="tallrow">
<td class="label">
Upload Image:
<br/>
<small>
You can upload
<br/>
JPG, GIF or PNG
<br/>
files.
</small>
</td>
<td>
<div id="files">
<div id="1">
<input id="file1" class="inputfile" type="file" name="file1" size="22"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="formbuttons">
<input id="" class="inputbutton" type="submit" value="Upload Tattoo" name="Upload" />
<br/>
<small>The file size limit 1.5 MB. If your upload does not work, try uploading a smaller picture.</small>
<br/>
</div>
<?php
}
?>

But when I execute this code and the user presses the "Upload" button, the value of $_FILES['file1']['name'] comes out to be blank.

Is this code permissible in Facebook apps? If not what is the correct way to upload files?

Thanks

Edit

Ok so the problem is with facebook. They strip out all file tags from any request! It is suggested that we use iframes instead!

Thanks for the help everyone!

Answer 1

Before you try to access the file name, try this...

switch ($_FILES['file1']['error']) {
  case UPLOAD_ERR_INI_SIZE:
   echo '<p class="warning">File Upload Failed! File too large.</p>';
   break;
  case UPLOAD_ERR_FORM_SIZE:
   echo '<p class="warning">File Upload Failed! File exceeds limit.</p>';
   break;
  case UPLOAD_ERR_PARTIAL:
   echo '<p class="warning">File Upload Failed! Please try again.</p>';
   break;
  case UPLOAD_ERR_NO_TMP_DIR:
   echo '<p class="warning">File Upload Failed! No temp directory.</p>';
   break;
  case UPLOAD_ERR_CANT_WRITE:
   echo '<p class="warning">File Upload Failed! Failed to write to disk.</p>';
   break;
  case UPLOAD_ERR_EXTENSION:
   echo '<p class="warning">File Upload Failed!</p>';
   break;
}

This should tell you where the problem lies.

Answer 2

Your html-markup doesn't have a form end-tag.

<form>

</form>

Also, your form's action should either point to itself or that page that handles the image processing (In your case, the same file)

<?php
echo("<form id=\"formid\" name=\"formid\" method=\"post\" action=\"".$PHP_SELF."\"

</form>");
?>

Answer 3

Ok. Found the problem. Facebook strips all file tags before sending in a request. The solution is to use iframes instead.