Read file as dataURL or textString (#1415)

* Read file as dataURL or textString

* adds new properties to the file picker docs

* url -> URL encoded string

* typo fix

* docs update

* remove file reading options, and default file reading as textSting and dataURL

* remove docs: definations

* name variable should be empty string too by default

* data (exposed variable) updated to dataURL

* data (exposed variable) updated to dataURL

frontend/src/Editor/Components/FilePicker.jsx

@@ -17,6 +17,7 @@ export const FilePicker = ({ width, height, component, currentState, onComponent
     typeof enableDropzone !== 'boolean' ? resolveWidgetFieldValue(enableDropzone, currentState) : true;
   const parsedEnablePicker =
     typeof enablePicker !== 'boolean' ? resolveWidgetFieldValue(enablePicker, currentState) : true;
+
   const parsedMaxFileCount =
     typeof maxFileCount !== 'number' ? resolveWidgetFieldValue(maxFileCount, currentState) : maxFileCount;
   const parsedEnableMultiple =
@@ -94,6 +95,47 @@ export const FilePicker = ({ width, height, component, currentState, onComponent
   const [showSelectdFiles, setShowSelectedFiles] = React.useState(false);
   const [selectedFiles, setSelectedFiles] = React.useState([]);
 
+  /**
+   * *getFileData()
+   * @param {*} file
+   * @param {*} method: readAsDataURL, readAsText
+   */
+  const getFileData = (file = {}, method = 'readAsText') => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (result) => {
+        resolve([result, reader]);
+      };
+      reader[method](file);
+      reader.onerror = (error) => {
+        reject(error);
+        if (error.name == 'NotReadableError') {
+          toast.error(error.message, { hideProgressBar: true, autoClose: 3000 });
+        }
+      };
+    }).then((result) => {
+      if (method === 'readAsDataURL') {
+        return result[0].srcElement.result.split(',')[1];
+      }
+      return result[0].srcElement.result;
+    });
+  };
+
+  const fileReader = async (file) => {
+    // * readAsText
+    const readFileAsText = await getFileData(file);
+
+    // * readAsDataURL
+    const readFileAsDataURL = await getFileData(file, 'readAsDataURL');
+
+    return {
+      name: file.name,
+      type: file.type,
+      content: readFileAsText,
+      dataURL: readFileAsDataURL,
+    };
+  };
+
   useEffect(() => {
     if (acceptedFiles.length === 0) {
       onComponentOptionChanged(component, 'file', []);
@@ -102,23 +144,9 @@ export const FilePicker = ({ width, height, component, currentState, onComponent
     if (acceptedFiles.length !== 0) {
       const fileData = parsedEnableMultiple ? [...selectedFiles] : [];
       acceptedFiles.map((acceptedFile) => {
-        return new Promise((resolve, reject) => {
+        const acceptedFileData = fileReader(acceptedFile);
-          let reader = new FileReader();
+        acceptedFileData.then((data) => {
-          reader.onload = (result) => {
+          fileData.push(data);
-            //* Resolve both the FileReader result and its original file.
-            resolve([result, acceptedFile]);
-          };
-          //* Reads contents of the file as a text string.
-          reader.readAsText(acceptedFile);
-        }).then((zippedResults) => {
-          //? Run the callback after all files have been read.
-          const fileSelected = {
-            name: zippedResults[1].name,
-            content: zippedResults[0].srcElement.result,
-            type: zippedResults[1].type,
-          };
-
-          fileData.push(fileSelected);
         });
       });
 

frontend/src/Editor/Components/components.js

@@ -1166,7 +1166,7 @@ export const componentTypes = [
       disabledState: { type: 'code', displayName: 'Disable' },
     },
     exposedVariables: {
-      file: [{ name: [], content: [], type: [] }],
+      file: [{ name: '', content: '', dataURL: '', type: '' }],
     },
     definition: {
       others: {