Download Images using JavaScript 📸

Sapan Bodiwala — Wed, 03 Mar 2021 00:00:00 +0000

Let's say you're trying to add a feature to your site or app to allow users to download an image upon clicking a button. Should be pretty straight forward right? I thought so myself as I needed to add this feature when building an internal media library tool at Discovery.

I tried adding this feature by just adding the download attribute to an anchor tag and setting the href attribute to the image url (cross-origin url).

<a href='URL_HERE' download>Download image</a>

Turns out that Chrome started ignoring download attributes that pointed to cross origin urls.

To solve this, we'll take advantage of the browser built in fetch method. You'll need to add an event listener to the element that you want to trigger the image download and call the below function:

// Using fetch
async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const imageBlog = await image.blob()
  const imageURL = URL.createObjectURL(imageBlog)

  const link = document.createElement('a')
  link.href = imageURL
  link.download = 'image file name here'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

The imageSrc function parameter represents the cross origin image url.

First, we use fetch to get the ReadableStream data of the image
Next, we call the blob method provided by fetch to get the raw image data
Third, we use the URL Web API to call the createObjectURL static method to create a URL that represents the image's download URL
Finally, an anchor element is created to set the new url to the href attribute. You can also set the name of the file by setting the download attribute of the anchor element. Last, we append the anchor element we created to the DOM and trigger a click to download the image and then quickly remove the anchor from the document.

And there you go! You now have the ability to download images on the trigger of a function!

I hope this helped and was useful for you!

This post can also be found at sapanbodiwala.com/blog

Deploying to AWS Amplify 🔊

Sapan Bodiwala — Thu, 28 Jan 2021 00:00:00 +0000

If you're trying to deploy your front-end app to AWS using their Amplify service, but your builds keep failing, you've come to the right place. I struggled trying to get this to work with no clear documentation from AWS explaining how to set up deployments from a private repository.

After several stackoverflow searches and contacting AWS, I decided to write this blog post to help others solve their deployment issues. The steps explained below are written as if you were starting from scratch.

Step 1

Login to your AWS Management console. Then navigate over to the AWS Amplify service. Next, click on the New app dropdown button and select Host web app.

Step 2

Select your repository host provider (in my case I was using Bitbucket) and then click the Continue button.

Step 3

Authenticate with your repository host provider. Once authenticated, select the repo / app that you would like to deploy in the dropdown under Recently updated repositories. If you don't see your repo listed, you'll likely need Admin access or you'll need to push changes to the app. Then select the branch you would like to get deployed each time you push a change to that branch. Click on the Next button.

Step 4

You should now see Configure build settings at the top. Feel free to update the application name at the top if you'd like. Then, we'll need to update the list of commands under preBuild in the Build and test settings section.

We'll want to add the these two lines before "- yarn install"

eval "$(ssh-agent -s)"
ssh-add <(echo "$DEPLOYMENT_KEY" | base64 -d)

We're adding the two lines above to tell AWS Amplify to use the ssh-agent to evaluate our ssh key that we will add below.

So your file should look like the following:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - eval "$(ssh-agent -s)"
        - ssh-add <(echo "$DEPLOYMENT_KEY" | base64 -d)
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: /
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Note: It's important to double check your build to see what the output directory is and update the baseDirectory property above as needed

Next, you'll want to click on the Advanced settings dropdown.

Under environment variables, you'll want to add an environment variable for DEPLOYMENT_KEY, which we added to the build configuration above. Now that you've entered in DEPLOYMENT_KEY in the Key field, let's move onto the next step to get the value.

Step 5

We'll need to generate an SSH key for both Amplify and your repository provider.

First, create the SSH key pair without a password by running the following command in your terminal:

ssh-keygen -f DEPLOYMENT_KEY -N ""

Second, we'll need to base64 encode the SSH key and copy the output into the value field for our DEPLOYMENT_KEY environment variable in the Amplify Console:

cat DEPLOYMENT_KEY | base64 | tr -d n

Last, we'll need to add the contents of the DEPLOYMENT_KEY.pub to the access keys of the private repository that you want to deploy. This will vary based on the repository provider. You should be able to find how to add the public key to your repository provider in the settings of either the repo or your account settings.

After adding the private key to the value field in the environment variable settings and adding the public key to your repository provider, click on the Next button and then Save and deploy. Your first build will now begin 🥳.

Conclusion

Congrats on deploying to AWS Amplify! I hope that worked for you! Please reach out if you run into any issues along the way!

This post can also be found at sapanbodiwala.com

DEV Community: Sapan Bodiwala