{"id":20375586,"url":"https://github.com/juliolmuller/file2arraybuffer-js","last_synced_at":"2025-03-04T21:28:03.690Z","repository":{"id":57126124,"uuid":"280554170","full_name":"juliolmuller/file2arraybuffer-js","owner":"juliolmuller","description":"Basic function to convert files into ArrayBuffer object.","archived":false,"fork":false,"pushed_at":"2022-02-14T02:28:21.000Z","size":522,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-13T06:51:45.705Z","etag":null,"topics":["arraybuffer","file","javascript","node","npm","package"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/file2arraybuffer-js","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juliolmuller.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-18T00:55:19.000Z","updated_at":"2022-02-14T01:13:59.000Z","dependencies_parsed_at":"2022-08-23T16:30:20.896Z","dependency_job_id":null,"html_url":"https://github.com/juliolmuller/file2arraybuffer-js","commit_stats":null,"previous_names":["juliolmuller/file-to-arraybuffer-js"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliolmuller%2Ffile2arraybuffer-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliolmuller%2Ffile2arraybuffer-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliolmuller%2Ffile2arraybuffer-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliolmuller%2Ffile2arraybuffer-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juliolmuller","download_url":"https://codeload.github.com/juliolmuller/file2arraybuffer-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241924282,"owners_count":20043184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arraybuffer","file","javascript","node","npm","package"],"created_at":"2024-11-15T01:31:50.812Z","updated_at":"2025-03-04T21:28:03.667Z","avatar_url":"https://github.com/juliolmuller.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LacusSoft :: file2arraybuffer\n\n![NPM Latest Version](https://img.shields.io/npm/v/file2arraybuffer)\n![Downloads Count](https://img.shields.io/npm/dm/file2arraybuffer.svg)\n![Bundle Size](https://packagephobia.now.sh/badge?p=file2arraybuffer)\n![Last Update Date](https://img.shields.io/github/last-commit/juliolmuller/file2arraybuffer-js)\n![Project License](https://img.shields.io/github/license/juliolmuller/file2arraybuffer-js)\n\nPromise based function to generate **ArrayBuffer** objects for files - commonly required by web services like the SharePoint REST API.\n\n## Browser Support\n\n![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) |\n--- | --- | --- | --- | --- | --- |\nLatest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |\n\n## Installation\n\n```bash\n$ npm install file2arraybuffer\n```\n\n## Import\n\n```js\n// ES Modules\nimport fileToArrayBuffer from 'file2arraybuffer'\n\n// Common JS\nconst fileToArrayBuffer = require('file2arraybuffer')\n```\n\nor import it through your HTML file, using CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/file2arraybuffer@latest/dist/to-arraybuffer.min.js\"\u003e\u003c/script\u003e\n```\n\n**NOTE:** when used as UMD, global function will be available as `fileToArrayBuffer` (\"To\", not \"2\").\n\n## Usage\n\nYou 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.\n\n```html\n\u003cinput id=\"attachment\" type=\"file\"  /\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\n    const inputEl = document.getElementById(\"attachment\")\n    inputEl.addEventListener('change', async (ev) =\u003e {\n\n        // Use a query selector directly\n        const arrBuffer = await fileToArrayBuffer('#attachment')\n\n        // Use the HTML element directly (must be of type \"file\")\n        const arrBuffer = await fileToArrayBuffer(ev.target)\n\n        // Use the element attribute that stores the FileList (only the first one will be converted)\n        const arrBuffer = await fileToArrayBuffer(ev.target.files)\n\n        // Use the element specific file within the FileList (great if you have a multi-file input)\n        const arrBuffer = await fileToArrayBuffer(ev.target.files[0])\n\n        /* do stuff */\n    })\n\n    // or if you got a Blob object\n    const myBlob = new Blob(['Hello, world'], { type: 'text/plain' })\n    fileToArrayBuffer(myBlob).then((arrBuffer) =\u003e /* do stuff */)\n\n\u003c/script\u003e\n```\n\nHowever, 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.\n\n```html\n\u003cinput id=\"attachments\" type=\"file\" multiple=\"true\" /\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\n    const input = document.getElementById(\"attachments\")\n    const promises = Array.from(input.files).map(fileToArrayBuffer)\n\n    Promise.all(promises).then((arrBuffers) =\u003e {\n        /* do stuff */\n    })\n\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliolmuller%2Ffile2arraybuffer-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuliolmuller%2Ffile2arraybuffer-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliolmuller%2Ffile2arraybuffer-js/lists"}