Is possible to view a file from memory? about react-doc-viewer HOT 9 OPEN

I think what @Relaxe111 is asking for is support to render file blobs as seen here in react-pdf https://react-pdf.org/advanced#on-the-fly-rendering. I'm not sure how you would support this across the multiple file type plugins.

I will look into this, I feel like if it can't do it right now, it shouldn't take much effort to make it work.

from react-doc-viewer.

I guess it depends on how you have loaded the file.
If you have file at coding you can require('filename.png').
If you have base64 I believe that you can pass it to file data instead of providing a Uri to the document object.
https://github.com/Alcumus/react-doc-viewer#idocument
I haven't tried this, so you will have to see if it works.
You may have to use a custom file loader https://github.com/Alcumus/react-doc-viewer#custom-file-loader

from react-doc-viewer.

I think what @Relaxe111 is asking for is support to render file blobs as seen here in react-pdf https://react-pdf.org/advanced#on-the-fly-rendering. I'm not sure how you would support this across the multiple file type plugins.

from react-doc-viewer.

oh sorry didn't received MSG (. Yes I am asking if is possible support for render file blobs )

from react-doc-viewer.

Hi @mattmogford-alcumus I'm would also like to embed blob urls as files. Any update on this feature request?

from react-doc-viewer.

Looks like this is going to be a feature soon? Anybody come up with a workaround in the meantime?

from react-doc-viewer.

Passing the fileData and fileType seems to not overwrite the request to the uri - and when that loads, it overwrites the fileData 😕

What eventually worked for me was using a custom renderer and loader. Would have prefered to use the loader only with the default renderers, but this is fine too.

The documentation is a good starting point, but I think what is missing from the example is that fileLoaderComplete function wants a fileReader as a prop:

MyCustomPNGRenderer.fileLoader = ({
  documentURI,
  signal,
  fileLoaderComplete,
}) => {
  myCustomFileLoaderCode().then(() => {
    // Whenever you have finished you must call fileLoaderComplete() to remove the loading animation
    const fileReader = new FileReader();
    fileReader.addEventListener('loadend', () => {
        fileLoaderComplete(fileReader);
    })
    
    // example of file loaded as blob with axios.
    const response = await axios.get('https://placekitten.com/200/300',  {
        responseType: 'blob',
    });
    fileReader.readAsDataUrl(response.data);
  });
};

Should work with other sort of blobs, not just axios loaded ones. I just used axios because I needed to pass in an authorization token in the request header.

from react-doc-viewer.

please any update with regards to the open question?

from react-doc-viewer.

@mattmogford, @mattmogford-alcumus : I have a url of type blob:https://site.com/dce5e4da-0a44-4aa7-8c33-941af8cbcc93, there is news about this function, it is very important to me it is only way I have.

from react-doc-viewer.