From 9ab4b7e9e11801ffdf234b566347c2f1be80134c Mon Sep 17 00:00:00 2001 From: Zach Posten Date: Mon, 13 May 2019 17:53:51 -0500 Subject: [PATCH] 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 | 130 ++++++++++++++++-- types/react-filepond/react-filepond-tests.tsx | 8 +- 2 files changed, 126 insertions(+), 12 deletions(-) diff --git a/types/react-filepond/index.d.ts b/types/react-filepond/index.d.ts index 98992c45b4..b686bad17e 100644 --- a/types/react-filepond/index.d.ts +++ b/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 { - // 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; }; } diff --git a/types/react-filepond/react-filepond-tests.tsx b/types/react-filepond/react-filepond-tests.tsx index b0718a6b87..8a13bbe1e5 100644 --- a/types/react-filepond/react-filepond-tests.tsx +++ b/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