
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](https://www.discovery.com/).

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](https://developers.google.com/web/updates/2018/02/chrome-65-deprecations#block_cross-origin_a_download) 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.

1. First, we use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to get the _ReadableStream_ data of the image
2. Next, we call the [blob](https://developer.mozilla.org/en-US/docs/Web/API/Body/blob) method provided by **fetch** to get the raw image data
3. Third, we use the **URL Web API** to call the [createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) static method to create a URL that represents the image's download URL
4. 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!


How to download images programmatically using JavaScript

Download Images using JavaScript 📸


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](https://github.com/aws-amplify/amplify-console/issues/157) 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.

1. Create the SSH key pair without a password by running the following command in your terminal:

```
ssh-keygen -f DEPLOYMENT_KEY -N ""
```

2. Next, 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
```

3. 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!


How to deploy your front-end web app from a private repo using AWS Amplify

Blog

Download Images using JavaScript 📸

Deploying to AWS Amplify 🔊