Problems with opening blob files

Question

Can't understand why it doesn't display the Blob file. the code is:

openBlob = fileBuffer => {
const file = new Blob([fileBuffer], { type: "image/bmp" }); // You could also add the MIME type here as { type: "application/pdf" }
const fileURL = URL.createObjectURL(file);
console.log("fileURL" + fileURL)
window.open(fileURL, "_blank_");
 };

render() {
const archivioItems = this.state.archivio.map((archivio, i) => {
  return (
    <tr key={archivio.hash_referto}>
      <td>{archivio.tipo_esame}</td>
      <td>{archivio.data_esame}</td>
      <td>
        <Tab icon={<AssignmentIcon />}              
          className="tab"
           onClick={() => this.openBlob(archivio.uri)}></Tab>
      </td>
    </tr>
  )
})

It opens a new page as a pdf, but then returns an alert with "It's not possible to open the pdf document" (even it's a pdf document). And more, is there a way to open any kind of document?

hey, some clarification needed. the `achivio.uri` is a buffer or just uri to a file ? — Itay Wolfish, Sep 22 '19 at 06:45
The uri to that document was too big so i stored it as a Blob in the database — mikerug88, Sep 22 '19 at 07:07

Itay Wolfish · Answer 1 · 2019-09-22T15:32:06.587

0

When using Blob make sure the passed argument to the constructor is a file buffer. As clarified from the comments you save the files as blobs in the database, assuming archivio.uri is already a blob(as said in the comment). then its not necessary to reapply blob over it just pass the data itself to URL.createObjectUrl. if thats not the case and the database item is not a blob make sure you read the file content from uri first then converting the file data to blob and presenting it to the user.

you can read more here about a method to load a uri file then converting it to a blob: load uri and convert to blob

UPDATE

case #1:

openBlob = (fileBuffer) => { //file buffer is already a buffer
const fileURL = URL.createObjectURL(fileBuffer);
console.log("fileURL" + fileURL)
window.open(fileURL, "_blank_");
 };

case #2:

fileBuffer is not a buffer but a URI to a file. notice that this operation is asynchronous because there is reading operation of a file from remote URI.

openBlob = (fileUri) => {
    let fileReader = new FileReader()
    const data = fileReader.readAsArrayBuffer(fileUri)
    .then(function(buffer){
        const blob = new Blob(buffer,{type:".....what ever is your type..."})
        console.log("File Blob:")
        console.log(blob)
        window.open(blob,"_blank_")
    })
}

edited Sep 22 '19 at 15:32

answered Sep 22 '19 at 07:24

Itay Wolfish

507
3
9

@mikerug88 updated the answer as desired, provided two cases, one in which the input of the function is already a file blob, and the second one in which there is process reading a remote URI file converting it to blob then presenting it to the user. – Itay Wolfish Sep 22 '19 at 08:19
Thank you, really, but it says "Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided." – mikerug88 Sep 22 '19 at 08:25
typeof fileBuffer = object – mikerug88 Sep 22 '19 at 08:30
The reason could be: i settled the type of the attribute in the database as a Blob, but when i store the uri in the database, i don't turn it into a Buffer. maybe? – mikerug88 Sep 22 '19 at 08:45
1. the URL object is from the window object if not found try window.URL.createObjectUrl. 2. if the desired function reads a URL from the database then case 2 will match your job if the database URI stores a buffer then case 1 will do it. if settled in DB as blob then make sure you store it as a blob. – Itay Wolfish Sep 22 '19 at 09:35
@mikerug88 have a notice that i updated solution 2 , making a blob from a uri requires a stream(file content) to create a blob from. – Itay Wolfish Sep 22 '19 at 09:54
in that solution data is not used anywhere – mikerug88 Sep 22 '19 at 13:45
@mikerug88 mistyped , corrected in the latest update – Itay Wolfish Sep 22 '19 at 14:31
I decode it now when i store the uri in the database: var decoded = dataUriToBuffer(assetUrl) console.log("decoded", Buffer.isBuffer(decoded)) the answer of the console.log is true, so it's stored as a buffer, but when i try to open it as a url openBlob = (fileBuffer) => { console.log("fileBuffer", Buffer.isBuffer(fileBuffer)) const fileURL = URL.createObjectURL(fileBuffer); console.log("fileURL" + fileURL) window.open(fileURL, "_blank_"); }; the Buffer.isBuffer says it's not a buffer anymore, but with typeof it says it's an object – mikerug88 Sep 22 '19 at 14:51

Problems with opening blob files

1 Answers1