Integrating RadUpload Control with Azure Blob Storage

Thread is closed for posting
23 posts, 0 answers
  1. Daniel
    Daniel avatar
    18 posts
    Member since:
    Apr 2011

    Posted 12 Aug 2011 Link to this post

    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!
  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 17 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shaw
    Shaw avatar
    13 posts
    Member since:
    Sep 2011

    Posted 10 Jun 2012 Link to this post

    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);
            }
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 11 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Hector Medrano
    Hector Medrano avatar
    8 posts
    Member since:
    May 2010

    Posted 03 May 2013 Link to this post

    Thanks Shaw..a year later but it helped out.
  7. Chris Honselaar
    Chris Honselaar avatar
    12 posts
    Member since:
    Apr 2009

    Posted 08 Jun 2013 Link to this post

    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?
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2013 Link to this post

    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.
  9. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 10 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. Jason
    Jason avatar
    20 posts
    Member since:
    Nov 2011

    Posted 10 Jun 2013 Link to this post

    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
  11. Chris Honselaar
    Chris Honselaar avatar
    12 posts
    Member since:
    Apr 2009

    Posted 10 Jun 2013 Link to this post

    @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.
  12. Chris Honselaar
    Chris Honselaar avatar
    12 posts
    Member since:
    Apr 2009

    Posted 10 Jun 2013 Link to this post

    @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.
  13. Jason
    Jason avatar
    20 posts
    Member since:
    Nov 2011

    Posted 10 Jun 2013 Link to this post

    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.
  14. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 12 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  15. Chris Honselaar
    Chris Honselaar avatar
    12 posts
    Member since:
    Apr 2009

    Posted 12 Jun 2013 Link to this post

    @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.
  16. Paul
    Paul avatar
    14 posts
    Member since:
    Sep 2011

    Posted 12 Jun 2013 Link to this post

    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.
  17. Chris Honselaar
    Chris Honselaar avatar
    12 posts
    Member since:
    Apr 2009

    Posted 12 Jun 2013 Link to this post

    @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.
  18. Paul
    Paul avatar
    14 posts
    Member since:
    Sep 2011

    Posted 12 Jun 2013 Link to this post

    @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.
  19. Chris Honselaar
    Chris Honselaar avatar
    12 posts
    Member since:
    Apr 2009
  20. Paul
    Paul avatar
    14 posts
    Member since:
    Sep 2011

    Posted 12 Jun 2013 Link to this post

    Sweet!  This is cause for a celebration!  Thanks for the heads-up.
  21. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 17 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  22. Brian
    Brian avatar
    28 posts
    Member since:
    Dec 2008

    Posted 17 Sep 2013 Link to this post

    Is there an update on this? Is there a beta available?
  23. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 20 Sep 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  24. Brian
    Brian avatar
    28 posts
    Member since:
    Dec 2008

    Posted 20 Sep 2013 Link to this post

    That is excellent news!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017