Browser compatibility questions

[mizvyt]

Hi, a very useful library, thanks a lot for the effort.
I am using this in an Angular application like such:

// Important: we're importing from file-type/core as we don't
// want to accidentally try to import 'fs'
import { fromBuffer as mimeFromBuffer } from 'file-type/core';

Also using an additional polyfill for Buffer type, as it's not a natively available on a browser:

(window as any).global = window;
// @ts-ignore
window.Buffer = window.Buffer || require('buffer').Buffer;

I was essentially looking for a way to be able to determine a MIME type of a file on the client side. It seems to work perfectly on all modern browsers, but on Edge it seems to fail to load this library because of this tiny line of code below:

file-type/core.js

Line 41 in abc699a

...options

This is ES6 syntax, which is not supported in Edge or any IE browsers.

Two questions:

• Would it be possible to compile and ship an ES5 version of the library code for compatibility?
• Is there a way to not need to polyfill Buffer class and use something like ArrayBuffer instead? (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)

[mizvyt]

Unless my questions is out of scope of this development effort and this library is not supposed to target client-side javascript at all 😁

Edit: I've found an issue that has a similar question. Unfortunately not all client-side libraries want to transpile third-party dependencies. I agree with the approach, since it's not really up to me to maintain those. See issue here: angular/angular-cli#9214. But again, this could fall out of scope and I'd understand if it's not planned to be made available.

[sindresorhus]

This comment angular/angular-cli#9214 (comment) sums it up pretty well. It's up to you to transpile. If Angular makes this difficult, it's a problem for Angular to solve.

As for usage without needing Buffer. We cannot use just ArrayBuffer as it's missing some methods which makes traversal very inefficient.

[EvgeniyTT]

library is not supposed to target client-side javascript at all

Sorry for a stupid question, but I saw the browser section and the 'file-type/browser' module, so I assumed that it supposed to work in a browser. Am I wrong, and it won't/is not supposed to work in a browser? What the browser part is for in this case?

@mizvyt have you managed to make it work? I have a similar issue, but in my case polyfill global and buffer wasn't enough. How you have solved the issues with stream/process dependencies? Or you didn't have ones?

Thanks in advance for any help or advice.

[Borewit]

Sorry for a stupid question, but I saw the browser section and the 'file-type/browser' module, so I assumed that it supposed to work in a browser. Am I wrong, and it won't/is not supposed to work in a browser? What the browser part is for in this case?

Although this module is primary designed for Node.js, using it in the browser is possible as well. That is indeed where 'file-type/browser' intended for. It provides the right dependencies and right functions to the JavaScript module bundler. Some dependencies, which are typically present in a Node.js environment, but are missing in a browser environment, you may need to pass (polyfill) to your module bundler. Although in some cases it may a bit tricky to configure it, note that this is a pretty common task handled by a module bundler.

In the dependents you should be able to find other projects running file type in the browser.

[mizvyt]

@mizvyt have you managed to make it work? I have a similar issue, but in my case polyfill global and buffer wasn't enough. How you have solved the issues with stream/process dependencies? Or you didn't have ones?

I'm importing directly from file-type/core. That module does not have any Node.JS specific libraries imported. The only missing type is Buffer, which I am creating a polyfill for. I only really need that part of the library, because I'm passing an ArrayBuffer of file bytes that were returned by reader.readAsArrayBuffer().

file-type/browser requires file-type/core at the top, so it's inherently browser compatible.

[EvgeniyTT]

@Borewit @mizvyt thank you both for your help and quick response. After some time I gave up using fromBlob or fromStream and went the fromBuffer way - it works well.

import { fromBuffer } from 'file-type/core';
...
const buffer = await uploadedFile.arrayBuffer();
const types = await fromBuffer(buffer);