Week 4: Downloading your image!

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

Downloading your image!

Demo: 🐰

Write and connect a JS file to make a GET request to the download Azure function that includes the codename to receive the link. Edit the button on the HTML page so that it downloads the file when clicked.

✅ Task:

[ ] 1: Make sure you're on the bunnimage-frontend branch
[ ] 2: Add an attribute of id with the value button1 onto the upload button
[ ] 3: Create a new input field with an id of downloadusername and create a button with an id of button2 that calls the function downloadImage() in index.html
[ ] 4: Create the downloadImage() function with a await fetch GET request to send downloadusername to your Bunnimage Azure Function to return the file download uri
[ ] 5: If the fetch was successful, open the file download link using window.open() and make sure it replaces the page instead of opening a new tab.
[ ] 6: Commit your updated code to bunnimage/index.html and bunnimage/script.js
[ ] 7: Create a pull request to merge bunnimage-frontend onto main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Open up your LiveServer plugin and start your local server. To test your web app:

⚠️ Type in the username for an image you have uploaded previously. Does the download button link to your file?

1: Opening a link

window.open() is fairly straightforward to use. Here's the syntax:

window.open(URL, name, specs, replace)

⭐ We will only be using URL and name. Use this documentation to fill it in.

saniazkhaja / Intro-To-Serverless