Integrating RadUpload Control with Azure Blob Storage

[Daniel]

We're migrating to Azure and need to figure out how to configure the RadUpload control to write binary files (images specifically) to Azure Blob storage.  Can someone point me to documentation that demonstrates how to accomplish this? Thanks!

[Peter Filipov]

Hi Daniel,

Unfortunately RadUpload control doesn't support direct upload to Azure Blob Storage. After a postback, you can access the uploaded file through the UploadedFiles property of the RadUpload control and manipulate the files as you want.

Greetings,
Peter Filipov
the Telerik team

[Shaw]

Hello,

I had to do this today and wanted to post since seeing this thread.

This worked for me. You can remove the "DirectoryName" part if you don't need it.

<telerik:RadUpload ID="radUploader" runat="server"></telerik:RadUpload>
<telerik:RadButton ID="uploadBtn" runat="server" Text="Upload" onclick="uploadBtn_Click"></telerik:RadButton>

        protected void uploadBtn_Click(object sender, EventArgs e)
        {
            CloudStorageAccount cloud = CloudStorageAccount.Parse(cnStringStorage);
            CloudBlobClient client = cloud.CreateCloudBlobClient();

            CloudBlobContainer container = client.GetContainerReference(containerStr);
            container.CreateIfNotExist();

            CloudBlob blob = container.GetBlockBlobReference("DirectoryName/" + radUploader.UploadedFiles[0].FileName);
            blob.Properties.ContentType = radUploader.UploadedFiles[0].ContentType;
            blob.UploadFromStream(radUploader.UploadedFiles[0].InputStream);
        }

[Peter Filipov]

Hello Shaw,

Thank you for sharing your solution.
Once the files are uploaded you can iterate through the UploadedFiles collection and apply your logic for every one of them.

Kind regards,
Peter Filipov
the Telerik team

[Hector Medrano]

Thanks Shaw..a year later but it helped out.

[Chris Honselaar]

Shaw's approach works for small files.. but what about 2G+ video files that you want to upload in chunked fashion directly to Azure/S3? 

Has anyone got this to work easily with RadAsyncUpload?

[Shinu]

Hi,

I have tried with RadAsycnUpload and here is the sample code.

C#:

