Fix #3134: FileUpload onBeforeSelect event (#3135)

primefaces · Aug 5, 2022 · fe641a7 · fe641a7
1 parent fce79f8
commit fe641a7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/api-generator/components/fileupload.js b/api-generator/components/fileupload.js
@@ -225,6 +225,22 @@ const FileUploadEvents = [
             },
         ]
     },
+    {
+        name: 'onBeforeSelect',
+        description: 'Callback to invoke before files are selected. Return false from callback to prevent selection.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original browser event.'
+            },
+            {
+                name: 'event.target.files',
+                type: 'any',
+                description: 'List of selected files.'
+            }
+        ]
+    },
     {
         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
@@ -126,11 +126,11 @@ export class FileUploadDemo extends Component {
     }
 
     async customBase64Uploader(event) {
-        // convert file to base64 encoded 
+        // convert file to base64 encoded
         const file = event.files[0];
         const reader = new FileReader();
         let blob = await fetch(file.objectURL).then(r => r.blob()); //blob:url
-        reader.readAsDataURL(blob); 
+        reader.readAsDataURL(blob);
         reader.onloadend = function () {
             const base64data = reader.result;
             console.log(base64data);
@@ -273,11 +273,11 @@ export const FileUploadDemo = () => {
     }
 
     const customBase64Uploader = async (event) => {
-        // convert file to base64 encoded 
+        // convert file to base64 encoded
         const file = event.files[0];
         const reader = new FileReader();
         let blob = await fetch(file.objectURL).then(r => r.blob()); //blob:url
-        reader.readAsDataURL(blob); 
+        reader.readAsDataURL(blob);
         reader.onloadend = function () {
             const base64data = reader.result;
             console.log(base64data);
@@ -418,11 +418,11 @@ export const FileUploadDemo = () => {
     }
 
     const customBase64Uploader = async (event) => {
-        // convert file to base64 encoded 
+        // convert file to base64 encoded
         const file = event.files[0];
         const reader = new FileReader();
         let blob = await fetch(file.objectURL).then(r => r.blob()); //blob:url
-        reader.readAsDataURL(blob); 
+        reader.readAsDataURL(blob);
         reader.onloadend = function () {
             const base64data = reader.result;
             console.log(base64data);
@@ -568,11 +568,11 @@ const FileUploadDemo = () => {
     }
 
     const customBase64Uploader = async (event) => {
-        // convert file to base64 encoded 
+        // convert file to base64 encoded
         const file = event.files[0];
         const reader = new FileReader();
         let blob = await fetch(file.objectURL).then(r => r.blob()); //blob:url
-        reader.readAsDataURL(blob); 
+        reader.readAsDataURL(blob);
         reader.onloadend = function () {
             const base64data = reader.result;
             console.log(base64data);
@@ -1007,6 +1007,12 @@ const buttonOptions = {
                                 <td>event: DragEvent instance.</td>
                                 <td>Callback to invoke before files dropped. Return false from callback to prevent drop.</td>
                             </tr>
+                            <tr>
+                                <td>onBeforeSelect</td>
+                                <td>event.originalEvent: Original browser event. <br />
+                                    event.target.files: List of selected files.</td>
+                                <td>Callback to invoke before files are selected. Return false from callback to prevent selection.</td>
+                            </tr>
                             <tr>
                                 <td>onUpload</td>
                                 <td>event.xhr: XmlHttpRequest instance.<br />
@@ -1027,7 +1033,7 @@ const buttonOptions = {
                             <tr>
                                 <td>onSelect</td>
                                 <td>event.originalEvent: Original browser event. <br />
-                                    event.files: List of selected files.</td>
+                                    event.target.files: List of selected files.</td>
                                 <td>Callback to invoke when files are selected.</td>
                             </tr>
                             <tr>

diff --git a/components/lib/fileupload/FileUpload.d.ts b/components/lib/fileupload/FileUpload.d.ts
@@ -115,6 +115,7 @@ interface FileUploadProps {
     onBeforeUpload?(e: FileUploadBeforeUploadParams): void;
     onBeforeSend?(e: FileUploadBeforeSendParams): void;
     onBeforeDrop?(e: DragEvent): void;
+    onBeforeSelect?(e: FileUploadSelectParams): 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
@@ -71,6 +71,11 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onFileSelect = (event) => {
+        // give caller a chance to stop the selection
+        if (props.onBeforeSelect && props.onBeforeSelect(event) === false) {
+            return;
+        }
+
         if (event.type !== 'drop' && isIE11() && duplicateIEEvent.current) {
             duplicateIEEvent.current = false;
             return;
@@ -549,6 +554,7 @@ FileUpload.defaultProps = {
     onBeforeUpload: null,
     onBeforeSend: null,
     onBeforeDrop: null,
+    onBeforeSelect: null,
     onUpload: null,
     onError: null,
     onClear: null,