Problems while previewing image before upload on mobile browser, works fine on desktop browser

Question

Problem Definition:
I want to select multiple images from mobile gallery and upload it. But before uploading, as soon as the user select images, I want to show preview of images selected. For achieving this, I am using the below code snippet which works perfectly on desktop browser. But, when the same is tried using mobile browser, it doesn't show the preview of images.
I tried by executing the below code as an html file as well as on the "try it yourself" editor which w3schools.com provide. In both cases, it works fine if I am doing it using a desktop browser but doesn't show preview of images if I am using mobile browser.
W3shcools Editor: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
I am using below version of google chrome.
Desktop: 27.0.1453.94 m
Mobile : 27.0.1453.90
Mobile Model: Samsung Galaxy S2

Appreciate any help in this regard.

<!DOCTYPE html>
<html>
<head>
    <title>File API - FileReader as Data URL</title>
</head>
<body>
    <header>
        <h1>File API - FileReader</h1>
    </header>
    <article>
        <label for="files">Select multiple files: </label>
        <input id="files" type="file" accept="image/*" multiple/>
        <output id="result" />
    </article>
</body>

<script>
window.onload = function(){       
    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            //console.log(files);
            var output = document.getElementById("result");
            //console.log(result);
            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                //Only pics will be allowed
                if(!file.type.match('image'))
                  continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;
                    console.log(event);
                    var div = document.createElement("div");

                    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picFile.name +"' width='80' height='80'/>";
                    console.log(div.innerHTML);                  
                    output.insertBefore(div,null);            

                });

                 //Read the image
                picReader.readAsDataURL(file);
            }                               

        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}
</script>
</html>

Is there an error message in the console? What happens if you step through it with a debugger? — RoToRa, Jul 10 '13 at 13:55
I did not check the console. But instead of console.log(value), I tried alert(value). No alert is being shown on the device browser. On desktop browser, alert box got displayed with the value. — Anup, Jul 11 '13 at 05:35
In above code, you see "//console.log(files), //console.log(result)". Those lines are replaced with alert(files), alert(result) — Anup, Jul 11 '13 at 07:42
That means the event isn't firing. Is the event handler begin set? Put an alert before `filesInput.addEventListener(`. Oh, and replace the `console.log("Your browser does not support File API");` with an alert, too. — RoToRa, Jul 11 '13 at 07:55
@RoToRa, The control was not going inside picReader.addEventListener("load",function(event){} Checked that by putting alert in every code block. Thanks for the hint. — Anup, Jul 12 '13 at 13:28

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Modified another code snippet for it to work properly on browser. The code snippet, I modified is mentioned at the link below.
Preview an image before it is uploaded

Below is the code snippet which work properly on both desktop browser as well as mobile browser.

<!DOCTYPE html>
<html>
<head>
    <title>File  API- FileReader as Data URL</title>
</head>
<body>
    <input type='file' id="imgInp" />
    <img id="myImage" src="#" alt="your image" />
</body>

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('myImage').src=e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
document.getElementById('imgInp').addEventListener("change",(function(e){
    readURL(this);
}));
</script>
</html>

Problems while previewing image before upload on mobile browser, works fine on desktop browser

1 Answers1