Week 3: Download it!

[counselorbot[bot]]

Week 3 Step 5 ⬤⬤⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 10-20 minutes

Download it!

This week, you will be going through steps to create an HTTP Trigger that takes parameter inputs and returns a download link for the given image.

✅ Task:

• [x] 1: Create an HTTP Trigger Function named bunnimage-download that takes in "username" from the header
  • [x] Have the function query for image with the correct associated username from blob storage using node-fetch
  • [x] Have the function return an image download link in an attribute named downloadUri.
• [x] 2: Place your new HTTP Trigger function secret in the repository named BUNNIMAGE_ENDPOINT2
• [x] 3: Commit your new HTTP Trigger function code in bunnimage-download/index.js on the bunnimage branch
• [x] 4: Create a pull request to merge bunnimage onto main, and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, use Postman to send a GET request with a "username" in the header. You should see a response similar to the below:

:bulb: The username value should be the name of an image you have already uploaded to the blob storage. Do it fast, or your timer trigger will delete it!

{
  "body" : {
     "downloadUri" : "https://<YOUR_STORAGE_ACCOUNT_NAME>.blob.core.windows.net/images/<USERNAME>.png",
     "success": true
  }
}

💡 Yay! This means you successfully fetched a download link to your image.

❓ How do I add "username" to the header?

Click on the headers tab below the request URL. 

---

1: Modifying your Function

In our module.exports function, we'll want to:

1. Use the node-fetch package we installed earlier this week to determine if the requested image is available.

2. Use if-else statements to determine the success of the retrieval. Remember to test for both jpeg and png extentions!

3. Send back a JSON object containing the download link.

❓ How do I use fetch to test extensions?

Outside of the main function, you'll first want to create a variable called `fetch` that calls your `node-fetch` package: `const fetch = require("node-fetch");`. Then, within your main function, you'll need to create references to your username as well as variables for `download`, `downloadpng`, and `downloadjpg`. Since we don't know whether the image is a png or jpeg file, we need to test for both. ```js const username = req.headers['username']; let download = "" let downloadpng = "https://.blob.core.windows.net/images/" + username + ".png"; let downloadjpg = "https://.blob.core.windows.net/images/" + username + ".jpeg"; ``` To attempt to download the image, call `fetch` asynchronously. This way, we can test all possible links to the image and determine which one works. ```js let pngresp = await fetch(downloadpng, { method: 'GET', }) let pngdata = await pngresp; let jpgresp = await fetch(downloadjpg, { method: 'GET', }) let jpgdata = await jpgresp; ```

❓ How do I determine the right image link?

Your data will contain an attribute "status text" that lets you know if a blob doesn't exist. To use these to our advantage, we can create if-else statements that notify us if our `fetch` method was successful. ```js if (pngdata.statusText == "The specified blob does not exist." && jpgdata.statusText == "The specified blob does not exist." ) { success = false; context.log("Does not exist: " + pngdata) context.log("Does not exist: " + jpgdata) } else if (pngdata.statusText != "The specified blob does not exist.") { success = true; download = downloadpng context.log("Does exist: " + pngdata) } else if (jpgdata.statusText != "The specified blob does not exist.") { success = true; download = downloadjpg context.log("Does exist: " + jpgdata) } ```

❓ How do I return the download link?

To return the download link, just set `context.res` to a JSON object with your download link. ```js context.res = { body: { "downloadUri" : download, "success": success, } }; context.log(download); context.done(); ```

📹 Walkthrough Video

[counselorbot[bot]]

⏰ Time to merge!

Go ahead and merge this branch to main to move on. Great work finishing this section!

⚠️ If you receive a Conflicts error, simply press Resolve conflicts and you should be good to merge!

[counselorbot[bot]]

🐰 Bunnimage: Complete!

Hop on over to the next issue.