TEC-270: OXD file input add binary file support

orangehrm · Dec 6, 2023 · be2e112 · be2e112
1 parent 29964f6
commit be2e112
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 39 deletions.
diff --git a/components/src/core/components/Input/FileInput.vue b/components/src/core/components/Input/FileInput.vue
@@ -45,11 +45,12 @@
         </div>
       </div>
     </div>
-    <div v-if="fileUpdateMode === 'replace' || !inputFile.name">
+    <div v-show="fileUpdateMode === 'replace' || !inputFile.name">
       <input
         type="file"
         ref="input"
         v-bind="$attrs"
+        :disabled="disabled"
         :class="fileInputClasses"
         @focus="onFocus"
         @blur="onBlur"
@@ -81,16 +82,16 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from 'vue';
 import {
-  ATTACHMENT_UPDATE_MODE_KEEP,
+  OutputFile,
   FileUpdateMode,
   FILE_UPDATE_MODES,
-  OutputFile,
+  ATTACHMENT_UPDATE_MODE_KEEP,
 } from './types';
+import {defineComponent, PropType} from 'vue';
+import translateMixin from '../../../mixins/translate';
 import Icon from '@orangehrm/oxd/core/components/Icon/Icon.vue';
 import Radio from '@orangehrm/oxd/core/components/Input/RadioInput.vue';
-import translateMixin from '../../../mixins/translate';
 
 export interface State {
   focused: boolean;
@@ -153,6 +154,13 @@ export default defineComponent({
       type: Function,
       required: false,
     },
+    encoding: {
+      type: String,
+      default: 'base64',
+      validator: function(value: string) {
+        return ['base64', 'binary'].indexOf(value) !== -1;
+      },
+    },
   },
   beforeMount() {
     if (this.inputFile.name) {
@@ -239,11 +247,13 @@ export default defineComponent({
     },
     onInput(e: Event) {
       e.preventDefault();
-      const files = [...((e.target as HTMLInputElement).files || [])];
+      const files = Array.from((e.target as HTMLInputElement).files);
       const inputValue = files.map((file: File) => file.name).join(', ');
 
       if (files.length > 0) {
-        this.readFiles(files);
+        this.readFiles(files).then(files =>
+          this.$emit('update:modelValue', files),
+        );
         this.inputValue = inputValue;
       } else {
         this.inputValue = inputValue;
@@ -252,40 +262,35 @@ export default defineComponent({
 
       this.$emit('input', e);
     },
-    readFiles(files: Array<File>) {
-      const count = files.length;
-      const outputFileArray: OutputFile[] = [];
-      for (let i = count - 1; i >= 0; i--) {
-        const file = files[i];
+    readFiles(files: File[]): Promise<OutputFile[]> {
+      return new Promise(resolve =>
+        Promise.all(
+          files.map(file => this.readFile(file, this.encoding === 'base64')),
+        )
+          .then(readFiles => resolve(readFiles))
+          .catch(() => resolve(null)),
+      );
+    },
+    readFile(file: File, isBase64Encoded: boolean): Promise<OutputFile> {
+      return new Promise((resolve, reject) => {
         const reader = new FileReader();
-        reader.onload = (event: ProgressEvent<FileReader>) => {
-          if (
-            typeof event.target?.result === 'string' ||
-            event.target?.result instanceof String
-          ) {
-            const base64 = event.target?.result.split(',').pop();
-            if (base64) {
-              const outputFile: OutputFile = {
-                name: file.name,
-                type: file.type,
-                size: file.size,
-                base64,
-                ...(this.inputFile.name && {
-                  fileUpdateMode: this.fileUpdateMode,
-                }),
-              };
-
-              outputFileArray.push(outputFile);
-              if (outputFileArray.length === files.length)
-                this.onFilesReadComplete(outputFileArray);
-            }
-          }
+        reader.onerror = reject;
+        reader.onload = () => {
+          let base64, binary;
+          if (typeof reader.result === 'string')
+            base64 = (reader.result as string).split(',').pop();
+          if (typeof reader.result === 'object') binary = reader.result;
+          resolve({
+            name: file.name,
+            type: file.type,
+            size: file.size,
+            base64: base64 ?? null,
+            binary: binary ?? null,
+          });
         };
-        reader.readAsDataURL(file);
-      }
-    },
-    onFilesReadComplete(files: OutputFile[]) {
-      this.$emit('update:modelValue', files);
+        if (isBase64Encoded) reader.readAsDataURL(file);
+        reader.readAsArrayBuffer(file);
+      });
     },
     setModelValue() {
       const modelArr = [

diff --git a/components/src/core/components/Input/types.ts b/components/src/core/components/Input/types.ts
@@ -1,5 +1,6 @@
 export interface OutputFile extends Pick<File, 'name' | 'type' | 'size'> {
   base64?: string;
+  binary?: ArrayBuffer;
   fileUpdateMode?: string;
 }