How do I properly configure photo file to match fo

Question

I have an existing web service that handles user input of a photo (as well as some other number and text data). The photo is captured via the input tag:

<input type="file" id="image-input-solo" accept="image/*" capture="capture" />

In the javascript I grab the image via the Files API like so:

$('#image-input-solo').on('change', function() {
    window.__file = this.files[0];
});

// which gives me a File Object like this:
File {
    lastModified: 1507749812264
    lastModifiedDate: Wed Oct 11 2017 12:23:32 GMT-0700 (PDT) {}
    name: "image000987u.jpg"
    size: 441738
    type: "image/jpeg"
    webkitRelativePath: ""
    __proto__: File
}

So in my native app context (using Cordova and the Camera Plugin) I am successfully grabbing the photo file:

//HTML
<div id="button-drink-it-now" ng-click="nativeCamera();">

// JAVASCRIPT
$scope.nativeCamera = function() {
    if (!navigator.camera) {
        alert("Camera API not supported", "Error");
        return;
    }
    var options =   {   quality: 100,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: 1,          // 0:Photo Library, 1=Camera, 2=Saved Album
                    encodingType: 0      // 0=JPG 1=PNG
                };

    navigator.camera.getPicture(
        function(imgData) {
            var fd = new FormData();
            var reader;
            var imgBlob;
            window.resolveLocalFileSystemURL(imgData, function(fileEntry) {
                fileEntry.file(function(file) {
                    reader = new FileReader();
                        reader.onloadend = function(e) {
                            imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                            fd.append('attachment', imgBlob);
                            window.__file = imgBlob; // MY ATTEMPT TO GET THE IMAGE IN THE CORRECT WAY
                        };
                        reader.readAsArrayBuffer(file);
                 }, function(e){
                    console.log('error with photo file');
                 });
            }, function(e){
                console.log('error with photo file');
            });
        },
        function() {
            alert('Error taking picture', 'Error');
        },
        options);
};

// THE OBJECT I GET FORM THE imgBlob:
Blob {
    size: 6268043
    type: "image/jpeg"
}

My question is, how can I get the photo file from the native camera and format it into the same File Object as I get from the HTML input, this.files[0] so I can continue using my existing web service to store the photo?

Answer 1

Turns out it was a simple fix:

navigator.camera.getPicture(
    function(imgData) {
        var fd = new FormData();
        var reader;
        var imgBlob;
        window.resolveLocalFileSystemURL(imgData, function(fileEntry) {
            fileEntry.file(function(file) {
                reader = new FileReader();
                    reader.onloadend = function(e) {
                        imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                        window.__file = imgBlob; // PLACE THE FILE ASSIGNMENT HERE AFTER THE READER HAS INGESTED THE FILE BYTES
                    };
                    reader.readAsArrayBuffer(file);
                    // window.__file = imgBlob; // FILE ASSIGNMENT USED TO BE HERE
             }, function(e){
                console.log('error with photo file');
             });
        }, function(e){
            console.log('error with photo file');
        });
    },
    function() {
        alert('Error taking picture', 'Error');
    },
    options);
};