>> Hey there. My name is Alberto.
In this video, I'm going to show you how to upload
images to Azure Blob storage directly from your browser.
What is the scenario that we're trying to solve?
You just move to the Cloud and you're using
Blob storage to scale your application requirements.
You need to start allowing your users
to upload images directly to Azure Blob Storage.
The problem is that you cannot
share your account key with your users.
That will create a huge security problem for your company,
but luckily, there is a solution.
Azure supports a Shared Access Signature keys
that you can create to grant limited access to your users,
to either your containers or your blobs in
Azure Blob Storage so you don't need
to share your account key with them.
This way, we are not going to do it
because we need to share the key. How do we solve it?
To generate sasKeys, we are going to use
an Azure Functions sitting in between our Static Web App,
Blob Storage, and this Azure Function is
going to generate these keys that I just mentioned.
Imagine that you are on a ski trip.
You went skiing to the mountain and you
need to take the lift up the mountain.
They are not going to give you the master
key from the operator working at the ski lift.
They're going to give you a onetime pass that you can use
to go and take your ski trip. This is the same.
The Azure Functions is going to generate
that sasKey so your user can
do the image upload. Let's see the code.
Here in my web page,
in my HTML, I will have that.
I will call the API credentials,
which in this case is just the Azure Functions.
This Azure function will return the sasKey and the URL.
The Azure Function is very simple,
it's only calling this generateSASToken function
where the sasKey is being created.
How does that work?
Let's say you want to say that
your SAS keys can only last two hours,
so the user has two hours to upload the image.
In this case, we specify this as the expire for the sasKey.
Also, we can provide permission.
We can say this person can only upload to containers or to blobs,
and you can decide in
a fine grain detail where they can put their images.
Finally, we have the shared key credential.
This shared key is a string that once the user does a request,
it will be validated against your account key.
You don't share your account key,
but we do share this share key credential that,
again, is validated against your account key.
Well, finally back to the HTML,
the file we'll call blobUpload with your file,
the file that we're trying to upload to Azure Blob Storage,
and the URL, and the sasKey that we received from API credentials.
The Blob uploads function,
the only thing that it's doing is generating
this login URL that has SAS query parameters.
The container where you want to place the image,
the name of this image and this whole sasKey that we built so
the request is authenticated when it reaches Azure Blob Storage.
Again, we do not share our account keys,
we generate sasKeys, the single access key
for the Static Web App to be able to upload to Blob Storage.
If you want to learn more,
here are two resources for you.
The first one is a documentation about sasKey
directly on Azure docs,
and the second one is an article
that I wrote detailing all these process.
You can follow it step-by-step, see the code,
copy the code and use it in your application.
Happy coding and thanks for watching.
[MUSIC]