0

I have a working ASP.NET Core Web API that I'm currently refactoring to an Azure Function. An image is uploaded in the front end, sent to the Azure Function as a POST request where it is uploaded to Azure Blob Storage. Right now my Azure Function works completely fine when testing with Postman but does nothing when I actually use my client application. A postman request will hit my breakpoint in the azure function but a c# httpclient request does not.

FRONT END CODE

 public partial class ImageUpload
    {
        [Inject]
        public HttpClient HttpClient { get; set; }
        public string ImgUrl { get; set; }
        private async Task HandleSelected(InputFileChangeEventArgs e)
        {
            var imageFile = e.File;
            if (imageFile == null)
                return;
            var resizedFile = await imageFile.RequestImageFileAsync("image/png", 300, 500);
            using (var ms = resizedFile.OpenReadStream(resizedFile.Size))
            {
                var content = new MultipartFormDataContent();
                content.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data");
                content.Add(new StreamContent(ms, Convert.ToInt32(resizedFile.Size)), "image", imageFile.Name);
                var response = await HttpClient.PostAsync("url/to/my/azure/function/api", content);
                ImgUrl = await response.Content.ReadAsStringAsync();
            }

        }
    }

Azure Function API

public static class Upload
    {
        [FunctionName("Upload")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Function, "post", Route = null)] HttpRequest req,
            ILogger log)
        {
      
                var formCollection = await req.ReadFormAsync();
                var file = formCollection.Files.First();
                if (file.Length > 0)
                {
                    var container = new BlobContainerClient("connection string to blob storage", "upload-container");
                    var createResponse = await container.CreateIfNotExistsAsync();
                    if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                        await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
                    var blob = container.GetBlobClient(file.FileName);
                    await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);
                    using (var fileStream = file.OpenReadStream())
                    {
                        await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = file.ContentType });
                    }
                return (ActionResult)new OkObjectResult(blob.Uri.ToString());
                }
            return new BadRequestObjectResult("Error");
        }
    }

Can anyone point me in the right direction of what I'm messing up?

3
  • So everything is happenning locally for the moment ? From the client what is the response ? 404 ? something else ? Commented Jul 19, 2022 at 7:03
  • If you have one request that works and another that doesn't, capture them both using a tool like Fiddler and compare them. Commented Jul 19, 2022 at 13:07
  • 1
    Your Azure function authorization level is 'function', so you need to be sending a key, but in your httpClient based code, you are not sending it. what is the result of your PostAsync call ? Commented Jul 19, 2022 at 13:53

1 Answer 1

0

Add this setting to the local.settings.json

  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.