From 1b82f566db521ad2e785f40412c2c5124346caf3 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Fri, 29 Apr 2022 08:23:35 -0400
Subject: [PATCH] Fix #1525: Fileupload disable buttons while uploading

---
 components/lib/fileupload/FileUpload.js | 30 ++++++++++++++-----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 863c59c636..c33f50ec61 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -10,18 +10,20 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     const [filesState, setFilesState] = React.useState([]);
     const [progressState, setProgressState] = React.useState(0);
     const [focusedState, setFocusedState] = React.useState(false);
+    const [uploadingState, setUploadingState] = React.useState(false);
     const fileInputRef = React.useRef(null);
     const messagesRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const duplicateIEEvent = React.useRef(false);
     const uploadedFileCount = React.useRef(0);
     const hasFiles = ObjectUtils.isNotEmpty(filesState);
+    const disabled =  props.disabled || uploadingState;
     const chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || localeOption('choose');
     const uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || localeOption('upload');
     const cancelButtonLabel = props.cancelLabel || props.cancelOptions.label || localeOption('cancel');
-    const chooseDisabled = props.disabled || (props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount);
-    const uploadDisabled = props.disabled || !hasFiles;
-    const cancelDisabled = props.disabled || !hasFiles;
+    const chooseDisabled = disabled || (props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount);
+    const uploadDisabled = disabled || !hasFiles;
+    const cancelDisabled = disabled || !hasFiles;
 
     const isImage = (file) => {
         return /^image\//.test(file.type);
@@ -164,6 +166,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
             }
         }
         else {
+            setUploadingState(true);
             let xhr = new XMLHttpRequest();
             let formData = new FormData();
 
@@ -195,6 +198,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
             xhr.onreadystatechange = () => {
                 if (xhr.readyState === 4) {
                     setProgressState(0);
+                    setUploadingState(false);
 
                     if (xhr.status >= 200 && xhr.status < 300) {
                         if (props.fileLimit) {
@@ -231,13 +235,13 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
             }
 
             xhr.withCredentials = props.withCredentials;
-
             xhr.send(formData);
         }
     }
 
     const clear = () => {
         setFilesState([]);
+        setUploadingState(false);
         props.onClear && props.onClear();
         clearInput();
     }
@@ -261,7 +265,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onDragEnter = (event) => {
-        if (!props.disabled) {
+        if (!disabled) {
             event.dataTransfer.dropEffect = 'copy';
             event.stopPropagation();
             event.preventDefault();
@@ -269,7 +273,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onDragOver = (event) => {
-        if (!props.disabled) {
+        if (!disabled) {
             event.dataTransfer.dropEffect = 'copy';
             DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
             event.stopPropagation();
@@ -278,14 +282,14 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onDragLeave = (event) => {
-        if (!props.disabled) {
+        if (!disabled) {
             event.dataTransfer.dropEffect = 'copy';
             DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
         }
     }
 
     const onDrop = (event) => {
-        if (!props.disabled) {
+        if (!disabled) {
             DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
             event.stopPropagation();
             event.preventDefault();
@@ -298,7 +302,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onSimpleUploaderClick = () => {
-        hasFiles ? upload() : fileInputRef.current.click();
+        !disabled && hasFiles ? upload() : fileInputRef.current.click();
     }
 
     React.useImperativeHandle(ref, () => ({
@@ -310,7 +314,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     const createChooseButton = () => {
         const { className, style, icon: _icon, iconOnly } = props.chooseOptions;
         const chooseClassName = classNames('p-button p-fileupload-choose p-component', {
-            'p-disabled': props.disabled,
+            'p-disabled': disabled,
             'p-focus': focusedState,
             'p-button-icon-only': iconOnly
         }, className);
@@ -333,7 +337,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
         const preview = isImage(file) ? <div><img alt={file.name} role="presentation" src={file.objectURL} width={props.previewWidth} /></div> : null;
         const fileName = <div className="p-fileupload-filename">{file.name}</div>;
         const size = <div>{formatSize(file.size)}</div>;
-        const removeButton = <div><Button type="button" icon="pi pi-times" onClick={(e) => remove(e, index)} /></div>
+        const removeButton = <div><Button type="button" icon="pi pi-times" onClick={(e) => remove(e, index)} disabled={disabled} /></div>
         let content = (
             <>
                 {preview}
@@ -450,7 +454,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
         const chooseOptions = props.chooseOptions;
         const otherProps = ObjectUtils.findDiffKeys(props, FileUpload.defaultProps);
         const className = classNames('p-fileupload p-fileupload-basic p-component', props.className);
-        const buttonClassName = classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': props.disabled, 'p-focus': focusedState }, chooseOptions.className);
+        const buttonClassName = classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': disabled, 'p-focus': focusedState }, chooseOptions.className);
         const chooseIcon = chooseOptions.icon || classNames({ 'pi pi-plus': !chooseOptions.icon && (!hasFiles || props.auto), 'pi pi-upload': !chooseOptions.icon && hasFiles && !props.auto });
         const labelClassName = 'p-button-label p-clickable';
         const chooseLabel = chooseOptions.iconOnly ? <span className={labelClassName} dangerouslySetInnerHTML={{ __html: "&nbsp;" }} /> : <span className={labelClassName}>{chooseButtonLabel}</span>;
@@ -460,7 +464,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
             </span>
         );
         const icon = IconUtils.getJSXIcon(chooseIcon, { className: 'p-button-icon p-button-icon-left' }, { props, hasFiles });
-        const input = !hasFiles && <input ref={fileInputRef} type="file" accept={props.accept} multiple={props.multiple} disabled={props.disabled} onChange={onFileSelect} />;
+        const input = !hasFiles && <input ref={fileInputRef} type="file" accept={props.accept} multiple={props.multiple} disabled={disabled} onChange={onFileSelect} />;
 
         return (
             <div className={className} style={props.style} {...otherProps}>