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 {
        ImageCompressionpress(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);
            });
    }

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.press(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);
            });
    }

• javascript
• angular
• html
• android-camera
• media

• Try doing the same thing with a text message. You'll get the same result - the image does not get saved to the gallery, only to the text message. Same with the Memo or Notes app. Do you have any reason to believe that your app running in a browser will behave differently to the way the phone behaves the rest of the time? (I sure dont!) – enhzflep Commented Jul 10, 2018 at 4:53
• can you provide us the ponent.ts related to the HTML? – KLTR Commented Jul 12, 2018 at 13:17
• @KLTR Added the code. – EldarGranulo Commented Jul 12, 2018 at 13:59

3 Answers 3

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 ing 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.

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 ponent. I am pretty sure you will be able to adjust this solution to your needs :D

some code from some.ponent.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.ponent.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>

Maybe it's related with the permissions, this one allows to storage, meanwhile CAMERA one probably only allows to use it:

https://developer.android./reference/android/Manifest.permission#WRITE_EXTERNAL_STORAGE

What is your permissions list?

(Probably it's not related, but just in case!)