Unable to upload Nativescript images to S3

Question

I have a nativescript-vue application where I want to take a camera taken image and upload to my S3 bucket.

I installed the plugin:

tns plugin add nativescript-aws-sdk

I have in my app.js:

import { S3 } from "nativescript-aws-sdk/s3";  
S3.init({ endPoint: '/images/person', accessKey: config.AWS_ACCESS_KEY, secretKey: config.AWS_SECRET_KEY, type: 'static' });
Vue.use(S3);

then in my function to upload an image:

uploadPicture() {

console.log('uploadPicture called..');
const s = new S3();
console.log('S3 inited..' + JSON.stringify(s));

But this results in:

CONSOLE LOG file:///node_modules/@nativescript/core/image-source/image-source.js:331:16: 'fromNativeSource() is deprecated. Use ImageSource constructor instead.'
CONSOLE LOG file:///app/components/Photo.vue:303:0: 'uploadPicture called..'
CONSOLE LOG file:///app/components/Photo.vue:304:0: 'S3 const..undefined'

So there is something with the S3.init() that is causing an error. I do not see many examples of this plugin online so either nobody has issues with it or its not being used?

Anyone who can see what I am doing wrong, can you kindly point me in the right direction?

Update: Moved the import from vue file to app.js:

 import { S3 } from "nativescript-aws-sdk/s3";  
 S3.init({ endPoint: '/images/person', accessKey: config.AWS_ACCESS_KEY, secretKey: config.AWS_SECRET_KEY, type: 'static' });

And in my Vue file:

import { S3 } from 'nativescript-aws-sdk/s3';
const s3 = new S3();



const imageUploaderId = s3.createUpload({
      file: that.cameraImage,
      bucketName: config.AWS_BUCKET_NAME,
      key: `ns_${isIOS ? 'ios' : 'android'}`+fileName,
      acl: 'public-read',
      completed: (error, success) => {
         if (error) {
            console.log(`S3 Download Failed :-> ${error.message}`);
         }
         if (success) {
            console.log(`S3 Download Complete :-> ${success.path}`);
         }
      },
      progress: progress => {
         console.log(`Progress : ${progress.value}`);
      }
      }).catch((err) => {
          console.error("createUpload() caught error: " + JSON.stringify(err));
      });

s3.pause(imageUploaderId);
s3.resume(imageUploaderId);
s3.cancel(imageUploaderId);

But nothing seems to happen - no errors or progress.

Answer 1

You've declared S3 twice, once globally:

import S3 from "nativescript-aws-sdk/s3";

and I'm guessing a local version inside the uploadPicture() method:

const S3 = require('nativescript-aws-sdk/s3').S3;

The import S3 has to do the init, not the later as per: https://market.nativescript.org/plugins/nativescript-aws-sdk