/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ import Component from '@ember/component'; import filesize from 'filesize'; /** * @module FileToArrayBuffer * `FileToArrayBuffer` is a component that will allow you to pick a file from the local file system. Once * loaded, this file will be emitted as a JS ArrayBuffer to the passed `onChange` callback. * * @example * ```js * * ``` * @param onChange=null {Function} - The function to call when the file read is complete. This function * receives the file as a JS ArrayBuffer * @param [label=null {String}] - Text to use as the label for the file input * @param [fileHelpText=null {String} - Text to use as help under the file input * */ export default Component.extend({ classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'], onChange: () => {}, label: null, fileHelpText: null, file: null, filename: null, fileSize: null, fileLastModified: null, readFile(file) { const reader = new FileReader(); // raft-snapshot-restore test was failing on CI trying to send action on destroyed object // ensure that the component has not been torn down prior to sending onChange action if (!this.isDestroyed && !this.isDestroying) { reader.onload = () => this.send('onChange', reader.result, file); } reader.readAsArrayBuffer(file); }, actions: { pickedFile(e) { const { files } = e.target; if (!files.length) { return; } for (let i = 0, len = files.length; i < len; i++) { this.readFile(files[i]); } }, clearFile() { this.send('onChange'); }, onChange(fileAsBytes, fileMeta) { const { name, size, lastModifiedDate } = fileMeta || {}; const fileSize = size ? filesize(size) : null; this.set('file', fileAsBytes); this.set('filename', name); this.set('fileSize', fileSize); this.set('fileLastModified', lastModifiedDate); this.onChange(fileAsBytes, name); }, }, });