javascript - How to get mime type of an array buffer object? - Stack Overflow

admin管理员组

文章数量:1345060

I am working on an API which is fetching file data as arraybuffer type. What my main question is there any of knowing what is the mime type of the file from the arraybuffer as I need to convert it to BLOB to view the file.

var file1 = new Blob([response], { type: file.type });
var fileURL = URL.createObjectURL(file1);

In the above code snippet, the response is an arraybuffer and the mime type I got is by storing it while uploading in a variable. But now the scenario is I don't have any mime type in my hand so I need a way to get it.

This is my response header:

And this is my response body sample:

Can anyone suggest me anything ?

I am working on an API which is fetching file data as arraybuffer type. What my main question is there any of knowing what is the mime type of the file from the arraybuffer as I need to convert it to BLOB to view the file.

var file1 = new Blob([response], { type: file.type });
var fileURL = URL.createObjectURL(file1);

In the above code snippet, the response is an arraybuffer and the mime type I got is by storing it while uploading in a variable. But now the scenario is I don't have any mime type in my hand so I need a way to get it.

This is my response header:

And this is my response body sample:

Can anyone suggest me anything ?

• javascript
• angular
• file-upload
• blob
• arraybuffer

Share Improve this question Follow edited Nov 11, 2020 at 8:06 avishekdr asked Nov 11, 2020 at 7:12 avishekdravishekdr 1,08022 gold badges3434 silver badges6565 bronze badges 2

• Couldn't you get it from the response headers? – Andrei Gătej Commented Nov 11, 2020 at 7:45
• @AndreiGătej please refer my updated question. I am not getting any mime type in response header – avishekdr Commented Nov 11, 2020 at 8:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Alternative to file-type which seems to also use magic signature :

function getMimeTypeFromArrayBuffer(arrayBuffer) {
  const uint8arr = new Uint8Array(arrayBuffer)

  const len = 4
  if (uint8arr.length >= len) {
    let signatureArr = new Array(len)
    for (let i = 0; i < len; i++)
      signatureArr[i] = (new Uint8Array(arrayBuffer))[i].toString(16)
    const signature = signatureArr.join('').toUpperCase()

    switch (signature) {
      case '89504E47':
        return 'image/png'
      case '47494638':
        return 'image/gif'
      case '25504446':
        return 'application/pdf'
      case 'FFD8FFDB':
      case 'FFD8FFE0':
        return 'image/jpeg'
      case '504B0304':
        return 'application/zip'
      default:
        return null
    }
  }
  return null
}

inspired from https://medium./the-everyday-developer/detect-file-mime-type-using-magic-numbers-and-javascript-16bc513d4e1e

I found this package below which is very interesting. It parses the array buffer/blob/stream and try to guess its extension and mime type if it were a file. Obviously it is not exhaustive but you can find the extension list in the readme. Works on node and browser. Works for my needs though.

Here is the repo link : https://github./sindresorhus/file-type

本文标签： javascriptHow to get mime type of an array buffer objectStack Overflow