Upload a file from Azure Functions to Azure Blob using PUT Block

Question

We have a React app and want to upload a large file to Azure blob for further processing. Looked at this link which is promising but it uses Storage API within the app. Took the idea to split the file locally and do an upload to the Azure Functions and use "PUT Block" method on blob to complete the upload.

Now facing issue with uploading the file in the Azure Function. Always getting "Microsoft.WindowsAzure.Storage: The value for one of the HTTP headers is not in the correct format" error.

Following is the code in Azure Function

            try
            {
                var files = req.Form.Files;
                var file = files[0];
                var blockId = req.Form["blockId"].ToString();
                
                using (var ms = new MemoryStream())
                {
                    await file.CopyToAsync(ms);
                    CloudBlobContainer blobContainer = new CloudBlobContainer(new Uri("https://myblob.blob.core.windows.net/coolstuff"),new StorageCredentials("mykey"));
                    CloudBlockBlob blob = blobContainer.GetBlockBlobReference(file.FileName);
                    await blob.PutBlockAsync(blockId, ms, null);
                }
                return new OkObjectResult("File uploaded");
            }
            catch (Exception ex)
            {
                log.LogError(ex, "Error uploading the file");
            }

Answer 1

The header on the client was getting changed back to "application/json" from "multipart/form-data" which was causing the issue. I removed the explicit callout to the "multipart/form-data" for the Content-Type in the header which resolved the issue.