Authentication, Uploading of images to Azure Blob storage and creating thumbnails

Question

I have a few requirements for an angular application:

1. I want to upload large images to Azure. I believe Azure Blob is the right storage medium for that. Is there any Azure SDK API calls that I can make from the Angular app to do that?
2. After the image is uploaded, I want to create thumbnails of those images immediately. Is there a trigger in Blob which can help to create thumbnails? Or should I use some service like ESB to do that?
3. I also want to store a few lines of description of those images. Can I do that with Blob?
4. I want to add authentication to the API call so no one will misuse and upload junk files to the storage. Where the secret can be stored in the browser so no one can have access but only the angular application? Cookies may not be a safe place to keep the secret.

Answer 1

@Wonderful World Firstly, Apologies for the delay response here!

Welcome to Microsoft Q&A Forum, Thank you for posting your query here!

• I want to upload large images to Azure. I believe Azure Blob is the right storage medium for that. Is there any Azure SDK API calls that I can make from the Angular app to do that?

You can leverage the below samples:
https://github.com/nitin27may/azure-blob-upload-nodejs

https://learn.microsoft.com/en-us/azure/storage/common/storage-samples-javascript?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json

• After the image is uploaded, I want to create thumbnails of those images immediately. Is there a trigger in Blob which can help to create thumbnails? Or should I use some service like ESB to do that?
  There is no Built-in feature to create thumbnail for uploaded blob. You need to write a Azure Function with Blob Trigger:
  https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-storage-blob-trigger?tabs=python-v2%2Cin-process&pivots=programming-language-csharp

1. I also want to store a few lines of description of those images. Can I do that with Blob?
   The Blob properties doesn't have the property where you can add a description. So You can try to add it as a user -defined  metadata. https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-properties-metadata
2. I also want to store a few lines of description of those images. Can I do that with Blob?
   The Blob properties doesn't have the property where you can add a description. So You can try to add it as a user -defined  metadata. https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-properties-metadata

• I want to add authentication to the API call so no one will misuse and upload junk files to the storage. Where the secret can be stored in the browser so no one can have access but only the angular application? Cookies may not be a safe place to keep the secret.
  There are multiple ways you can authorize the request for the data access. Please refer this: https://learn.microsoft.com/en-us/azure/storage/common/authorize-data-access

Please let us know if you have any further queries. I’m happy to assist you further.

---

Please do not forget to "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.