HttpClient enhancements - binary data #16257

SvenEV · 2018-04-03T23:42:10Z

Currently HttpClient cannot be used to retrieve binary data such as images. The response content appears to get truncated at zero bytes when the HTTP response is returned from JS back to .NET. In some cases, requests just fails with "SCRIPT7017: Memory index is out of range" (Edge) or "RuntimeError: memory access out of bounds" (Chrome) without anything being returned.

I found a TODO regarding this issue in the code (see below). Anyway, I think this should be tracked and I hope this isn't a duplicate.

https://github.com/aspnet/Blazor/blob/a9c45fe78ac18b6bd524904b40896c249f9f09c0/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Services/Http.ts#L32-L47

The text was updated successfully, but these errors were encountered:

SteveSandersonMS · 2018-04-04T09:03:01Z

Thanks @SvenEV - it's good to have an issue to track this. So, starting a list of possible future enhancements:

~~Reading binary data~~ Now implemented via Add support for sending and receiving arbitrary HttpContent, refs #479 blazor#815
Streaming responses
~~File uploads~~ Now implemented via Add support for sending and receiving arbitrary HttpContent, refs #479 blazor#815

rockfordlhotka · 2018-04-08T19:01:45Z

Also byte arrays. I ran into this last night, and changed my code to base64 encode the data, but it would be more efficient to just pass the binary byte array like on other platforms.

aguacongas · 2018-04-13T07:24:08Z

Upload/Download progression events

yowl · 2018-05-03T23:00:05Z

And consuming Content-Type: application/msbin1 web services would be helpful for large data transfer apps.

RemiBou · 2018-05-04T09:41:38Z

different model depending on response code (bad request won't send the same paylone as ok)

Don't know if it's in the scope of this issue

#815) * Add support for zero copy byte array marshalling * Add support for sending arbitrary HttpContent, refs #479 * Fix unit test to set ContentType correctly * Add support for receiving binary data * Compare header case insensitive * Add unit test for binary http requests

SteveSandersonMS · 2018-05-23T09:19:44Z

@rockfordlhotka byte[] is now handled for both sending and receiving thanks to dotnet/blazor#815

dotnet#815) * Add support for zero copy byte array marshalling * Add support for sending arbitrary HttpContent, refs #479 * Fix unit test to set ContentType correctly * Add support for receiving binary data * Compare header case insensitive * Add unit test for binary http requests

gojanpaolo · 2019-06-05T02:37:20Z

Hello, I would just like to ask if someone could provide an example on how to use this feature to upload files from the client and send it to the server? I'm completely new to web development so any help would be greatly appreciated. Thanks!

On client-side I have

<input type="file" onchange="@UploadFile" id="fileUpload" />
@functions {
    private void UploadFile()
    {
      // what to do here?
    }
}

On server-side, I think it's something like this

[HttpPost("upload")]
public async Task<IActionResult> Upload(List<IFormFile> files)
{
    // or var files = Request.Form.Files;
    // process files here
}

smartprogrammer93 · 2019-06-05T02:53:01Z

@gojanpaolo
An easy google search would lead you to this.

https://remibou.github.io/Upload-file-with-Blazor/
Try it out and let me know if you need help

gojanpaolo · 2019-06-05T02:56:41Z

@smartprogrammer93 yes I found that. But it needs JS Interop. I thought this merged PR solved not having to use JS Interop during file upload?

giving it a try..
index.html

<body>
    <app>Loading...</app>

    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        window.readUploadedFileAsText = (inputFile) => {
            const temporaryFileReader = new FileReader();
            return new Promise((resolve, reject) => {
                temporaryFileReader.onerror = () => {
                    temporaryFileReader.abort();
                    reject(new DOMException("Problem parsing input file."));
                };
                temporaryFileReader.addEventListener("load", function () {
                    var data = {
                        content: temporaryFileReader.result.split(',')[1]
                    };
                    console.log(data);
                    resolve(data);
                }, false);
                temporaryFileReader.readAsDataURL(inputFile.files[0]);
            });
        };
    </script>
</body>

Index.razor

@inject IJSRuntime JSRunTime;
@inject HttpClient Http;
<input type="file" onchange="@UploadFile" id="fileUpload" />
@functions{
    async Task UploadFile()
    {
        var data = await JSRunTime.InvokeAsync<string>("readUploadedFileAsText", "fileUpload");
        var response = await Http.PostAsync("/api/upload", new ByteArrayContent(Convert.FromBase64String(data)));
        var fileTempName = await response.Content.ReadAsStringAsync();
    }
}

UploadController.cs

 [Route("api/upload")]
public class UploadController : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> Save()
    {
        return Ok(); // breakpoint here
    }
}

