Exploring cloud photos on an Android browser with the help of FileReader

Question

Exploring cloud photos on an Android browser with the help of FileReader

This snippet of javascript code creates an image upload button and displays the uploaded image:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();            
        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

You can view the full jsfiddle example here.

Although this code works perfectly on most mobile browsers, it encounters a problem specifically with the stock Android browser. Images fail to load if they are stored remotely, such as those from synced Facebook or Picasa accounts. While FileReader is designed for local files, other mobile browsers like Chrome, Opera, and Firefox have no issues with loading remote images.

After checking the FileReader error code, it seems that images from Facebook/Picasa return a NOT_FOUND_ERR: https://developer.mozilla.org/en-US/docs/Web/API/FileError

This issue seems unique to the stock Android browser, as it works fine with local files and camera-captured images, but fails to load remote Facebook/Picasa images, showing icons instead of the actual photos. This anomaly has been observed on Android versions 4.3 and 4.4.

Although similar issues have been discussed online, such as this thread on Stack Overflow: Issue with stock Browser picking photos from Gallery

The issue seems to be related to the inability of FileReader to read remote files, but the fact that it works on other mobile browsers raises questions about the specific compatibility of the stock Android browser.

javascript android filereader

Answer 1

Answer №1

When encountering the error, there are two potential reasons behind it.

The first explanation could be that the files "Images" you are attempting to read using the HTML5 API FileReader are either locked or being used by other applications such as Facebook or Picasa. In such cases, there may be nothing you can do through JavaScript unless you have physical access to the device, such as a Phone.
The second explanation, which is more probable, is that certain browsers may not be able to trigger the onload event of the FileReader due to incomplete support for this HTML5 API. More information on browser compatibility can be found on the caniuse website. This issue can often be resolved by replacing the event onload with onloadend.

Here is a revised version of your code:

var reader = new FileReader(); 
reader.onloadend = function () { 
    console.log(reader.result); 
}; 
reader.readAsDataURL(file);

For an example, you can check out this jsfiddle.

You can also view a Demo of FileReader in action here.

Answer 2

When encountering the error, there are two potential reasons behind it.

The first explanation could be that the files "Images" you are attempting to read using the HTML5 API FileReader are either locked or being used by other applications such as Facebook or Picasa. In such cases, there may be nothing you can do through JavaScript unless you have physical access to the device, such as a Phone.
The second explanation, which is more probable, is that certain browsers may not be able to trigger the onload event of the FileReader due to incomplete support for this HTML5 API. More information on browser compatibility can be found on the caniuse website. This issue can often be resolved by replacing the event onload with onloadend.

Here is a revised version of your code:

var reader = new FileReader(); 
reader.onloadend = function () { 
    console.log(reader.result); 
}; 
reader.readAsDataURL(file);

For an example, you can check out this jsfiddle.

You can also view a Demo of FileReader in action here.

Answer 3

Answer №2

    <input id="fileinput" name="arquivo[]" type="file" multiple="multiple" onchange="FileDetails()"/>
    <var id="file_List"></var>
    <button type="button" onclick="Click()">Click Me!</button>
    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script>
    // custom function to store file input details in memory
    G_Array         = [];
    G_Cont_Upload   = 0;
    function Click() 
    {
        var a = 1;                                      // checking the global variable content as needed
    }
    function FileDetails() 
        {
        var file_arr = [];
        if (typeof (FileReader) != "undefined") 
            {
            var files = $('#fileinput')[0].files; 
            var reader  = [];
            for (var i = 0; i < files.length; i++)
                {
                var FileDet = files[i];

                var name    = FileDet.name;
                var Size    = FileDet.size;
                var Obj     = {Name: FileDet.name, SizeInicial : FileDet.size};
                G_Array.push(Obj);

                reader[i]   = new FileReader();

                function f_ReadFile(e)
                    {
                    var content = e.target.result;
                    G_Array[G_Cont_Upload].SizeAtual = content.length;
                    G_Array[G_Cont_Upload].Content   = content;           // content base 64
                    G_Cont_Upload++;
                    }
                reader[i].onload = f_ReadFile;
                reader[i].readAsDataURL(FileDet);
                }
            } 
        else 
            {
            alert("This browser does not support HTML5 FileReader.");
            }
        }
</script>
</body>

Answer 4

    <input id="fileinput" name="arquivo[]" type="file" multiple="multiple" onchange="FileDetails()"/>
    <var id="file_List"></var>
    <button type="button" onclick="Click()">Click Me!</button>
    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script>
    // custom function to store file input details in memory
    G_Array         = [];
    G_Cont_Upload   = 0;
    function Click() 
    {
        var a = 1;                                      // checking the global variable content as needed
    }
    function FileDetails() 
        {
        var file_arr = [];
        if (typeof (FileReader) != "undefined") 
            {
            var files = $('#fileinput')[0].files; 
            var reader  = [];
            for (var i = 0; i < files.length; i++)
                {
                var FileDet = files[i];

                var name    = FileDet.name;
                var Size    = FileDet.size;
                var Obj     = {Name: FileDet.name, SizeInicial : FileDet.size};
                G_Array.push(Obj);

                reader[i]   = new FileReader();

                function f_ReadFile(e)
                    {
                    var content = e.target.result;
                    G_Array[G_Cont_Upload].SizeAtual = content.length;
                    G_Array[G_Cont_Upload].Content   = content;           // content base 64
                    G_Cont_Upload++;
                    }
                reader[i].onload = f_ReadFile;
                reader[i].readAsDataURL(FileDet);
                }
            } 
        else 
            {
            alert("This browser does not support HTML5 FileReader.");
            }
        }
</script>
</body>

Exploring cloud photos on an Android browser with the help of FileReader

Answer №1

Answer №2

Similar questions

Node.js: Array remains undefined despite being logged on the console

What is the best approach to send a value to the controller?

What is the best way to retrieve user interaction data in Discord.js v13?

Guide on altering the background color of a table row depending on the data in its cells with the help of AngularJS

A guide on updating a global variable using AsyncTask

preventing elements from moving unexpectedly as the navigation bar becomes fixed at the top of the page

Typeahead in Angular is failing to function properly after using the $compile method

The HTML anchor tag paired with the italic tag is a powerful combination for

What is the best way to return JSON data in a compressed (gzip) format to an Ajax Request using Java?

Getting inaccurate frame data using ExtractMpegFramesTest on Android?

Encountering issues with extension CLI - "Unable to utilize the import statement outside a module"

Issues with JQuery .attr method not functioning as expected

Challenges with browsing navigation in Selenium WebDriver

Using the jQuery plugin multiple times within one website

Receiving a blank array upon calling res.json() in Node.js script

Guide on implementing enums (or const) in VueJS

Sending a function return to a React component

Choosing a versatile model field in a Django CMS plugin

Incorporating an array of JSON into a Mongoose schema in JavaScript

How to Use an Object Created from a Different Class in TypeScript