uploading file through iframe doesn't work in IE

Question

I have two files iframe.php, iframe.html. iframe.php contains a file's uploading form which i want to display in iframe.html as an iframe (only for IE < 10 otherwise i can upload using ajax without any problems).

it's working fine in IE.10, but in IE.9 i need to click twice on the submit button to upload, where in IE.8 it doesn't work at all and the $output always return Error: invalid file and also need to be clicked twice, i'm not sure what the problem is! any help would be great.

iframe.php

<div id="uploadImage">

<form method='POST' enctype='multipart/form-data' action='<?php echo $_SERVER['PHP_SELF'] ?>'>
    <input type="text" disabled placeholder="Choose an Image to upload" id="file_input" name="file_input" />
    <input type="button" id="file_btn" value="" onClick="document.getElementById('file').click()" />
    <input type="submit" id="upload" value="" />
    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" id="file" name="file" />
    </div>
</form>

<div id="properties" class="texxt">
    <p>Name: <br/>
       Size: max 2 MB or 2000 KB<br/>
       Type: (jpg, jpeg, png, gif)
    </p>
</div>

<div id="results">
<?php
$status = "Close";
$source = "";
if( isset($_FILES['file']))
{
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $extension = end(explode(".", $_FILES["file"]["name"]));
    $size = (int) $_SERVER['CONTENT_LENGTH'];

    if ( (($_FILES["file"]["type"] == "image/gif")  ||
          ($_FILES["file"]["type"] == "image/jpeg") ||
          ($_FILES["file"]["type"] == "image/jpg")  ||
          ($_FILES["file"]["type"] == "image/png")) &&
          in_array($extension, $allowedExts)        &&
          ($size < (2 * 1024 * 1024)) )
    {
        if ($_FILES["file"]["error"] > 0)
        {
            $output = "Return Code: " . $_FILES["file"]["error"];
        }
        else
        {
            if (file_exists("upload/" . $_FILES["file"]["name"]))
            {
                $output = "Error: File already exists. Please rename your file or chose a different one";
            }
            else
            {
                move_uploaded_file($_FILES["file"]["tmp_name"],
                "upload/" . $_FILES["file"]["name"]);
                $status  = "Add Image";
                $output  = "Uploaded Successfully";
                $source  = sprintf(" !img! %s !*img! ", $_FILES["file"]["name"]);
            }
        }
    }
    else
    {
        if (!in_array($extension, $allowedExts))
        {
            $output = "Error: Please select an image.";
        }
        elseif ( ($size > (2 * 1024 * 1024)) && in_array($extension, $allowedExts) )
        {
            $output = "Error: File size(" . $size . ") exceeds the limit of 2 mb.";
        }
        else
        {
            $output = "Error: Invalid file";
        }
    }
    echo $output;
}

?>
</div>
<p align="center">
    <input type="hidden" name="source" id="source" class="source" value="<?php echo $source ?>" />
    <input type="button" id="close" class="close" value="<?php echo $status ?>" />
</p>
</div>

<script>
    document.getElementById('file').onchange = function(){
        var path = this.value.replace(/C:\\fakepath\\/, ''),
            props = document.getElementById('properties');
        props.innerHTML = props.innerHTML.replace('Name: ', 'Name: ' + path);
        document.getElementById('file_input').value = path;
        document.getElementById('results').innerHTML = "";
    };
</script>

iframe.html

<div id="iframe" style="height: 296px; width: 481px">
</div>

<script>
var iframe = document.createElement('iframe');
iframe.src = "iframe.php";
iframe.frameBorder = "no";
iframe.allowTransparency = "true";
document.getElementById('iframe').appendChild(iframe);
</script>

Using JavaScript to click on a file input is going to give you an access denied error in IE when you try to submit the form. http://stackoverflow.com/questions/3935001/getting-access-is-denied-error-on-ie8/4335390#4335390 — Musa, Apr 26 '13 at 01:00
thanks Musa, i removed the javascript and now clicking directly on the file input, the form is working now in ie9 but in ie8 it's saying `Error: Invalid File`. the double click problem is solved as well — , Apr 26 '13 at 01:21
php is not throwing any errors neither console! what could be the problem? — , Apr 26 '13 at 01:27
Try this file-upload @ [jQuery Form Plugin](http://jquery.malsup.com/form/#file-upload) - comes with a number of features too — Alvin K., Apr 26 '13 at 04:35
@Ray: Answers are on that site: ie. difference with `XMLHttpRequest Level 2 vs Level 1`, using for older browsers and limitation on the ajax output. — Alvin K., Apr 28 '13 at 18:25

razz · Accepted Answer · 2013-04-27T14:58:42.300

IE doesn't allow manipulation of the type="file" input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an "Access is denied" error on the form submit, user has to click on the file input manually.

as for the invalid file error in IE.8, the proplem is with the $_FILES['file']['type'], i had this problem myself before. when using var_dump($_FILES['file']['type']) you can see that it shows file types as following:

jpeg -> pjpeg
jpg  -> pjpeg
png  -> x-png
gif  -> gif

to fix the problem add x-png and pjpeg to the allowed file types:

if ( (($_FILES["file"]["type"] == "image/gif")    ||
      ($_FILES["file"]["type"] == "image/jpeg")   ||
      ($_FILES["file"]["type"] == "image/jpg")    ||
      ($_FILES["file"]["type"] == "image/pjpeg")  ||
      ($_FILES["file"]["type"] == "image/png")    ||
      ($_FILES["file"]["type"] == "image/x-png")) &&
      in_array($extension, $allowedExts)          &&
      ($size < (2 * 1024 * 1024)) )
{

You can submit the form via javascript, you just can't trigger (click) the file input element via javascript AND submit the form via javascript. — Ray Nicholus, Apr 26 '13 at 03:29
@razzak adding `pjpeg` and `x-png` fixed it :), thank you so much — , Apr 27 '13 at 17:26

uploading file through iframe doesn't work in IE

1 Answers1