@frankhoodbs/aws-media-helper

AWS media helper

This utility provides methods used to perform aws media uploads correctly.

in order to obtain an AWSInfoObject its necessary to call an API service that will change based on the backend of the project. The said API must be ready to respond with the following standard structure.

interface AWSInfoObject {
  link: string;
  data: AWSData;
}
interface AWSData {
  acl: string;
  'Content-Type': string;
  key: string;
  'x-amz-algorithm': string;
  'x-amz-credential': string;
  'x-amz-date': string;
  policy: string;
  'x-amz-signature': string;
}

AWS PROCEDURE FOR IMAGE UPLOADING:

• do an http GET request to you server to get the AWSInfoObject
• call getAwsUploadUrlAndPayload from this utilty to get the {url,payload} object
• do the POST request using the given url and payload
• extract location link using extractAwsLocation
• send back location link to you server in order to get the signed location link
• use the signed location link as an image source and display your image

HOW TO TEST YOUR AWS BUCKET WITH THIS DEMO:

• copy the env_template.json file and rename it as env.json
• call your api with an HTTP GET request to get your AWSInfoObject (you need those credentials first)
• copy and paste your credentials into the env.json file
• run the local node server in the /aws-media-helper/node-server folder with the command node server.js
• run this app with nvm use then yarn and finally yarn dev
• open your browser at the given localhost port
• click on generate IMAGE (will be randomly selected from a lorem picsum pool)
• click on Send to aws
• in case of error during the upload , the status code will be shown (usually a 403 error means the credentials are expired)
• in case the upload is successful, the UNSIGNED location link will be shown

The location link needs the signature to view the image directly from the AWS bucket, since those buckets are private.

API

getAwsUploadUrlAndPayload(AWSInfoObject: AWSInfoObject, base64:string)

Builds the payload for AWS and gives back said payload, and the url to execute the POST request

Parameters:

• AWSInfoObject (AWSInfoObject): The object containig all the AWS info, given from the server.
• base64 (string): The Base64 value rapresenting an image.

Returns:

• { url, payload } (JSON Object): JSON object with url and payload properties

extractAwsLocation(AWSResponseObject)

Extract the aws location URL from the aws response object.

Parameters:

• AWSResponseObject (any): the object retrieved from the aws response

Returns:

• AWSResponseObjectLOCATION (string): signed URL that points to the media stored o the aws service.

API Exposed internal utlities

getImageFormatFromBase64(base64: string)

extract image format from base64 string.

Parameters:

• base64 (string): The Base64 value rapresenting an image.

Returns:

• format (string): string rapresenting image format.

buildAwsFormdata(base64: string, AWSInfoObject: AWSInfoObject, imagetype: string)

builds the FormData object for the aws upload.

Parameters:

• base64 (string): The Base64 value rapresenting an image.
• AWSInfoObject (AWSInfoObject): The object containig all the AWS info, given from the server.
• imagetype (string): image format.

Returns:

• FormData (FormData): FormData object to be sent as payload to aws.

EXAMPLE USAGE

async function sendToAWS() {
  let AwsInfo: AWSInfoObject = {...};
  let AWSLocation, errorCode;

  // GET your credential from the server
  const urltoGetConfig = new URL("http://localhost:5000/aws")
  AwsInfo = await fetch(urltoGetConfig).then(response => response.json());
  console.log('AwsInfo - object retrieved from configuration',AwsInfo)

  // Generate payload and url
  const AWSUrlAdPayload = getAwsUploadUrlAndPayload(AwsInfo, foo.value.imageB64);

  // do the POST request to AWS
  const AWSResponse = await fetch(AWSUrlAdPayload.url, { method: 'post', body: AWSUrlAdPayload.payload });
  console.log('AWSResponse', AWSResponse)

  // Handle response as you need
  if (AWSResponse.ok) {
    // extract location
    AWSLocation = extractAwsLocation(AWSResponse)
  } else {
    errorCode = AWSResponse.status;
  }
}

Screenshots

---

---

---