CODEWITHSUNDEEP
javascripthtmlionic2
Richard
Richard

Reputation: 8955

HTML5 Upload File

I am using Ionic 2, and have created an app that can upload an image using Cordova plugins. This works perfectly on iOS and Android.

I would also like to add the upload functionality to a web browser, but then I do not have access to Cordova plugins. So I think the best way to do so is using HTML5:

<input *ngIf="!isCordova" id="file" type="file" accept="image/*">

This creates an input element as expected:

enter image description here

Question

How do I now process the selected image file?

In Ionic, I do the following, and would like to to the equivalent in javascript for the selected image.

// using the Camera plugin
Camera.getPicture(options).then((imageURI) => {
this.toBase64(imageURI).then((base64Img) => {
                        this.base64Image = base64Img;
                        // process further
                        // ....
});

toBase64(url: string): Promise<string> {
    return new Promise<string>(function (resolve) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onloadend = function () {
                resolve(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.send();
    });
}

resize(base64Img: string, width: number, height: number): string {
    var img = new Image();
    img.src = base64Img;
    var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    return canvas.toDataURL("image/jpeg");
}

As you can see, I need to get a handle on the imageURI. I am not sure how to do so. I try the following:

ionViewDidEnter() {
    this.myInput = document.getElementById('file');
    let that = this;
    this.myInput.addEventListener('change', function() {
        let file: HTMLInputElement = this.files[0];
        console.log(file);
    }, false);
}

This does get a handle on the selected file, but I cannot seem to get the imageURI.

File {name: "SA 02 041.jpg", lastModified: 1227564968000, lastModifiedDate: Tue Nov 25 2008 00:16:08 GMT+0200 (SAST), webkitRelativePath: "", size: 902809…}
lastModified
:
1227564968000
lastModifiedDate
:
Tue Nov 25 2008 00:16:08 GMT+0200 (SAST)
name
:
"SA 02 041.jpg"
size
:
902809
type
:
"image/jpeg"
webkitRelativePath
:
""
__proto__
:
File

I figure I am doing something fundamentally wrong. Any advise appreciated.

Upvotes: 1

Views: 190

Answers (1)

Richard
Richard

Reputation: 8955

Here is an example that works:

ionViewDidEnter() {
    this.myInput = document.getElementById('file');
    let that = this;
    this.myInput.addEventListener('change', function (evt) {
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    console.log(theFile);
                    console.log(e.target.result);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }, false);
}

Upvotes: 1

Related Questions