Open Visual Studio, create a new Windows Azure Cloud Service project called Chapter16.BlobTest, and add a web role called Chapter16.BlobTestWebRole.

Open Default.aspx, and add the following code inside the <form> tag:

<asp:FileUpload ID="uploadFile" runat="server" /> <asp:Button ID="cmdUpload" runat="server"
Text="Upload"  />

<br /><br />

<asp:repeater ID="images" runat="server">
<ItemTemplate>
<asp:Image ID="image" runat="server" ImageUrl='<%# Eval("Url") %>' />
 </ItemTemplate>
</asp:repeater>

Open Default.aspx.cs.

Add the following using statements:

using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;

Add the following code. Here, when the user uploads an image, an instance of the BlobClient is created. The BlobClient then checks whether a container called pictures exists and creates one if not. Next you create a permission object to allow everyone to view your uploaded image before saving the image. You then call the bindImages() method to display your uploaded images:

protected void Page_Load(object sender, EventArgs e)
{
    this.cmdUpload.Click += new EventHandler(cmdUpload_Click);
    bindImages();
}

void cmdUpload_Click(object sender, EventArgs e)
{
    CloudStorageAccount.SetConfigurationSettingPublisher(
      (configName, configSetter) =>
    {
        // Provide the configSetter with the initial value
        configSetter(RoleEnvironment.GetConfigurationSettingValue(configName));
    });

    var storageAccount =
      CloudStorageAccount.FromConfigurationSetting("DataConnectionString");

CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
    CloudBlobContainer blobContainer = blobClient.GetContainerReference("pictures");

    blobContainer.CreateIfNotExist();

    var permissions = blobContainer.GetPermissions();
    permissions.PublicAccess = BlobContainerPublicAccessType.Container;
    blobContainer.SetPermissions(permissions);

    blobContainer.GetBlockBlobReference(
      Guid.NewGuid().ToString()).UploadFromStream(uploadFile.FileContent
    );

    bindImages();
}


public void bindImages()
{
    CloudStorageAccount.SetConfigurationSettingPublisher(
      (configName, configSetter) =>
    {
        // Provide the configSetter with the initial value
        configSetter(RoleEnvironment.GetConfigurationSettingValue(configName));
    });


    var storageAccount =
      CloudStorageAccount.FromConfigurationSetting("DataConnectionString");

    CloudBlobClient blobStorage = storageAccount.CreateCloudBlobClient();
    CloudBlobContainer blobContainer =
      blobStorage.GetContainerReference("pictures");

    blobContainer.CreateIfNotExist();

    images.DataSource = from blob in blobContainer.ListBlobs()
                        select new { Url = blob.Uri };
    images.DataBind();
}

The last step is that you need to tell Azure how to access the storage. Open ServiceDefinition.csdef, and add the following inside the ConfigurationSettings block:

<Setting name="DataConnectionString" />

Add the following settings in the ServiceConfiguration.cscfg configuration block:

<Setting name="DataConnectionString" value="UseDevelopmentStorage=true" />

Press F5 to run your project.

Click Browse, select a JPEG or GIF image, and click Upload. You should then see your picture displayed like in Figure 16-18.