Join Michael Lehman for an in-depth discussion in this video Cloud Notes app: Uploading blobs to save our images, part of Using Windows Azure with Windows Store Apps.
Alright. We've modified our Notes Model to have our simulated Camera Get Random Picture File Mechanism. We've modified our Notes Model to have a place to put the Path. It's time to upload our picture to the Windows Azure Blob storage. So, just like we have a Cloud Table Client, and we have a Cloud Table. We need to add some Blob variables here for connecting to Blob Storage. So first we have to have a Blob Client. So we'll do private CloudBlobClient blobClient.
And Cloud Blob Client is not in our namespace's yet so we'll resolve that by using Microsoft.WindowsAzure.Storage.Blob. And, we need to get access to the Blob Container, where we can upload our Blob to. So, private CloudBlobContainer blobContainer. And now we need to go initialize those values. So we'll come down to our handy-dandy Connect to Azure. And just like we initialized the table client and got a table reference, what we're going to do here is we're going to Initialize our blob client from our account.
And we're going to initialize our blob container using GetContainerReference, and we have to name our container. Now, our Blob container has to have specific rules that Microsoft has specified for Blob containers. And that implies that you have to have lower case letters and numbers. So we're going to call our container, Container one. And now we have to do an await blobContainer.CreateIfNotExistsAsync. Alright, before we run this, let's go take a look at our Server Explorer.
We can see under Windows Azure> Storage > Development > Blobs. We've got no triangle, cause we have no Blob Containers on our Local Storage Emulator Service. And when we run this, we're going to go create Container one. So let's go ahead and save this, and give this a shot. And just by running it that should go ahead and create Container one. So we'll stop, stop Visual Studio, bring back Server Explorer, right-click here on Blobs and say refresh. Now you see we've got our triangle, and there's Container one. We open that up by double clicking.
You can see we don't have any Blobs in there yet, but you can see what goes into every Blob container. Which is a name, size, the last modified UTC date-time stamp, a content type. Now this content type is a typical web content type. Things like image/jpeg, or application/octet-stream, and the URL where you can access that content. There's two ways to access the content. If you have the credentials, like you do here with the Development Storage Emulator, you can access that with an API.
If you make the contents of this container public You can go ahead and access it with a web browser and we'll do that later. But first, let's actually invoke the Blob Upload API to actually put a picture in there, when we create a new note. So we'll close our Cloud container and we'll come back to our code and go to Create New Note. And we'll put in some code to actually upload the Blob to the container we just created. We do that by creating a Blob. So we're going to it before we execute the async tableOb to inset our tableObject, cause we want to put the URI for the Blob inside the tableObject.
So we've gone ahead and created a note model, right here before we do that. Now we're going to create a blob, CloudBlockbBob. If you remember the difference between Block Blobs and Page Blobs, Block Blobs can be up to 200GB in size. And they can be a single thing like an image and Page Blobs have a 512 byte size but can be up to 1 terabyte in aggregate size. So we're going to use a Block Blob here to store our image. So we've created Cloud Block Blob and we need to create a Variable Block Blob and so to create the Block Blob we use our Blob Container.
And we call getBlockBlobReference, and we pass it in the name we want to use for this blob. In this case we're going to use the result.ID so that we can associate this blob with the note that we're just about to create. Because we know we're uploading a picture, we want to set the properties of our blockBlob, specifically the content type, to a internet image type so that we could use a web browser to actually go see the blob, by looking at the URL. So we do that by saying BlockBlob.Properties.ContentType, in this case we'll use a familiar internet type; Image.Jpeg So that the Web browsers knows which kind of a content this is and does the appropriate thing with it.
So now we need to go get our simulated picture image that we would get from a camera normally. So we'll get a storage file. And we'll use our get random picture file, if you remember, our get random picture file is an async method so we have to use the await keyword with it. And now we've got a storage file that we're ready to upload. And so we'll use our Block Blob to upload it. So its Async operation, so await blockBlob.upload, and we have a variety of upload mechanisms available as we talked about in the slides. Upload from bite array, upload from file, upload from stream and upload text.
Since we have files we're going to go ahead and use upload from file async and we'll pass in the storage file object. Which is picture to upload. And finally, when we're done we need to get the URI out of that Blob in order to be able to set the picture path of our new object. To get that URI out of the object after we've uploaded, we'll do the following. We'll say result.PicturePath equals blockBlob.Uri.ToString. And now we're going to go ahead, as we did before, and insert our new note model object.
Now with its, brand spanking new picture path in it, into the table, using the table.execute async. So let's go ahead and give this a try. All we have to do is create a new note and stop the app. And let's go look at our server explorer, at both our Notes Table and our Blob Container. First of all, our Blob Container. In our Blob Container we have a name which is the ID of our Note. Size, as you can see this particular one that got picked is 450.5K which is a lot bigger then 64K limit on an individual column in the notes table which is why we're using Blobs in the first place.
Our modified dates. Now, note, the modified dates are always UTC. So it's 7.07 in the evening in Greenwich, England. Our content type is image JPEG. And here's our URL. So we're going to go ahead and copy the URL. And see if we can download that in a Web Browser. We're going to go ahead and use Google Chrome. Paste that URL in there and hit Enter, and you'll see you can't get to it. And you can't get to it because by default all the Blobs in a Blob Container are private.
So we need to add one more thing in order to be able to allow us to browse these pictures. We'll quit Chrome and we'll come back to our code inside NotesModel and we're going to go back to connect to Azure. And after we've created the Blob Container and retrieved it from the server, we're going to set its permissions. We're going to do that by saying, await blobContainer.setPermissionsAsync. And inside that set permissions, because, what you do, is you pass a Blob Container permissions object.
We're going to say, new blobContainerPermissionsObject, and we're going to pass it, PublicAccess = blobContainerPublicAccesstype.blob. And we'll put a semicolon there. And that should now give us access to the Blobs, except that we don't use semicolon there. And that should make all of our syntax right. Alright. Let's go ahead and give this a try now. So we'll create another note, in this case this is going to be note 1009, and we'll shut down the app.
Go back to the Server Explorer, open up our container, and refresh. And here's our second image. Click here, copy URL, open up Chrome, paste this in, and viola. Picture of a chair. Now, we should be able to also go back to Visual Studio and get this URL, because we set the properties for the entire container. Copy that URL. Come back to Chrome, paste that in and viola picture of a snack tray. Alright, so our images are available in the web browser, which we did specifically because we wanted to be able to verify that we were actually getting pictures uploaded.
You don't need to set the Blob container permissions in order to complete the challenge, which we're going to do next, which is to actually go download those, Images and display them in the app when you open a particular note. But that's the end of the process. We've added a Picture Path Property to our table. We've added a Simulated Camera Mechanism using our Get Random Picture File. And we've used that to associate a specific picture with a specific note entry by uploading the Blob to Blob Storage and then taking the URI from the Blob Storage and storing it in the table.
Alright. Next up, our Windows Azure Blob Challenge.
- What is Windows Azure?
- Creating Azure tables
- Inserting, updating, and deleting data in tables
- Uploading a blob to Windows Azure storage
- Using shared access signatures
- Implementing mobile services
- Adding push notifications