Menggunakan Azure BLOB Storage untuk menyimpan file

Saya sering menjumpai pertanyaan bagamana cara menyimpan image/file di Azure Website. Pada artikel ini saya ingin mencoba untuk menjawab pertanyaan tersebut, saya akan membuat sebuah aplikasi ASP.NET MVC yang mempunyai fasilitas untuk upload image. Aplikasi tersebut akan saya hosting di Windows Azure Website, dan file image akan disimpan pada Azure Storage.

1. Langkah pertama yang harus dilakukan adalah membuat azure storage baru pada windows azure.

image

2. Kemudian catat access keys yang nanti akan kita gunakan untuk menyimpan data ke azure storage.

image

3. Kemudian buat project ASP.NET MVC dengan nama ‘SampleWebBLOB’

4. Pada HomeController tambahkan satu action method baru dengan nama ‘ViewImage()’

   1: public ActionResult ViewImage()

   2: {

   3:     return View();

   4: }

 

5. Kemudian tambahkan view dengan nama ViewImage.cshtml untuk membuat form upload image

   1: <h2>Upload Gambar</h2>

   2:  

   3: <br />

   4: @using(Html.BeginForm("ImageUpload","Home",FormMethod.Post,

   5:     new{enctype="multipart/form-data"}))

   6: {

   7:     <div>Please Select Image to Upload :</div>

   8:     <input type="file" name="image"/><input type="submit" value="Upload Image"/>

   9: }

6. Tambahkan beberapa referensi library yang digunakan untuk upload ke BLOB storage.

image

7. Untuk proses upload file dan menambahkan ke BLOB storage di Windows Azure tambahkan action method baru pada HomeController.

   1: [HttpPost]

   2: public ActionResult ImageUpload()

   3: {

   4:     

   5:     var image = Request.Files["image"];

   6:     if(image==null)

   7:     {

   8:         ViewBag.UploadMessage = "Gagal upload image";

   9:     }

  10:     else

  11:     {

  12:         ViewBag.UploadMessage = string.Format("Berhasil upload {0}  dengan tipe {1} dan ukuran {2}",

  13:             image.FileName, image.ContentType, image.ContentLength);

  14:  

  15:         //bagian upload ke azure storage

  16:  

  17:         //koneksi

  18:         var storageAccount = CloudStorageAccount.Parse(

  19:             ConfigurationManager.ConnectionStrings["StorageConnection"].ConnectionString);

  20:  

  21:         //membuat container

  22:  

  23:         CloudBlobClient blobStorage = storageAccount.CreateCloudBlobClient();

  24:         CloudBlobContainer container = blobStorage.GetContainerReference("itemimage");

  25:         if(container.CreateIfNotExist())

  26:         {

  27:             var permission = container.GetPermissions();

  28:             permission.PublicAccess = BlobContainerPublicAccessType.Container;

  29:             container.SetPermissions(permission);

  30:         }

  31:  

  32:         //save image to the container

  33:         string uniqueBlobName = string.Format("itemimage/image_{0}{1}",

  34:             Guid.NewGuid().ToString(), Path.GetExtension(image.FileName));

  35:         CloudBlockBlob blob = blobStorage.GetBlockBlobReference(uniqueBlobName);

  36:         blob.Properties.ContentType = image.ContentType;

  37:         blob.UploadFromStream(image.InputStream);

  38:  

  39:         ViewBag.MyImage = blob.Uri.ToString();

  40:     }

  41:     

  42:     return View();

  43: }

 

8. Kemudian tambahkan web.config untuk connection string ke BLOB storage di Windows Azure.

image

9. Kemudian publish aplikasi tersebut ke Windows Azure (cara publish aplikasi ASP.NET MVC ke Windows azure dapat dibaca pada artikel saya berikut.)

10. Hasil dari aplikasi ini ketika sudah diupload ke Windows Azure.

image

11. Anda juga dapat melihat file gambar yang berhasil diupload pada container di azure storage.

image

image

Dari artikel diatas dapat disimpulkan bahwa cukup mudah untuk menyimpan file ke azure blob storage. Pada artikel selanjutnya akan dibahas bagaimana membuat web services REST dengan ASP.NET Web API dan kemudian memasangnya di Windows Azure.

Advertisements

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in ASP.NET MVC, Cloud & Mobile, Events, Microsoft Azure. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s