protected void btnUpload_Click(object sender, EventArgs e)
 {
  if (radUpload.UploadedFiles.Count != 0)
  {
     try
     {
       foreach (UploadedFile file in radUpload.UploadedFiles)
       {
        string fileName = file.FileName;
        long fileSize = file.ContentLength;
        DateTime uploadedDate = System.DateTime.Now;

       /*Blob Storage*/
       CloudStorageAccount storageAccount =  CloudStorageAccount.Parse(ConfigurationManager.ConnectionStrings["blobConnection"].ConnectionString);
       Microsoft.WindowsAzure.StorageClient.CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
       Microsoft.WindowsAzure.StorageClient.CloudBlobContainer container = blobClient.GetContainerReference("filecontainer");
    // Create the container if it doesn't already exist.
       container.CreateIfNotExist();
       container.SetPermissions(new Microsoft.WindowsAzure.StorageClient.BlobContainerPermissions
        {
           PublicAccess = BlobContainerPublicAccessType.Blob
        });
            /*Save in timestamp format*/
      CloudBlockBlob blockBlob = container.GetBlockBlobReference(DateTime.Now.ToString("MM-dd-yy-HH:mm:ss").Replace(":", "") + "-" + fileName);
       targetFolder = radUpload.TargetFolder;
       path = Path.Combine(targetFolder, fileName);
       filePath = Server.MapPath(path);
       using (var fileStream = System.IO.File.OpenRead(filePath))
         {
            blockBlob.UploadFromStream(fileStream);
         }
      string fileNameToSave = DateTime.Now.ToString("MM-dd-yy-HH:mm:ss").Replace(":", "") + "-" + fileName;
      string pathToSave = string.Empty;
      foreach (IListBlobItem item in container.ListBlobs())
       {
         if (item.GetType() == typeof(CloudBlockBlob))
          {
            CloudBlockBlob pageBlob = (CloudBlockBlob)item;
             string uri = pageBlob.Uri.ToString(); // to access the saved path
          }
        }
 }

Thanks,
Shinu.

[Jason]

Hi Shinu,

Does your sample code handle chunked uploads for large files? I thought we have to create our own AsyncUploadHandler to handle large files like 1 GB.

Thanks,
Jason

[Chris Honselaar]

@Shinu - Thanks, but this does not really help with large files, or a typical Azure scenario (ie. multiple web role instances). Even if it did, it would still involve the web server unnecessarily - effectively doubling transfer and load.

[Jason]

This link has an example of an AsyncUploadHandler for Azure blobs, but calls methods which are not in the code snippet. It would be good to have a downloadable demo which works completely.

[Paul]

Here's a link to an excellent article pertaining to "chunked" file uploads to Azure Blob Storage.  I believe this is what others are looking for, as am I, with the RadAsyncUpload control (or RadCloudUpload).

http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/

BTW - CORS support for Azure is coming.  In fact, it may already be here.  If not, I sure wish MSFT would hurry up.  Amazon already supports CORS.

[Chris Honselaar]

@Paul, great find! Thanks. That is exactly how it should work.

There would need to be some kind of fall-back for non-HTML5 File API enabled browsers, and S3 support etc, but this is basically why I had hoped Telerik would have added Cloud support by now.

[Paul]

@Chris - Thanks!  I agree, a fall back for non HTML 5 clients would be nice, if possible.  I would have already implemented such a strategy for a product in development (and nearing completion) if not for Azure's lack of CORS support.  This upload mechanism is one of the last things on our "TO DO" list.  I don't see any reason to reinvent the wheel assuming Azure and Telerik can produce something in the very near future.  Fingers are crossed.  I need this ASAP.  It sounds as if others are in a similar boat.

[Chris Honselaar]

https://twitter.com/scottgu/status/341780823390957568

:)

[Peter Filipov]

Hi,

In order to upload files to cloud storage we decided to create a new control which is called RadCloudUpload. The new component will be with high priority in our road map for Q3.2013. Here you could give us some feedback.

Regards,
Peter Filipov
Telerik

[Chris Honselaar]

@Peter, thanks, but this was already on the roadmap for the Q2 release (and has been on the overall radar for 4 years).
We need a solution right now, so RadUpload/RadAsyncUpload is effectively out.

[Peter Filipov]

Hello,

Unfortunately for the upcoming release Q2.2013 we are not going to introduce any upload to cloud storage functionality. Could you please give us some feedback about what kind of features do you want to see in  the new RadCloudUplaod control? First we want to create a module which will upload the files from the client side to a handler and then to the storage because if the upload is directly from the client side it is possible some to get your signed URL and use it.

Regards,
Peter Filipov
Telerik

[Chris Honselaar]

@Peter - you would be working with Shared Access Signatures and temporary security credentials in ABS and Amazon S3 respectively I assume. These mechanisms are time limited and use pre-signed access URLs that are created securely on the server prior to displaying the upload control.
The actual upload process can then proceed without involving the server at all.

For added security, you could implement restricted policies on the container/bucket used for the upload.

[Peter Filipov]

Hello guys,

I will summarize our plan for the RadCloudUpload control. First, we are to implement upload from a handler to a particular storage. With this we are going to cover all browsers and the ability to implement own storage providers and upload files to a custom location.
Next step will be the implementation of a client-side upload. The control will directly upload files with javascript to a particular storage.

Regards,
Peter Filipov
Telerik

[Paul]

Sweet!  This is cause for a celebration!  Thanks for the heads-up.

[Brian]

Is there an update on this? Is there a beta available?

[Peter Filipov]

Hello Brian,

Next week we are going to introduce the new control - RadCloudUpload. Please stay tuned and send us your feedback.

Regards,
Peter Filipov
Telerik

[Brian]

That is excellent news!

[Minh]

How do I set custom blob names when using the RadCloudUpload control?

[Attila Antal]

Hi Minh,

By creating a Custom Storage Provider, you will be able to control everything, for example, you can upload the files with any names you would like to. Here is one example for the Azure Blob storage: Upload Files with their original name.