Upload control: how to reject file via custom saveUrl?

[Ruud]

Hi,

I'm creating a file upload control. I need to use a custom endpoint for uploading, so I created an object for the saveUrl property as described here.This works fine.

Only thing missing is how to handle exceptions, so when a file is rejected by the external service. If the endpoint raises an error, I now resolve to ensure the Upload control stops the Uploading message. But I want the control to stop this message and show the file in red with the error message. See my (simplified) code below. Thanks in advance for your feedback!

 

01.const onSaveRequest = (
02.       files: UploadFileInfo[],
03.       options: {
04.           formData: FormData;
05.           requestOptions: any;
06.       },
07.       onProgress: any
08.   ): Promise<{ uid: string }> => {
09.       const currentFile = files[0] as UploadFileInfo;
10.       const uid = currentFile.uid;
11.       const file = currentFile.getRawFile();
12.
13.       const saveRequestPromise = new Promise<{ uid: string }>(async (resolve) => {
14.           ([my external service call]).then((data) => {
15.                   // all well, this works
16.                   resolve({ uid: uid });
17.               }).catch(error=>{
18.                   // how to reject so Upload control shows error for this file?
19.                   resolve({ uid: uid });
20.               });
21.           });
22.       });
23.       return saveRequestPromise;
24.   };

[Stefan]

Hello, Ruud,

Thank you for the details.

This can be achieved by rejecting the promise:

reject({ uid: uid })

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject

I have updated the example:

https://stackblitz.com/edit/react-bvfjbb?file=app/main.jsx (upload a new file to see the result)

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Ruud]

Thanks! This works as expected.