From f0a55597c685eba21560cf9b8b875e19643f60a6 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Wed, 3 Aug 2022 18:11:20 +0530
Subject: [PATCH] [[ Enhancement ]]: FilePicker - added  onFileLoaded and
 onFileDeselected events (#3673)

* added onFileLoaded event

* added onFileDeselected event

* removed extra whitespace
---
 frontend/src/Editor/Components/FilePicker.jsx | 27 ++++++++++---------
 .../src/Editor/WidgetManager/widgetConfig.js  |  6 ++++-
 frontend/src/_helpers/appUtils.js             |  2 ++
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx
index 980621999c..565815bac5 100644
--- a/frontend/src/Editor/Components/FilePicker.jsx
+++ b/frontend/src/Editor/Components/FilePicker.jsx
@@ -241,18 +241,20 @@ export const FilePicker = ({
       });
       setSelectedFiles(fileData);
       onComponentOptionChanged(component, 'file', fileData);
-      onEvent('onFileSelected', { component }).then(() => {
-        setAccepted(true);
-        // eslint-disable-next-line no-unused-vars
-        return new Promise(function (resolve, reject) {
-          setTimeout(() => {
-            setShowSelectedFiles(true);
-            setAccepted(false);
-            onComponentOptionChanged(component, 'isParsing', false);
-            resolve();
-          }, 600);
-        });
-      });
+      onEvent('onFileSelected', { component })
+        .then(() => {
+          setAccepted(true);
+          // eslint-disable-next-line no-unused-vars
+          return new Promise(function (resolve, reject) {
+            setTimeout(() => {
+              setShowSelectedFiles(true);
+              setAccepted(false);
+              onComponentOptionChanged(component, 'isParsing', false);
+              resolve();
+            }, 600);
+          });
+        })
+        .then(() => onEvent('onFileLoaded', { component }));
     }
 
     if (fileRejections.length > 0) {
@@ -275,6 +277,7 @@ export const FilePicker = ({
       copy.splice(index, 1);
       return copy;
     });
+    onEvent('onFileDeselected', { component });
   };
 
   useEffect(() => {
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 4dec32cb1e..7a9d399265 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -2628,7 +2628,11 @@ export const widgets = [
         },
       },
     },
-    events: { onFileSelected: { displayName: 'On File Selected' } },
+    events: {
+      onFileSelected: { displayName: 'On File Selected' },
+      onFileLoaded: { displayName: 'On File Loaded' },
+      onFileDeselected: { displayName: 'On File Deselected' },
+    },
     styles: {
       visibility: {
         type: 'toggle',
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 1669e874f1..8fa84db94d 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -500,6 +500,8 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
       'onSelect',
       'onClick',
       'onFileSelected',
+      'onFileLoaded',
+      'onFileDeselected',
       'onStart',
       'onResume',
       'onReset',