/ academy

How to upload photos to Amazon S3 bucket using API? (Javascript example)

Starting from 0.5.3Picpipe allows you to use Amazon S3 as a storage for your screenshots and photos. Picpipe will upload every screenshot and photo automatically to S3 and put link, HTML or Markdown to your clipboard.

In this tutorial, I'll show you how to set up a new Amazon S3 collection.

Create Amazon S3 Bucket.

If you don't have a bucket, go to your AWS console and find S3 in the services.
Find S3 service in amazon services

Next you will need to create a new bucket.
Create new amazon s3 bucket

Follow the wizard and leave all the settings as is.

Generate Credentials

You need to provide Picpipe with accessKeyId and secretAccessKey.
Follow this link to create new credentials.
https://console.aws.amazon.com/iam/home?#/security_credential

Amazon create new credentials

Hit Create New Access Key

That's it! Now you can create a new folder by clicking New Folder button and fill up the form with the credentials.

Make sure you fill the region and bucket fields. region will usually have a format like that: us-west-2
Collection Settings for amazon s3

Javascript Example

const amazon = require('s3-bucket');
const mime = require('mime-types');

async function(file, stngs, callback) {
  // In a case you store images and you want it be previewed it the browser
  // (instead of downloading) you are required
  // to define content type fo the S3 object.
  // See below how I use it.
  const type = mime.lookup(file.path);
  console.log(file)

  const credentials = {
    accessKeyId: '<use yours>',
    secretAccessKey: '<use yours>'
  }
  amazon.updateCredentials(credentials);
  amazon.updateRegion(region);
  amazon.updateBucketName(bucket);

  try {
    const res = await amazon.uploadFile({
      filePath: file.path,
      Key: `${folder}/${file.name}`, // it is able to organize image by folder
      ContentType: type
    });
    console.log(res)
  } catch(error) {
    console.log(error);
  }
}

Don't have Picpipe? Download if from here: https://picpipe.io.
And start saving a bunch of time on image optimization for tutorials, documentation and any kind of content related to photos and screenshots.