React filepond: Expand server configuration type definitions (#35291)

* fix: Make server config props optional

* feat: Add type definitions for server config callback funcs

* test: Modify test to reflect server callbacks

types/react-filepond/index.d.ts

@@ -30,13 +30,15 @@ export interface FileProps {
     metadata?: {[key: string]: any};
 }
 
+// Note that this duplicates the JS File type declaration, but is necessary
+// to avoid duplicating the name 'File' in this module
+// see: https://developer.mozilla.org/en-US/docs/Web/API/File
+// see: https://github.com/Microsoft/dtslint/issues/173
+// see: https://stackoverflow.com/q/53876793/2517147
+type ActualFileObject = Blob & {readonly lastModified: number; readonly name: string};
+
 export class File extends React.Component<FileProps> {
-    // Note that this duplicates the JS File type declaration, but is necessary
-    // to avoid duplicating the name 'File' in this module
-    // see: https://developer.mozilla.org/en-US/docs/Web/API/File
-    // see: https://github.com/Microsoft/dtslint/issues/173
-    // see: https://stackoverflow.com/q/53876793/2517147
-    file: Blob & {readonly lastModified: number; readonly name: string};
+    file: ActualFileObject;
     fileSize: number;
     fileType: string;
     filename: string;
@@ -85,14 +87,120 @@ interface ServerUrl {
     ondata?: (data: any) => any;
 }
 
+type ProgressServerConfigFunction = (
+    /**
+     * Flag indicating if the resource has a length that can be calculated.
+     * If not, the totalDataAmount has no significant value.  Setting this to
+     * false switches the FilePond loading indicator to infinite mode.
+     */
+    isLengthComputable: boolean,
+    /** The amount of data currently transferred */
+    loadedDataAmount: number,
+    /** The total amount of data to be transferred */
+    totalDataAmount: number,
+) => void;
+
+type ProcessServerConfigFunction = (
+    /** The name of the input field */
+    fieldName: string,
+    /** The actual file object to send */
+    file: ActualFileObject,
+    metadata: {[key: string]: any},
+    /**
+     * Should call the load method when done and pass the returned server file id.
+     * This server file id is then used later on when reverting or restoring a file
+     * so that your server knows which file to return without exposing that info
+     * to the client.
+     */
+    load: (p: string | {[key: string]: any}) => void,
+    /** Can call the error method is something went wrong, should exit after */
+    error: (errorText: string) => void,
+    /**
+     * Should call the progress method to update the progress to 100% before calling load()
+     * Setting computable to false switches the loading indicator to infinite mode
+     */
+    progress: ProgressServerConfigFunction,
+    /** Let FilePond know the request has been cancelled */
+    abort: () => void
+) => void;
+
+type RevertServerConfigFunction = (
+    /** Server file id of the file to restore */
+    uniqueFieldId: any,
+    /** Should call the load method when done */
+    load: () => void,
+    /** Can call the error method is something went wrong, should exit after */
+    error: (errorText: string) => void,
+) => void;
+
+type RestoreServerConfigFunction = (
+    uniqueFileId: any,
+    /** Should call the load method with a file object or blob when done */
+    load: (file: ActualFileObject) => void,
+    /** Can call the error method is something went wrong, should exit after */
+    error: (errorText: string) => void,
+    /**
+     * Should call the progress method to update the progress to 100% before calling load()
+     * Setting computable to false switches the loading indicator to infinite mode
+     */
+    progress: ProgressServerConfigFunction,
+    /** Let FilePond know the request has been cancelled */
+    abort: () => void,
+    /*
+     * Can call the headers method to supply FilePond with early response header string
+     * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getAllResponseHeaders
+     */
+    headers: (headersString: string) => void,
+) => void;
+
+type LoadServerConfigFunction = (
+    source: any,
+    /** Should call the load method with a file object or blob when done */
+    load: (file: ActualFileObject) => void,
+    /** Can call the error method is something went wrong, should exit after */
+    error: (errorText: string) => void,
+    /**
+     * Should call the progress method to update the progress to 100% before calling load()
+     * Setting computable to false switches the loading indicator to infinite mode
+     */
+    progress: ProgressServerConfigFunction,
+    /** Let FilePond know the request has been cancelled */
+    abort: () => void,
+    /*
+     * Can call the headers method to supply FilePond with early response header string
+     * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getAllResponseHeaders
+     */
+    headers: (headersString: string) => void,
+) => void;
+
+type FetchServerConfigFunction = (
+    url: string,
+    /** Should call the load method with a file object or blob when done */
+    load: (file: ActualFileObject) => void,
+    /** Can call the error method is something went wrong, should exit after */
+    error: (errorText: string) => void,
+    /**
+     * Should call the progress method to update the progress to 100% before calling load()
+     * Setting computable to false switches the loading indicator to infinite mode
+     */
+    progress: ProgressServerConfigFunction,
+    /** Let FilePond know the request has been cancelled */
+    abort: () => void,
+    /*
+     * Can call the headers method to supply FilePond with early response header string
+     * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getAllResponseHeaders
+     */
+    headers: (headersString: string) => void,
+) => void;
+
 interface FilePondServerConfigProps {
     instantUpload?: boolean;
     server?: string | {
-        process: string | ServerUrl;
-        revert: string | ServerUrl;
-        restore: string | ServerUrl;
-        load: string | ServerUrl;
-        fetch: string | ServerUrl;
+        process?: string | ServerUrl | ProcessServerConfigFunction;
+        revert?: string | ServerUrl | RevertServerConfigFunction;
+        restore?: string | ServerUrl | RestoreServerConfigFunction;
+        load?: string | ServerUrl | LoadServerConfigFunction;
+        fetch?: string | ServerUrl | FetchServerConfigFunction;
     };
 }
 

types/react-filepond/react-filepond-tests.tsx

@@ -31,7 +31,13 @@ class App extends React.Component<{}, AppState> {
                     ref={ref => this.pond = ref}
                     allowMultiple={true}
                     maxFiles={3}
-                    server='/api'
+                    server={{
+                        process: (field, file, metadata, load, error, progress, abort) => {},
+                        revert: (id, load, error) => {},
+                        restore: (id, load, error, progress, abort, headers) => {},
+                        load: (source, load, error, progress, abort, headers) => {},
+                        fetch: (url, load, error, progress, abort, headers) => {},
+                    }}
                     oninit={() => this.handleInit() }
                     onupdatefiles={(fileItems) => {
                         // Set current file objects to this.state