smartprogrammer93 · 2019-06-05T03:19:25Z

@gojanpolo

No need for steing builder. The code you see is a bit outdated. The response you will get is probably a string so T should be a string. I am not sure if you can use byte array instead

gojanpaolo · 2019-06-05T03:35:57Z

@smartprogrammer93 Please see updated https://github.com/aspnet/Blazor/issues/479#issuecomment-498920109. I tried to follow the blog as best I can but it still doesn't seem to work.

smartprogrammer93 · 2019-06-05T03:46:46Z

@gojanpaolo

I read the code again. And in this case, T should be a string builder. But i am pretty sure if you change the js code to return the content right away instead of a data object with a content property inside it, it could work with steing

danroth27 · 2019-06-05T03:49:02Z

@gojanpaolo If you're still hitting problems with using HttpClient to send/receive binary data in Blazor please open a new issue in the https://github.com/aspnet/aspnetcore repo with the steps and code needed to reproduce the issue and we'll take a look.

gojanpaolo · 2019-06-05T03:56:26Z

@smartprogrammer93 thanks for the suggestions, I tried using StringBuilder instead but doesn't work too. Not sure how to change the js code, it's too foreign for me.

@danroth27 Thank you for responding. I think the issue I'm having is more on how to get file uploading work in client-side blazor. As commented above, it looks like I need to use JSInterop, but I have no experience in javascript. I was hoping there's a way to do it in C#.

SteveSandersonMS changed the title ~~Cannot retrieve binary data with HttpClient~~ HttpClient enhancements Apr 4, 2018

Suchiman referenced this issue in Suchiman/Blazor May 11, 2018

Add support for sending arbitrary HttpContent, refs #479

c272bdc

Suchiman referenced this issue in Suchiman/Blazor May 11, 2018

Add support for sending arbitrary HttpContent, refs #479

21547e7

Suchiman referenced this issue in Suchiman/Blazor May 22, 2018

Add support for sending arbitrary HttpContent, refs #479

f87b1de

Suchiman referenced this issue in Suchiman/Blazor May 22, 2018

Add support for sending arbitrary HttpContent, refs #479

ec4c336

danroth27 changed the title ~~HttpClient enhancements~~ HttpClient enhancements - binary data Jun 7, 2018

danroth27 closed this as completed Jun 18, 2018

mkArtakMSFT transferred this issue from dotnet/blazor Oct 27, 2019

mkArtakMSFT added the area-blazor Includes: Blazor, Razor Components label Oct 27, 2019

dotnet locked as resolved and limited conversation to collaborators Dec 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HttpClient enhancements - binary data #16257

HttpClient enhancements - binary data #16257

SvenEV commented Apr 3, 2018

SteveSandersonMS commented Apr 4, 2018 •

edited

rockfordlhotka commented Apr 8, 2018

aguacongas commented Apr 13, 2018

yowl commented May 3, 2018

RemiBou commented May 4, 2018

SteveSandersonMS commented May 23, 2018

gojanpaolo commented Jun 5, 2019 •

edited

smartprogrammer93 commented Jun 5, 2019

gojanpaolo commented Jun 5, 2019 •

edited

smartprogrammer93 commented Jun 5, 2019

gojanpaolo commented Jun 5, 2019

smartprogrammer93 commented Jun 5, 2019

danroth27 commented Jun 5, 2019

gojanpaolo commented Jun 5, 2019

HttpClient enhancements - binary data #16257

HttpClient enhancements - binary data #16257

Comments

SvenEV commented Apr 3, 2018

SteveSandersonMS commented Apr 4, 2018 • edited

rockfordlhotka commented Apr 8, 2018

aguacongas commented Apr 13, 2018

yowl commented May 3, 2018

RemiBou commented May 4, 2018

SteveSandersonMS commented May 23, 2018

gojanpaolo commented Jun 5, 2019 • edited

smartprogrammer93 commented Jun 5, 2019

gojanpaolo commented Jun 5, 2019 • edited

smartprogrammer93 commented Jun 5, 2019

gojanpaolo commented Jun 5, 2019

smartprogrammer93 commented Jun 5, 2019

danroth27 commented Jun 5, 2019

gojanpaolo commented Jun 5, 2019

SteveSandersonMS commented Apr 4, 2018 •

edited

gojanpaolo commented Jun 5, 2019 •

edited

gojanpaolo commented Jun 5, 2019 •

edited