CODEWITHSUNDEEP
javascript
Duke Dougal
Duke Dougal

Reputation: 26336

How to determine if a JavaScript ArrayBuffer contains string or binary data?

I am building a simple application where users can load any file into the Monaco editor in a web browser.

I'm trying to work out if the file that the user has loaded is text, and therefore editable.

In JavaScript, the library I am using to load returns the loaded file as an ArrayBuffer. Of course I can just convert this to text regardless of whether or not it is text or binary and throw the result into the editor. Presumably binary converted to text will display as garbage in the Monaco editor.

I could also examine the mime type of the loaded file. This would go a long way towards solving the problem, but it means I somehow have to know which mime types are text- I have not been able to find anything that specifies this. Also, it means any file without the correct mime type set would not be editable.

So my question is, is there a way to know if the contents of a JavaScript ArrayBuffer is text or binary data such as an image or executable code, by examining the data itself, rather than referring to mime type?

EDIT: This question is not a duplicate of questions that are simply asking how to convert an ArrayBuffer to text. Simply converting an ArrayBuffer to text doesn't tell whether nor not this is a file that contains editable text or if it is a binary file. Additional information is needed, such as the magic number suggested in the answers to this question.

Upvotes: 2

Views: 1760

Answers (2)

Tachibana Shin
Tachibana Shin

Reputation: 3898

A late answer that might be helpful to someone

I have developed a package to solve this problem: https://www.npmjs.com/package/arraybuffer-isbinary

import { isBinaryFile } from 'arraybuffer-isbinary'

console.log(isBinaryFile(buffer))

Upvotes: 0

the_previ
the_previ

Reputation: 682

You can check the Magic numbers of the ArrayBuffer. Magic numbers are a sort of constants in files buffer that you can check to distinguishing between many file formats

Wikipedia - Magic numbers

This NPM module use that approach. Here's a list of the module's supported file types, you can see that they don't support text types.

UPDATE: I've writed an article about this which contains more explanations and a little Sandbox

Upvotes: 2

Related Questions