Issue with stock Browser picking photos from Gallery

Question

I am working on a web page for uploading photos from a mobile device, using the <input type="file" accept="image/*"/> tag. This works beautifully on iphone and on chrome on the android, but where we are running into issues is with the stock android browser.

The issue arises when you select a file from your gallery (it works fine when you use the camera to take a photo). And we have narrowed it down even further to seeing that the data MIME type isn't available when taken from the gallery on the stock browser (the photos below show the first 100 characters of the data URL being loaded. The goal was to force JPEG, but without the MIME type we cannot know for sure how to fix this. See code below for how the images are being rendered.

How can an image be rendered without the type? Better yet, does anybody know why the type is not available on the stock android browser?

EDIT

Firstly, these are not the same image, they were taken near the same time, and that's not the issue, that's why the data is different (The MIME type doesn't appear on any images on the stock browser, so that's not the problem.

Update

I confirmed that the MIME type is the issue by inserting image/jpeg into the stock browser where it is on chrome. Unfortunately, we have no way of guaranteeing that it's going to be jpeg, so we again really can't do it that way

 _readInputFile: function (file, index) {
            var w = this, o = this.options;
            try {

                var fileReader = new FileReader();

                fileReader.onerror = function (event) {
                    alert(w._translate("There was a problem opening the selected file. For mobile devices, some files created by third-party applications (those that did not ship with the device) may not be standard and cannot be used."))
                    $('#loadingDots').remove();
                    return false;
                }
               fileReader.onload = function (event) {

                var data = event.target.result;
                //alert(data.substring(0,100));
                //var mimeType = data.split(":")[1].split(";")[0];


                alert("Load Image"); //I get to this point
                $('#' + w.disp.idPrefix + 'hiddenImages').append($('<img />', {
                    src: data,
                    id: "dummyImg" + index,
                    load: function(){
                    var width = dummy.width();
                    var height = dummy.height();
                    $('#dummyImg' + index).remove();
                    alert("Render"); // I don't get here
                        var resized = w._resizeAndRenderImage(data, null, null, biOSBugFixRequired, skewRatio, width, height);
                        alert("Image Rendered"); // I don't get here

                    }
                }));
            }
            fileReader.readAsDataURL(file);
        }
        catch (e) {
        }  
 } 

Chrome

Stock Browser

Answer 1

Since the issue is probably browser-related, and you can't really fix the browser(you could report a bug to Google though), I'd suggest taking a different path.

Have a look Here: In Node.js, given a URL, how do I check whether its a jpg/png/gif?

See the comments of the accepted answer, which suggests a method to check the file type using the file stream. I'm pretty sure this would work on browser-implemented Javascript and not only in Node.js.