CODEWITHSUNDEEP
angularamazon-web-servicesamazon-s3downloadionic4
Ber Tsacianegu del Tepuy
Ber Tsacianegu del Tepuy

Reputation: 381

How to download image from AWS repository using Angular-Ionic

I'm trying the following: I need to download an image, but for downloading it I need to get an url from backend. That url is from the AWS repository where the image is stored.

My backend (made with Laravel) works properly, but my problem is trying to download the image from my angular-ionic app.

My code is as follows:

clinic-test.page.ts:

import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ClinicTestService} from '../../../../providers/services/api/clinic-test.service';
import {ClinicTest} from '../../../../models/ClinicTest';

@Component({
    selector: 'app-clinic-test',
    templateUrl: './clinic-test.page.html',
    styleUrls: ['./clinic-test.page.scss'],
})
export class ClinicTestPage {
    clinicTest: ClinicTest;
    clinicTestFileUrl: string;

    constructor(private activatedRoute: ActivatedRoute,
                private clinicTestService: ClinicTestService) {
    }

    ionViewWillEnter() {
        const clinicTestId = this.activatedRoute.snapshot.paramMap.get('test-id');
        this.clinicTestService.getClinicTest(clinicTestId).subscribe(
            clinicTest => this.clinicTest = clinicTest
        );
    }

    getClinicTestFile() {
        this.clinicTestService.getClinicTestFile().subscribe(
            clinicTestFileUrl => this.clinicTestFileUrl = clinicTestFileUrl
        );
    }
}

My getClinicTestFile() function calls another function called the same in my clinic-test.service.ts as follows:

getClinicTestFile() {
  const urlMock = `${this.baseUrl}/${MOCK_CLINIC_TEST_ID}/{s3_clinic_file_id}/download`;

  return this.httpClient.get(urlMock, {responseType: 'text'});
}

It always returns the same test url ('https://sghvr.s3.us-east-2.amazonaws.com/aATecub3Epkwu1AcDGVgHIcWi1SrZCW9wkYtkTJU'). I have tested that url on Postman and I can see the image.

In my html code I have the following:

<ion-content>
    <ion-grid class="ion-no-padding">
        <ion-row>
            <ion-col offset-md="3" size-md="6">
                <ion-button (click)="getClinicTestFile()">Descarga Imagen</ion-button>
            </ion-col>
        </ion-row>
        <br>
        <ion-img src="{{clinicTestFileUrl}}"></ion-img>
        <br>
        <ion-row>
            <ion-col offset-md="3" size-md="6">
                <ion-label>
                    <h1><b>Paciente: </b>{{clinicTest?.patient.user.name}} {{clinicTest?.patient.user.surname}}</h1>
                    <br>
                </ion-label>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

In the code above I'm trying to show the image on element.

Well, when I click on the button to download the image element gets the test url properly on src, but I'm having the following error on my Console:

GET https://sghvr.s3.us-east-2.amazonaws.com/aATecub3Epkwu1AcDGVgHIcWi1SrZCW9wkYtkTJU 403 (Forbidden)

Well, I need help in these 2 points:

Sorry to ask these simple questions, but Im not so used to Angular-Ionic yet.

Any hint is welcome!

Thank you!

Upvotes: 0

Views: 1388

Answers (1)

Maihan Nijat
Maihan Nijat

Reputation: 9355

why do I'm having that error on my console?

The error is clear which says you don't have access to the file. You would see "Access denied" if you access the URL directly. Use the access keys you have to download the file or make it public. It depends on your requirements but one thing is crucial to understand. The access key on the FRONT-END is available for all users which is a security flaw. What you need is to use your BACK-END. Get the image in LARAVEL using your access key and send it back to your FRONT-END.

For downloading an image: Add download attribute to your link:

<a href="link_of_the_image" target="_self" download>Download</a>

The attribute downloads the linked file instead of navigating to it. See the browser support here: https://www.w3schools.com/tags/att_a_download.asp

Upvotes: 1

Related Questions