upload attachment error handling working e2e, but still in progress

- shortened mostRecentUploadError to uploadError - fixed attachments module scss indenting - added upload_in_progress styles for temba-loading - updated upload_error styles for upload error msg - added onUploading fn as param to renderAttachments - added onUploading fn as param to onChange handleUploadFile fn - added onLoading fn as param to handleUploadFile fn - adding handleAttachmentUploading to SendMsgForm & MsgLocalizationForm - added temba-loading to JSX IntrinsicElements todo - need to figure out why response is returning "request entity is too large" when it should be returning "Unsupported file type" or "Limit for file uploads is 25 MB"
nyaruka · Nov 16, 2022 · 797db44 · 797db44
1 parent 4947f91
commit 797db44
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 64 deletions.
diff --git a/src/components/flow/actions/localization/MsgLocalizationForm.tsx b/src/components/flow/actions/localization/MsgLocalizationForm.tsx
@@ -29,7 +29,7 @@ export interface MsgLocalizationFormState extends FormState {
   templating: MsgTemplating;
   attachments: Attachment[];
   uploadInProgress: boolean;
-  mostRecentUploadError: string;
+  uploadError: string;
 }
 
 export default class MsgLocalizationForm extends React.Component<
@@ -167,18 +167,40 @@ export default class MsgLocalizationForm extends React.Component<
     this.setState({ templateVariables });
   }
 
+  private handleAttachmentUploading() {
+    const uploadError: string = '';
+    console.log(uploadError);
+    this.setState({ uploadError });
+
+    const uploadInProgress: boolean = true;
+    this.setState({ uploadInProgress });
+  }
+
   private handleAttachmentUploaded(response: AxiosResponse) {
+    console.log(response);
+
     const attachments: any = mutate(this.state.attachments, {
       $push: [{ type: response.data.type, url: response.data.url, uploaded: true }]
     });
     this.setState({ attachments });
+
+    const uploadError: string = '';
+    console.log(uploadError);
+    this.setState({ uploadError });
+
+    const uploadInProgress: boolean = false;
+    this.setState({ uploadInProgress });
   }
 
   private handleAttachmentUploadFailed(error: AxiosError) {
     console.log(error);
-    const mostRecentUploadError: string = error.response.statusText;
-    console.log(mostRecentUploadError);
-    this.setState({ mostRecentUploadError });
+
+    const uploadError: string = error.response.statusText;
+    console.log(uploadError);
+    this.setState({ uploadError });
+
+    const uploadInProgress: boolean = false;
+    this.setState({ uploadInProgress });
   }
 
   private handleAttachmentChanged(index: number, type: string, url: string) {
@@ -263,7 +285,8 @@ export default class MsgLocalizationForm extends React.Component<
           this.context.config.endpoints.attachments,
           this.state.attachments,
           this.state.uploadInProgress,
-          this.state.mostRecentUploadError,
+          this.state.uploadError,
+          this.handleAttachmentUploading,
           this.handleAttachmentUploaded,
           this.handleAttachmentUploadFailed,
           this.handleAttachmentChanged,

diff --git a/src/components/flow/actions/localization/helpers.ts b/src/components/flow/actions/localization/helpers.ts
@@ -36,7 +36,7 @@ export const initializeLocalizedForm = (settings: NodeEditorSettings): MsgLocali
     valid: true,
     attachments: [],
     uploadInProgress: false,
-    mostRecentUploadError: ''
+    uploadError: ''
   };
 
   // check if our form should use a localized action

diff --git a/src/components/flow/actions/sendmsg/SendMsgForm.tsx b/src/components/flow/actions/sendmsg/SendMsgForm.tsx
@@ -49,7 +49,7 @@ export interface SendMsgFormState extends FormState {
   sendAll: boolean;
   attachments: Attachment[];
   uploadInProgress: boolean;
-  mostRecentUploadError: string;
+  uploadError: string;
   template: FormEntry;
   topic: SelectOptionEntry;
   templateVariables: StringEntry[];
@@ -286,6 +286,15 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
     );
   }
 
