Is there a way to handle buffer to add to the file prop?

[huypham1411]

In my current project, the BE team responded to me with a buffer of a PDF file, I've tried to convert it to Uint8Array but it seems like the PDF cannot load and I receive the text "No page specified." which shows that there is no data in the page document session. I hope anyone can help me with some examples. I'm currently using NextJS 13. I really appreciate any help you can provide.

[jiangxiaoqiang]

you can recive the buffer and convert to file, file can be a URL, base64 content, Uint8Array, and more. without more detail information, we can not help.

[huypham1411]

Hi, thanks for the fast response, I'm currently trying to set up to understand the library so I did a quick setup on codesandbox, hope you can take a look and guide me if anything is wrong, appreciate
https://codesandbox.io/p/sandbox/relaxed-lalande-jtw6cv?file=%2Fapp%2Fpage.tsx%3A14%2C24

[huypham1411]

currently BE team returned to me a PDF file, which is a type of string when I tried to check its type, the format looked like this, this is just a part of a file since the data is too long

%PDF-1.4
%����
1 0 obj
<</Creator (Chromium)
/Producer (Skia/PDF m117)
/CreationDate (D:20231013040510+00'00')
/ModDate (D:20231013040510+00'00')>>
endobj
3 0 obj
<</ca 1
/BM /Normal>>
endobj
4 0 obj
<</Type /XObject
/Subtype /Image
/Width 163
/Height 80
/ColorSpace /DeviceRGB
/BitsPerComponent 8
/Filter /DCTDecode
/ColorTransform 0
/Length 6227>> stream

I tried to convert this to a File type through useEffect like this

  useEffect(() => {
    if (data) {
      const blob = new Blob([data], { type: 'application/pdf' });
      const filePdf = new File([blob], 'example.pdf', {
        type: 'application/pdf',
      });
      setFile(filePdf);
    }
  }, [data]);

and I result with a blank PDF

[huypham1411]

well it seems like converting the buffer to base64 makes it work, I'm not sure why this wasn't run before but I'm glad that it works