From d752c1ec77150cc7f9ce6dcbdcd44946c80685d0 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 28 May 2021 10:08:16 +0530
Subject: [PATCH 1/2] update on file change

---
 src/dashboard/Data/Browser/AddColumnDialog.react.js | 11 ++++++++---
 src/dashboard/Data/Browser/Browser.react.js         |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/Data/Browser/AddColumnDialog.react.js b/src/dashboard/Data/Browser/AddColumnDialog.react.js
index bf1cf6c33d..4e9fb45616 100644
--- a/src/dashboard/Data/Browser/AddColumnDialog.react.js
+++ b/src/dashboard/Data/Browser/AddColumnDialog.react.js
@@ -77,8 +77,13 @@ export default class AddColumnDialog extends React.Component {
     if (file) {
       let base64 = await this.getBase64(file);
       const parseFile = new Parse.File(file.name, { base64 });
-      await parseFile.save();
-      return parseFile
+      try {
+        await parseFile.save();
+        return parseFile;
+      } catch (err) {
+        this.props.showNote(err.message, true);
+        return parseFile;
+      }
     }
   }
 
@@ -167,7 +172,7 @@ export default class AddColumnDialog extends React.Component {
           onChange={async (defaultValue) => await this.handleDefaultValueChange(defaultValue)} />
       case 'File':
         return <FileInput
-          value={this.defaultValue ? this.defaultValue._name : ''}
+          value={this.state.defaultValue ? this.state.defaultValue._name : ''}
           onChange={async (defaultValue) => await this.handleDefaultValueChange(defaultValue)} />
     }
   }
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 85043c01cd..7fafa2f704 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -1118,6 +1118,7 @@ class Browser extends DashboardView {
           classes={this.props.schema.data.get('classes').keySeq().toArray()}
           onCancel={() => this.setState({ showAddColumnDialog: false })}
           onConfirm={this.addColumn}
+          showNote={this.showNote}
           parseServerVersion={currentApp.serverInfo && currentApp.serverInfo.parseServerVersion} />
       );
     } else if (this.state.showRemoveColumnDialog) {

From 328790e180e8bbeddc047ddeb4d8c0b33fd8f0d4 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 28 May 2021 11:00:49 +0530
Subject: [PATCH 2/2] showing a spinner while uploading file

---
 src/components/FileInput/FileInput.react.js     | 14 +++++++++-----
 src/components/FileInput/FileInput.scss         | 17 +++++++++++++++++
 .../Data/Browser/AddColumnDialog.react.js       | 11 ++++++++++-
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/FileInput/FileInput.react.js b/src/components/FileInput/FileInput.react.js
index 43cac1801e..1d59b78d23 100644
--- a/src/components/FileInput/FileInput.react.js
+++ b/src/components/FileInput/FileInput.react.js
@@ -49,7 +49,7 @@ export default class FileInput extends React.Component {
     }
     let label = this.renderLabel();
     let buttonStyles = [styles.button];
-    if (this.props.disabled) {
+    if (this.props.disabled || this.props.uploading) {
       buttonStyles.push(styles.disabled);
     }
     if (label) {
@@ -58,10 +58,14 @@ export default class FileInput extends React.Component {
 
     return (
       <div className={styles.input}>
-        <div className={buttonStyles.join(' ')}>
-          {label ?
-            <span>Change file</span> :
-            <span>Upload a file</span>}
+        <div className={buttonStyles.join(" ")}>
+          {this.props.uploading ? (
+            <div className={styles.spinner}></div>
+          ) : label ? (
+            <span>Change file</span>
+          ) : (
+            <span>Upload a file</span>
+          )}
           <input {...inputProps} />
         </div>
         {label}
diff --git a/src/components/FileInput/FileInput.scss b/src/components/FileInput/FileInput.scss
index 3a87747a9c..76984eb8e9 100644
--- a/src/components/FileInput/FileInput.scss
+++ b/src/components/FileInput/FileInput.scss
@@ -49,6 +49,17 @@
   }
 }
 
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: .15em solid $blue;
+  vertical-align: bottom;
+  border-right-color: transparent;
+  border-radius: 50%;
+  @include animation('spinner-border .75s linear infinite');
+}
+
 .disabled, .disabled:hover {
   background: #e0e0ea;
   border-color: #e0e0ea;
@@ -75,4 +86,10 @@
 
 a.label {
   color: $blue;
+}
+
+@include keyframes(spinner-border) {
+  100% {
+    @include transform(rotate(360deg));
+  }
 }
\ No newline at end of file
diff --git a/src/dashboard/Data/Browser/AddColumnDialog.react.js b/src/dashboard/Data/Browser/AddColumnDialog.react.js
index 4e9fb45616..44ec8aff6b 100644
--- a/src/dashboard/Data/Browser/AddColumnDialog.react.js
+++ b/src/dashboard/Data/Browser/AddColumnDialog.react.js
@@ -39,7 +39,8 @@ export default class AddColumnDialog extends React.Component {
       name: '',
       required: false,
       defaultValue: undefined,
-      isDefaultValueValid: true
+      isDefaultValueValid: true,
+      uploadingFile: false
     };
     this.renderDefaultValueInput = this.renderDefaultValueInput.bind(this)
     this.handleDefaultValueChange = this.handleDefaultValueChange.bind(this)
@@ -77,12 +78,19 @@ export default class AddColumnDialog extends React.Component {
     if (file) {
       let base64 = await this.getBase64(file);
       const parseFile = new Parse.File(file.name, { base64 });
+      this.setState({
+        uploadingFile: true
+      });
       try {
         await parseFile.save();
         return parseFile;
       } catch (err) {
         this.props.showNote(err.message, true);
         return parseFile;
+      } finally {
+        this.setState({
+          uploadingFile: false
+        });
       }
     }
   }
@@ -173,6 +181,7 @@ export default class AddColumnDialog extends React.Component {
       case 'File':
         return <FileInput
           value={this.state.defaultValue ? this.state.defaultValue._name : ''}
+          uploading={this.state.uploadingFile}
           onChange={async (defaultValue) => await this.handleDefaultValueChange(defaultValue)} />
     }
   }