+  private handleAttachmentUploading() {
+    const uploadError: string = '';
+    console.log(uploadError);
+    this.setState({ uploadError });
+
+    const uploadInProgress: boolean = true;
+    this.setState({ uploadInProgress });
+  }
+
   private handleAttachmentUploaded(response: AxiosResponse) {
     console.log(response);
 
@@ -295,16 +304,20 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
     console.log(attachments);
     this.setState({ attachments });
 
+    const uploadError: string = '';
+    console.log(uploadError);
+    this.setState({ uploadError });
+
     const uploadInProgress: boolean = false;
     this.setState({ uploadInProgress });
   }
 
   private handleAttachmentUploadFailed(error: AxiosError) {
     console.log(error);
 
-    const mostRecentUploadError: string = error.response.statusText;
-    console.log(mostRecentUploadError);
-    this.setState({ mostRecentUploadError });
+    const uploadError: string = error.response.statusText;
+    console.log(uploadError);
+    this.setState({ uploadError });
 
     const uploadInProgress: boolean = false;
     this.setState({ uploadInProgress });
@@ -369,7 +382,8 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
         this.context.config.endpoints.attachments,
         this.state.attachments,
         this.state.uploadInProgress,
-        this.state.mostRecentUploadError,
+        this.state.uploadError,
+        this.handleAttachmentUploading,
         this.handleAttachmentUploaded,
         this.handleAttachmentUploadFailed,
         this.handleAttachmentChanged,

diff --git a/src/components/flow/actions/sendmsg/attachments.module.scss b/src/components/flow/actions/sendmsg/attachments.module.scss
@@ -1,43 +1,47 @@
+@import 'variables.module.scss';
+
 .type_choice {
     display: inline-block;
     width: 180px;
   }
 
-  .url_attachment {
-    margin-bottom: 8px;
-    display: flex;
-    align-items: center;
-
-    .upload {
-
-    }
-
-    .remove_upload {
-      margin-left: 8px;
-      margin-top: 4px;
-      display: inline-block;
-    }
-
-    .url {
-      display: inline-block;
-      margin-left: 8px;
-      width: 329px;
-      margin-right: 10px;
-      input {
-        vertical-align: top;
-        height: 28px !important;
-        margin-top: -11px;
-        width: 100%;
-        font-size: 12px;
-      }
-    }
-
-    .remove {
-      margin-top: 4px;
+.url_attachment {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+
+  .remove_upload {
+    margin-left: 8px;
+    margin-top: 4px;
+    display: inline-block;
+  }
+
+  .url {
+    display: inline-block;
+    margin-left: 8px;
+    width: 329px;
+    margin-right: 10px;
+    input {
+      vertical-align: top;
+      height: 28px !important;
+      margin-top: -11px;
+      width: 100%;
+      font-size: 12px;
     }
   }
 
-  .upload_error {
-    color: red;
+  .remove {
+    margin-top: 4px;
   }
-
+}
+
+#upload_in_progress {
+  margin-left: 10px;
+  padding-top: 0px
+}
+
+.upload_error {
+  color: red;
+  font-size: 12px;
+  margin-left: 10px
+}
diff --git a/src/components/flow/actions/sendmsg/attachments.tsx b/src/components/flow/actions/sendmsg/attachments.tsx
@@ -40,9 +40,12 @@ const getAttachmentTypeOption = (type: string): SelectOption => {
 export const handleUploadFile = (
   endpoint: string,
   files: FileList,
+  onLoading: () => void,
   onSuccess: (response: AxiosResponse) => void,
   onFailure: (error: AxiosError) => void
 ): void => {
+  onLoading();
+
   // if we have a csrf in our cookie, pass it along as a header
   const csrf = getCookie('csrftoken');
   const headers: any = csrf ? { 'X-CSRFToken': csrf } : {};
@@ -55,11 +58,9 @@ export const handleUploadFile = (
   axios
     .post(endpoint, data, { headers })
     .then(response => {
-      console.log(response);
       onSuccess(response);
     })
     .catch(error => {
-      console.log(error);
       onFailure(error);
     });
 };
@@ -68,7 +69,8 @@ export const renderAttachments = (
   endpoint: string,
   attachments: Attachment[],
   uploadInProgress: boolean,
-  mostRecentUploadError: string,
+  uploadError: string,
+  onUploading: () => void,
   onUploaded: (response: AxiosResponse) => void,
   onUploadFailed: (error: AxiosError) => void,
   onAttachmentChanged: (index: number, value: string, url: string) => void,
@@ -77,12 +79,26 @@ export const renderAttachments = (
   const renderedAttachments = attachments.map((attachment, index: number) =>
     attachment.uploaded
       ? renderUpload(index, attachment, onAttachmentRemoved)
-      : renderAttachment(index, attachment, onAttachmentChanged, onAttachmentRemoved)
+      : renderAttachment(
+          index,
+          attachment,
+          uploadInProgress,
+          uploadError,
+          onAttachmentChanged,
+          onAttachmentRemoved
+        )
   );
 
   const emptyOption =
     attachments.length < MAX_ATTACHMENTS
-      ? renderAttachment(-1, { url: '', type: '' }, onAttachmentChanged, onAttachmentRemoved)
+      ? renderAttachment(
+          -1,
+          { url: '', type: '' },
+          uploadInProgress,
+          uploadError,
+          onAttachmentChanged,
+          onAttachmentRemoved
+        )
       : null;
 
   return (
@@ -104,15 +120,10 @@ export const renderAttachments = (
           filePicker = ele;
         }}
         type="file"
-        onChange={e => handleUploadFile(endpoint, e.target.files, onUploaded, onUploadFailed)}
+        onChange={e => {
+          handleUploadFile(endpoint, e.target.files, onUploading, onUploaded, onUploadFailed);
+        }}
       />
-      {renderIf(uploadInProgress)(
-        <span className={styles.upload_error}>{mostRecentUploadError}</span>
-        // todo temba loading
-      )}
-      {renderIf(mostRecentUploadError && mostRecentUploadError.length > 0)(
-        <span className={styles.upload_error}>{mostRecentUploadError}</span>
-      )}
     </>
   );
 };
@@ -168,13 +179,11 @@ export const renderUpload = (
 export const renderAttachment = (
   index: number,
   attachment: Attachment,
+  uploadInProgress: boolean,
+  uploadError: string,
   onAttachmentChanged: (index: number, type: string, url: string) => void,
   onAttachmentRemoved: (index: number) => void
 ): JSX.Element => {
-  // if(this.state.loading){
-  //   return
-  // }
-
   return (
     <div
       className={styles.url_attachment}
@@ -201,6 +210,12 @@ export const renderAttachment = (
           options={index > -1 ? TYPE_OPTIONS : NEW_TYPE_OPTIONS}
         />
       </div>
+      {renderIf(uploadInProgress)(
+        <temba-loading id={styles.upload_in_progress} units="3" size="8"></temba-loading>
+      )}
+      {renderIf(uploadError && uploadError.length > 0)(
+        <div className={styles.upload_error}>{uploadError}</div>
+      )}
       {index > -1 ? (
         <>
           <div className={styles.url}>

diff --git a/src/components/flow/actions/sendmsg/helpers.ts b/src/components/flow/actions/sendmsg/helpers.ts
@@ -60,7 +60,7 @@ export const initializeForm = (
       templateVariables,
       attachments,
       uploadInProgress: false,
-      mostRecentUploadError: '',
+      uploadError: '',
       message: { value: action.text },
       quickReplies: { value: action.quick_replies || [] },
       quickReplyEntry: { value: '' },
@@ -75,7 +75,7 @@ export const initializeForm = (
     templateVariables: [],
     attachments: [],
     uploadInProgress: false,
-    mostRecentUploadError: '',
+    uploadError: '',
     message: { value: '' },
     quickReplies: { value: [] },
     quickReplyEntry: { value: '' },

diff --git a/src/untyped.d.ts b/src/untyped.d.ts
@@ -10,5 +10,6 @@ declare namespace JSX {
     'temba-option': any;
     'temba-checkbox': any;
     'temba-charcount': any;
+    'temba-loading': any;
   }
 }