Endpoint:

[HttpGet("GetFileStream/{id}")]
[Produces("application/octet-stream")]
public async Task<Stream> GetFile(int id)
{
  Stream stream = await Services.FileStorage.GetFileStream(id, CurrentUserId);
  return stream;
}

 public async Task<Stream> GetFileStream(int id, string currentUserId)
 {
   FilePath filePath = await GetAsync(id);

   if (filePath == null)
   {
     return null;
   }

   if (File.Exists(filePath.fileName))
   {
     StreamContent stream = new StreamContent(File.Open(filePath.fileName, FileMode.Open));
     return await stream.ReadAsStreamAsync();
   }

   return null;

 }

The response contains the first chunk of bytes, but my pdf is blank of text and images don't load correctly either.

const getFile = async (id, fileType) => {
  const url = Endpoints.fileStorage.getFile.replace("{id}", id);
  const response = await httpService.get(url, {
    responseType: 'application/octet-stream'
  });

  return response;
};

View code:

const renderFileContent = () => {
    if (!fileContent)
      return null;
    const { fileData, metaData, extension } = fileContent;
    if (filePathId) {
      //Stream file
      if (extension === "png" || extension === "jpg") {
        return (
          <div>
            <img src={`data:image/png;base64,${Buffer.from(fileData?.data, 'binary').toString('base64')}`} />
          </div>);
      }
      else if (extension === "pdf") {
        return (
          <div>
            <Document
              file={Buffer.from(fileData?.data, 'binary').buffer}
              onLoadSuccess={onDocumentLoadSuccess}>
              <Page pageNumber={pageNumber} />
            </Document>

            <p>
              Page {pageNumber} of {numPages}
            </p>
          </div>
        )
      }
    }

    else return null;
  };

With this code I get: Warning: Invalid stream: "FormatError: Bad FCHECK in flate stream: 120, 253"

All of the Docs for streams in are for razer/blazor. Is there a way to parse in javascript?

I have tried many conversion methods, but I think the problem is I am not gathering all of the data from the stream. Because when I paste the bytes received into a base64 to pdf I get 12 blank pages as pdf.

I have also played around with returning different content-type headers, but none of them change the response, and 'stream' doesn't work like nodejs.

I'm expecting to be able to constantly read from the endpoint or a reader but not sure what to return from my httpService function.

There is also this: but it's unclear whether this will work using axios since there is a consumer? (I don't know much about blazor)