How to upload image in Windows Azure platform: best approach - asp.net-mvc-3

Question

Ihave a register form with an Image Upload and it doesn't work when I upload my package application in my Windows Azure server.
The image address in the server looks like this:
F:\sitesroot\0\Uploads\Users\9259826_2121813246965_1294840438_2490950_6619588_n.jpg
If I had this image url like this, with it's relative path:
http://dealma.cloudapp.net/Uploads/Users/9259826_2121813246965_1294840438_2490950_6619588_n.jpg
I would already solve the problem.
The current code I'm using to upload is this:
if (userImg != null && userImg.ContentLength > 0)
{
try
{
var fileName = Url.Encode(userImg.FileName);
//no overwrite files
var pathToCheck = Server.MapPath("~/Uploads/Users/" + fileName);
var savePath = Server.MapPath("~/Uploads/Users/");
var tempfileName = fileName;
int counter = 2;
while (System.IO.File.Exists(pathToCheck))
{
tempfileName = counter.ToString() + fileName;
pathToCheck = savePath + tempfileName;
counter++;
}
fileName = tempfileName;
var finalImg = Path.Combine(savePath, fileName);
userImg.SaveAs(finalImg);
//Img name
userSet.Picture = finalImg;
userSet.Thumbnail = finalImg;
}
catch (Exception ex)
{
Response.Write("Não foi possível fazer upload do arquivo: " + ex.Message);
}
}
Does anyone knows how to solve this problem?

Answer 1

As corvus stated, you are writing to "local storage" which is volatile and not shared across multiple instances of your virtual machine.
Blob storage lets you store arbitrary files, images, etc. Each item gets stored in its own blob. You also have the notion of a "container" - think of it as a top-level directory folder. There are no nested containers, but you can emulate them with path characters in the name (skip this for now, as you need a quick solution).
If you download the Windows Azure Platform Training Kit and look at the lab "Introduction to Cloud Services", it shows a Guestbook application, where photos are uploaded to blob storage. You will see how to set up a storage account, as well as writing the code to push your file to a blob instead of the local file system. Here's a snippet from the sample:
Initialize blob client, and set up container to store your files:
var storageAccount =
CloudStorageAccount.FromConfigurationSetting("DataConnectionString");
// create blob container for images
blobStorage = storageAccount.CreateCloudBlobClient();
CloudBlobContainer container = blobStorage.GetContainerReference("uploads");
container.CreateIfNotExist();
Now, in your upload handler, you'd write to a blob instead of local file system:
string uniqueBlobName = string.Format("uploads/image_{0}{1}",
Guid.NewGuid(), Path.GetExtension(UserImg.FileName));
CloudBlockBlob blob = blobStorage.GetBlockBlobReference(uniqueBlobName);
blob.Properties.ContentType = UserImg.PostedFile.ContentType;
// note: there are several blob upload methods -
// choose the best one that fits your app
blob.UploadFromStream(UserImg.FileContent);
You'll see the full working sample once you download the Platform Training Kit.

Answer 2

You are trying to save the image to the virtual machine where web role handling your request resides.
Probably there is more than one web role instance in your application. So, the file gets saved on one machine, but next request is served by another web role and virtual machine that doesn't have this file.
So, good idea is to save all data that needs to be accessible from any web role, to blobs. If you have some static data, you can put this data into package with your web role. All other data should reside in blobs.
If you don't want to modify the code of your application, you can map a part of blob storage as another hard drive to every instance of your web role. In this case, you just need to write received data to this mapped disk. The results will be accessible from any web role.