Image taken from camera not saved to gallery

Question

I'm implementing a simple image upload form. When on the phone the user has the option of taking a photo with the camera and uploading it.

For some reason, the picture taken this way is not saved to the gallery.

Is there anything missing in the HTML declaration to enable the picture to be saved to gallery irregardles of whether it is discarded or used?

This is my form(in Angular):

<ng-container *ngFor="let image of imageList; let i = index;">
    <div class="mb-1" fxLayoutAlign.gt-xs="space-between" fxLayoutGap.xs="10px" fxLayout.xs="column">
        <input type="file" accept="image/*" [disabled]="image.hasOwnProperty('Id') && image?.Id" (change)="showPreview($event, img, i)" #input/>
        <img [src]="image?.url" alt="" #img class="image-limited" />
        <p *ngIf="image?.url !== ''" fxLayoutAlign.xs="center center">{{ image?.hasOwnProperty('name') ? image?.name : (form.get('AssetNumber').value || '') + '_' + (i + 1) }}</p>
        <button md-raised-button color="accent" class="delete-button" (click)="clearImage(input, img, $event, i)" [disabled]="image?.url === ''">
            <i class="fa fa-remove"></i> {{ 'ADD_EDIT_ASSET_IMAGE_DELETE_BUTTON_TEXT' | translate }}
        </button>
    </div>
    <hr class="mb-1" *ngIf="i !== imageList.length - 1" />
</ng-container>

This method gets called on change of the input:

showPreview(event: { target: { files: FileList, value: string } }, element: HTMLImageElement, imageIndex: number): void {
        ImageCompression.compress(event.target.files[0], this.configurationService.previewQuality)
            .then((res: File) => {
                const imageUrl: string = URL.createObjectURL(res);
                this.imageList[imageIndex].url = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
                this.renderer.setAttribute(element, 'src', imageUrl);
            });
    }

Answer 1

TL;DR: Is not the expected behaviour.

---

When you take input a file in a web page, the user doesn't expect the image to be saved. They expect the image to be upload to the page, and maybe to the server.

An installed app has permissions and memory space assigned to it. It is expected that the app would save an image. A web page is not an App installed in the phone, it has no memory assigned and doesn't have permissions. Users will get mad if a web page suddenly starts to save images in their memory without ther permission.

Having said that, you sure can take a photo and then download it to the memory of the phone. But the user will see it as it, as a download.

But there's a problem: you don't control where the photo is coming from. The user might select the file picker and input an already saved image, if you download it without asking then the user might have duplicate files in their memory. That would drive me crazy for sure.

Asking the user if they want it to be downloaded will be better. That behaviour ensures consistency in the page seen in a desktop or mobile. But again, you don't control where the images are going to be saved or if the images will get downloaded for sure. If you need the images for later, you need the user to select those images and input them as usually.

Answer 2

Referring to this article i've made some code, tested and working pretty well.

Code main function is capture function, which gets 2d context, and then pushes image to array you are iterating by in view of your component. I am pretty sure you will be able to adjust this solution to your needs :D

some code from some.component.ts looks like

public capture() {
    const context = this.canvas.nativeElement.getContext('2d').drawImage(this.video.nativeElement, 0, 0, 640, 480);
    this.captures.push(this.canvas.nativeElement.toDataURL('image/png'));
}

and some.component.html looks like

<div id="app">
    <div><video #video id="video" width="640" height="480" autoplay></video></div>
    <div><button id="snap" (click)="capture()">Snap Photo</button></div>
    <canvas #canvas id="canvas" width="640" height="480"></canvas>
    <ul>
        <li *ngFor="let c of captures">
            <img src="{{ c }}" height="50" />
        </li>
    </ul>
</div>