How to upload image from url to Amazon S3 in Angular5

Question

I want to upload images from url to my Amazon S3 buctkett.

I can upload with the following code, but the result is the url, not the image...

In my Angular5 controller :

import { AwsService } from '../../services/aws.service';
...
@Injectable()
export class MyClass {
  constructor(
    private aws: AwsService,
  ) {}

  sendimg() {
    var imgurl = 'https://www.google.be/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
    const allparams = {
      Body: imgurl,
      Key: place_id + 'logo.png',
      ContentType: 'png',
      ACL: 'public-read'
    };
    this.aws.s3upload(allparams, 'mybuckett');
  }
}

In aws.service.ts :

import { S3 } from 'aws-sdk';
import { Config } from '../app/config';
...
@Injectable()
export class AwsService {
  s3upload(allparams, bucket) {
    var AWS = require('aws-sdk');
    AWS.config.update({
      accessKeyId: Config.AWS.accessKeyId,
      secretAccessKey: Config.AWS.secretAccessKey,
      region: Config.AWS.region
    });
    var s3 = new AWS.S3({
      params: { Bucket: bucket}
    });
    s3.upload(allparams, function (err, data) {
      if (err) {
        alert(err);
      }
    });
  }
}

Is it possible to do this directly? Or should I download first the file from the URL and then upload it to my S3 buckett ?

How can I do that ?

Answer 1

You can do it on the client itself directly using the aws sdk, however its not the recommended way to do so since it has security flaws.

I recommend you to write a server method to get your file and upload to s3.