Uploading an Image to Amazon web service s3

ionic-v1
1

Hi All,

Is anyone Implemented Uploading an Image to Amazon web service s3 using Ionic 2/3 with Angular 2/4
I have tried this much but it’s not working

 public takePicture(sourceType) {
      // Create options for the Camera Dialog
      console.log("takePicture ");
      const options = {
          quality: 100,
          destinationType: this.camera.DestinationType.FILE_URI,
          sourceType: this.camera.PictureSourceType.CAMERA,
          encodingType: this.camera.EncodingType.JPEG,
          targetWidth: 1000,
          targetHeight: 1000,
          saveToPhotoAlbum: false,
          correctOrientation: true
      };

      // Get the data of an image
      this.camera.getPicture(options).then((uri) => {
          const fileTransfer: TransferObject = this.transfer.create();

          var s3URI = encodeURI("https://mybucketname.s3.amazonaws.com/"),
              policyBase64 = "MY_BASE64_ENCODED_POLICY_FILE",
              signature = "MY_BASE64_ENCODED_SIGNATURE",
              awsKey = 'xxxxxxxxxxxxx',
              acl = "public-read";
           

          let options = {
              fileKey: 'file',
              fileName: uri.substr(uri.lastIndexOf('/') + 1),
              chunkedMode: false,
              mimeType: "image/jpeg",
              headers: {
                  Connection: "close"
              },
              params: {
                  metadata: { foo: 'bar' },
                  token: 'xxxxxxxxxxxxxxxxxxxx' //super_secret_token

              }
             
          };

          this.loading.present().then(() => {
              alert(options.fileName);
              let s3UploadUri = 'https://s3-us-west-1.amazonaws.com/mybucketname';
              fileTransfer.upload(uri, s3UploadUri, options).then((data) => {
                  let message;
                  let response = JSON.parse(data.response);
                  if (response['status']) {
                      message = 'Picture uploaded to S3: ' + response['key']
                  } else {
                      message = 'Error Uploading to S3: ' + response['error']
                  }
                  this.loading.dismiss();
                  let toast = this.toastCtrl.create({
                      message: message,
                      duration: 3000
                  });
                  toast.present();
              }, (err) => {
                  this.loading.dismiss();
                  let toast = this.toastCtrl.create({
                      message: "Error",
                      duration: 3000
                  });
                  toast.present();
              });
          });
      });

  }

Please help me to solve, searched max websites still unable to modify the code

forum ionicframework
github
stackoverflow
Ionicframewok forum another

I have accesskey, secrete key and bucket name please tell me how modify above code
Max people looking for answer

2

any solution on this?

3

I tried this code

 public takePicture(sourceType) {
      // Create options for the Camera Dialog
      console.log("takePicture ");
      const options: CameraOptions = {
          quality: 100,
          destinationType: this.camera.DestinationType.FILE_URI,
          sourceType: sourceType,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE,
          targetWidth: 500,
          targetHeight: 500,
          saveToPhotoAlbum: false,
          correctOrientation: true
         
      };

      // Get the data of an image
      this.camera.getPicture(options).then((imagePath) => {
          //add some more code here

  this.s3LocationArray = [
                          { fileName: currentName },
                          { fullPath: filepath },
                          { fileType: fileType }
                      ]

	}

	creds = {
		  bucket: 'taXXXXa',
		  access_key: 'AXXXXXXXXXXXXXXA',
		  secret_key: 'BJXXXXXXXXXXXXXXXXXXXXXXXXXXAD'
	}
		 
	upload () {
	  // Configure The S3 Object 
	  AWS.config.update({ accessKeyId: this.creds.access_key, secretAccessKey: this..creds.secret_key });
	  AWS.config.region = 'us-east-1';
	  var bucket = new AWS.S3({ params: { Bucket: this.creds.bucket } });
	 
	
	    var params = { 
	    	Key: 'foldername/' +this.s3LocationArray[1].fileName , 
	    	ContentType: this.s3LocationArray[3].fileType, 
	    	Body: this.s3LocationArray[2].fullPath,
	    	ACL: "public-read",
	    	ContentEncoding: 'base64',
	    };
	 
	    bucket.putObject(params, function(err, data) {
	      if(err) {
	        // There Was An Error With Your S3 Config
	        console.log(err);
	        return false;
	      }
	      else {
	        // Success
	        alert('Upload Done');
	      }
	    })
	    .on('httpUploadProgress',function(progress) {
	          // Log Progress Information
	          console.log(Math.round(progress.loaded / progress.total * 100) + '% done');
	        });
	  }
	  else {
	    // No File Selected
	    alert('No File Selected');
	  }
	}

Image is uploading but the size is storing in (0 -100)bytes, I am not able veiw the Image so
Could you please help me to solve

4

Hey Sharanagouda,

Did you able to slove the problem?