3

I am trying to download a file from azure's blob storage using jquery's $.ajax() method.

I am using the following c# code to download the blob which I believe the problem lies.

  [System.Web.Services.WebMethod]
        public static void DownLoadBlob(string blobStorageName, string companyID)
        { 
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
                CloudConfigurationManager.GetSetting("StorageConnectionString"));
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
            CloudBlobContainer container = blobClient.GetContainerReference(System.Text.RegularExpressions.Regex.Replace(companyID.ToLower(), @"\s+", ""));
            CloudBlockBlob blockBlob = container.GetBlockBlobReference(blobStorageName);
            MemoryStream memStream = new MemoryStream();
            blockBlob.DownloadToStream(memStream);
            HttpResponse response = HttpContext.Current.Response;
            response.ContentType = blockBlob.Properties.ContentType;
            response.AddHeader("Content-Disposition", "Attachment; filename=" + blobStorageName.ToString());
            response.AddHeader("Content-Length", blockBlob.Properties.Length.ToString());
            response.BinaryWrite(memStream.ToArray());
        }

The above code is triggered by the following ajax call.

  var objRecordJSON = JSON.parse(response.d);
                $.ajax({
                    type: "POST",
                    url: "FroalaImageUpload.aspx/DownLoadBlob",
                    data: '{"blobStorageName":"' + objRecordJSON[0].uploaded_file + '", ' +
                    '"companyID" : "' + $("#trainingcompanyid").val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {

                    },
                    failure: function (response) {

                    }
                });

I have a break point on my server side c# code and it is hitting that piece of code. However the file does not download on the client end. I don't get any errors in the console either.

Any help or advice would be appreciated.

Thanks

CHEEKATLAPRADEEP
  • 12,191
  • 1
  • 19
  • 42
Hayden Passmore
  • 1,135
  • 2
  • 12
  • 34
  • 1
    Do you simply want to download the file on client's computer or do you want to process the data in your JS code? If it is former, then there's a simpler way. You don't really need AJAX for that. – Gaurav Mantri Nov 13 '17 at 06:51
  • 1
    Yes I simply want to download the file on the clients computer. – Hayden Passmore Nov 13 '17 at 22:24

1 Answers1

4

I am trying to download a file from azure's blob storage using jquery's $.ajax() method.

AFAIK, we could not directly download a file via an Ajax call. I assumed that you could create a single WebForm page and move your code for outputting blob file(s) to Page_Load, and leverage the querystring to pass your parameters as follows:

protected void Page_Load(object sender, EventArgs e)
{
    var blobStorageName = Request.QueryString["blobStorageName"];
    var companyID = Request.QueryString["companyID"];
    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(Microsoft.Azure.CloudConfigurationManager.GetSetting("StorageConnectionString"));
    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
    CloudBlobContainer container = blobClient.GetContainerReference(System.Text.RegularExpressions.Regex.Replace(companyID.ToLower(), @"\s+", ""));
    CloudBlockBlob blockBlob = container.GetBlockBlobReference(blobStorageName);
    System.IO.MemoryStream memStream = new System.IO.MemoryStream();
    blockBlob.DownloadToStream(memStream);
    HttpResponse response = HttpContext.Current.Response;
    response.ContentType = blockBlob.Properties.ContentType;
    response.AddHeader("Content-Disposition", "Attachment; filename=" + blobStorageName.ToString());
    response.AddHeader("Content-Length", blockBlob.Properties.Length.ToString());
    response.BinaryWrite(memStream.ToArray());
}

Then for your client, you could download the file as follows:

window.location = "/FroalaImageUpload.aspx?blobStorageName=2017%2F11%2F7%2F2017-7-10-1.png&companyID=images";

Moreover, you could also leverage iframe to download the file. Details you could refer to this similar issue.

Bruce Chen
  • 18,207
  • 2
  • 21
  • 35
  • Hi, thanks for your answer. I have managed to fix the issue by having a `` element that has an onclick event pointing to my download function. You are correct I am not able to directly download files via an AJAX call. – Hayden Passmore Nov 14 '17 at 11:03