The script I have below is for users to upload a profile picture to their account. It also deletes a current profile picture if they want to upload a new one.
Something I have been struggling with over the past few months is building an image upload form that works all the time, on all browsers. I have broader questions about how to make my upload script more robust, but in particular I am having one major issue.
Why does this script not work with Internet Explorer? Uploads through Chrome, Firefox, and Safari all work just fine. However, when I upload an image using IE it gets rejected for being an incorrect file type.
Here is what I have tried/researched over the course of trying to solve this issue.
1) Made sure enctype="multipart/form-data" was included in my html form
2) Tried using exif_imagetype($file) to get the file type as opposed to getimagesize() (Note: I also enabled exif_imagetype() in my php.ini file). I read that this was a more reliable method for determining file types. This function works on the three other browsers, however when using IE it still can’t determine the file type.
3) I used var_dump($_FILES) to see what is being uploaded. This shows the name, size, type, etc on all browsers except IE. On IE it seems that there is no name for the uploaded file. echoing the name displays: "string '' (length=0)"
The html form, image upload script, and image resize script are all located below.
FORM:
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="625000">
<input type="file" class="span2" name="image" id="image" size="20">
<input name="picture" type="submit" value="update" class="btn btn-primary" style="margin-bottom: -10px">
</form>
UPLOAD SCRIPT:
if (isset($_POST['picture'])){
//THIS SECTION IS FOR UPLOADING THE PROFILE PICTURE.
//It will create a standard profile image size 320 by 320.
//It also then creates a 'thumbnail' picture size 100 x 100
//delete the original profile image (if there was one)
$CurrentImage = getImage("profile",$id,FALSE);
$CurrentImageThumb = getImage("profile",$id,TRUE);
//if the current image is something other than the generic image, delete the current images
if($CurrentImage!="images/profile/generic.jpg")unlink($CurrentImage); if($CurrentImageThumb!="images/profile/genericthumb.jpg")unlink($CurrentImageThumb);
//get the type of the upload
$pic_type = ".".pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
//save the initial file
$saveto = "images/profile/$id"."$pic_type";
move_uploaded_file($_FILES['image']['tmp_name'], $saveto);
//resize it and display the appropriate message if it works/doesn't work
//CREATE FULL SIZE
if (true === ($pic_error = image_resize($saveto,$saveto, 320, 320, 0))){
//CREATE THUMBNAIL
$saveto2 = "images/profile/$id"."thumb"."$pic_type";
if (true === ($pic_error = image_resize($saveto,$saveto2, 100, 100, 0))){
showAlert(2,"Your image has been uploaded!"," If the image did not change, <a href=\"./editprofile\">click here</a> to reload the page.");
}}else{
showAlert(3,"File Issue: ",$pic_error);
unlink($saveto);//delete the upload
unlink($saveto2);//delete the upload
}
}
IMAGE RESIZE SCRIPT:
function image_resize($src, $dst, $width, $height, $crop=0){
//if getimagesize doesn't output an array with the first two values being width and height, we reject the file
if(!list($w, $h) = getimagesize($src)) return "Unsupported file type. We only accept image files the extension .jpg, .jpeg, .png, .gif, or .bmp";
//get the image type based on the file extension
$type = strtolower(substr(strrchr($src,"."),1));
//based on file type, create a new image from the url
if($type == 'jpeg') $type = 'jpg';
switch($type){
case 'bmp': $img = imagecreatefromwbmp($src); break;
case 'gif': $img = imagecreatefromgif($src); break;
case 'jpg': $img = imagecreatefromjpeg($src); break;
case 'png': $img = imagecreatefrompng($src); break;
default : return "Unsupported file type. We only accept image files with the extension .jpg, .jpeg, .png, .gif, or .bmp";
}
// resize (get the dimensions for resize if $crop or not)
if($crop){
//if initial image is smaller than crop size display error
if($w < $width or $h < $height) return "Picture is too small. Your image must be LARGER than ".$width."pixels by ".$height." pixels.";
$ratio = max($width/$w, $height/$h);
$h = $height / $ratio;
$x = ($w - $width / $ratio) / 2;
$w = $width / $ratio;
}
else{
if($w < $width and $h < $height) return "Picture is too small. Your image must be LARGER than ".$width."pixels by ".$height." pixels.";
$ratio = min($width/$w, $height/$h);
$width = $w * $ratio;
$height = $h * $ratio;
$x = 0;
}
//create a new true color image
$new = imagecreatetruecolor($width, $height);
// preserve transparency
if($type == "gif" or $type == "png"){
imagecolortransparent($new, imagecolorallocatealpha($new, 0, 0, 0, 127));
imagealphablending($new, false);
imagesavealpha($new, true);
}
//COPY AND RESIZE THE IMAGE
/**imagecopyresampled ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y ,
int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
imagecopyresampled() will take an rectangular area from src_image of width src_w and height src_h at
position (src_x,src_y) and place it in a rectangular area of dst_image of width dst_w and height dst_h at position (dst_x,dst_y).
*/
imagecopyresampled($new, $img, 0, 0, $x, 0, $width, $height, $w, $h);
//then output the image to the file
switch($type){
case 'bmp': imagewbmp($new, $dst); break;
case 'gif': imagegif($new, $dst); break;
case 'jpg': imagejpeg($new, $dst); break;
case 'png': imagepng($new, $dst); break;
}
return true;
}
The issue did not reside in PHP whatsoever and the HTML form itself was setup just fine.
Our designer created a unique “browse” button for file uploads. This button conflicted with IE and prevented uploaded files from being POSTed.Not sure if this question and answer will help anybody else or not.
Moral of the story, when you hit dead ends with debugging, talk to the designer.