Fix primefaces#2690: FileUpload onBeforeDrop callback

melloware · Apr 29, 2022 · 040adf8 · 040adf8
1 parent 90f433c
commit 040adf8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/api-generator/components/fileupload.js b/api-generator/components/fileupload.js
@@ -214,6 +214,17 @@ const FileUploadEvents = [
             }
         ]
     },
+    {
+        name: 'onBeforeDrop',
+        description: 'Callback to invoke before files dropped. Return false from callback to prevent drop.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original browser event.'
+            },
+        ]
+    },
     {
         name: 'onUpload',
         description: 'Callback to invoke when file upload is complete.',

diff --git a/components/doc/fileupload/index.js b/components/doc/fileupload/index.js
@@ -1002,6 +1002,11 @@ const buttonOptions = {
                                 <td>Callback to invoke before file send begins to customize the request
                                     such as adding headers.</td>
                             </tr>
+                            <tr>
+                                <td>onBeforeDrop</td>
+                                <td>event: DragEvent instance.</td>
+                                <td>Callback to invoke before files dropped. Return false from callback to prevent drop.</td>
+                            </tr>
                             <tr>
                                 <td>onUpload</td>
                                 <td>event.xhr: XmlHttpRequest instance.<br />

diff --git a/components/lib/fileupload/FileUpload.d.ts b/components/lib/fileupload/FileUpload.d.ts
@@ -114,6 +114,7 @@ interface FileUploadProps {
     progressBarTemplate?: FileUploadProgressBarTemplateType;
     onBeforeUpload?(e: FileUploadBeforeUploadParams): void;
     onBeforeSend?(e: FileUploadBeforeSendParams): void;
+    onBeforeDrop?(e: DragEvent): void;
     onUpload?(e: FileUploadUploadParams): void;
     onError?(e: FileUploadErrorParams): void;
     onClear?(): void;

diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
@@ -278,16 +278,23 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onDrop = (event) => {
-        if (!props.disabled) {
-            DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
-            event.stopPropagation();
-            event.preventDefault();
+        if (props.disabled) {
+            return;
+        }
 
-            const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
-            const allowDrop = props.multiple || (ObjectUtils.isEmpty(filesState) && files && files.length === 1);
+        DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
+        event.stopPropagation();
+        event.preventDefault();
 
-            allowDrop && onFileSelect(event);
+        // give caller a chance to stop the drop
+        if (props.onBeforeDrop && props.onBeforeDrop(event) === false) {
+            return;
         }
+
+        const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+        const allowDrop = props.multiple || (ObjectUtils.isEmpty(filesState) && files && files.length === 1);
+
+        allowDrop && onFileSelect(event);
     }
 
     const onSimpleUploaderClick = () => {
@@ -527,6 +534,7 @@ FileUpload.defaultProps = {
     progressBarTemplate: null,
     onBeforeUpload: null,
     onBeforeSend: null,
+    onBeforeDrop: null,
     onUpload: null,
     onError: null,
     onClear: null,