https://github.com/juliolmuller/file2arraybuffer-js

Basic function to convert files into ArrayBuffer object.
https://github.com/juliolmuller/file2arraybuffer-js

arraybuffer file javascript node npm package

Last synced: 10 months ago
JSON representation

Basic function to convert files into ArrayBuffer object.

• Host: GitHub
• URL: https://github.com/juliolmuller/file2arraybuffer-js
• Owner: juliolmuller
• License: mit
• Created: 2020-07-18T00:55:19.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-02-14T02:28:21.000Z (almost 4 years ago)
• Last Synced: 2025-02-13T06:51:45.705Z (11 months ago)
• Topics: arraybuffer, file, javascript, node, npm, package
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/file2arraybuffer-js
• Size: 510 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# LacusSoft :: file2arraybuffer

![NPM Latest Version](https://img.shields.io/npm/v/file2arraybuffer)

![Downloads Count](https://img.shields.io/npm/dm/file2arraybuffer.svg)

![Bundle Size](https://packagephobia.now.sh/badge?p=file2arraybuffer)

![Last Update Date](https://img.shields.io/github/last-commit/juliolmuller/file2arraybuffer-js)

![Project License](https://img.shields.io/github/license/juliolmuller/file2arraybuffer-js)

Promise based function to generate **ArrayBuffer** objects for files - commonly required by web services like the SharePoint REST API.

## Browser Support

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |

--- | --- | --- | --- | --- | --- |

Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |

## Installation

```bash

$ npm install file2arraybuffer

```

## Import

```js

// ES Modules

import fileToArrayBuffer from 'file2arraybuffer'

// Common JS

const fileToArrayBuffer = require('file2arraybuffer')

```

or import it through your HTML file, using CDN:

```html

```

**NOTE:** when used as UMD, global function will be available as `fileToArrayBuffer` ("To", not "2").

## Usage

You can use various parameter types to reference your HTML input element holding the file, as well as **Blob** instances you may generate on the fly. As the process of generating **ArrayBuffer** is computationally expense, the result is not the ArrayBuffer itself, but a promise to it, so consider asynchronous approach to work with that.

```html

    const inputEl = document.getElementById("attachment")

    inputEl.addEventListener('change', async (ev) => {

        // Use a query selector directly

        const arrBuffer = await fileToArrayBuffer('#attachment')

        // Use the HTML element directly (must be of type "file")

        const arrBuffer = await fileToArrayBuffer(ev.target)

        // Use the element attribute that stores the FileList (only the first one will be converted)

        const arrBuffer = await fileToArrayBuffer(ev.target.files)

        // Use the element specific file within the FileList (great if you have a multi-file input)

        const arrBuffer = await fileToArrayBuffer(ev.target.files[0])

        /* do stuff */

    })

    // or if you got a Blob object

    const myBlob = new Blob(['Hello, world'], { type: 'text/plain' })

    fileToArrayBuffer(myBlob).then((arrBuffer) => /* do stuff */)

```

However, keep in mind that the function handles one single file, so by referencing an **HTMLInputElement** or its **FileList** attribute will only generate the **ArrayBuffer** for the `el.files[0]`. If you are working with multi-file input, you must iterate over the **FileList** object.

```html

    const input = document.getElementById("attachments")

    const promises = Array.from(input.files).map(fileToArrayBuffer)

    Promise.all(promises).then((arrBuffers) => {

        /* do stuff */

    })

```