Search code examples
reactjsfilepond

Get blob of uploaded file by filepond

I'm using filepond to upload a file to server in react-js. everything works fine and I can upload the file successfully. but i need to keep the uploaded file in browser (or maybe the path of local file) so i can show it to user at next page. it seems that browsers do not show the absolute path of selected file (for security reasons). I wonder it is possible the blob of selected file. is there any solution? thanks

Solution

  • You can use URL.createObjectURL() to create a URL from your Blob or File. This url can be passed to the next screen.

    const url = URL.createObjectURL(blob);

    Depending on the type of file your can use the object url to display the file directly e.g. in an img-tag or you can convert it back into a blob.

    <img src={url} />

    or

    const blob = await fetch(url).then(r => r.blob());