Add error handling for signed upload

example/react-app/src/signed-upload.js

@@ -8,7 +8,7 @@ const getUrl = async files => {
     'the uploader waits for the promise to resolve and uses this url to upload',
     files,
   );
-  await new Promise(resolve => setTimeout(resolve, 3000));
+  await new Promise(resolve => setTimeout(resolve, 1000));
   return url;
 };
 
@@ -17,6 +17,7 @@ const NormalUpload = () => {
 
   let { loading, progress, error, done } = useUpload(files, {
     getUrl,
+    name: 'test',
   });
 
   useEffect(() => {

src/clients/xhr/index.js

@@ -1,6 +1,8 @@
 import request from './request';
+import { SET_ERROR } from '../../upload-reducer';
 
 export const createXhrClient = ({ baseUrl, modifyRequest }) => async ({
+  dispatch,
   onProgress,
   files,
   ...options
@@ -10,15 +12,24 @@ export const createXhrClient = ({ baseUrl, modifyRequest }) => async ({
 
   //Get the url using a promise, for signed uploads
   if (modifiedOptions.getUrl) {
-    url = await modifiedOptions.getUrl(files);
+    try {
+      url = await modifiedOptions.getUrl(files);
+    } catch (error) {
+      console.error(error);
+      // If there was a problem, set an error
+      return dispatch({
+        type: SET_ERROR,
+        payload: 'Error getting async upload url',
+      });
+    }
   }
 
   return request({
-    files,
-    onProgress,
     request: {
       ...modifiedOptions,
       url,
+      files,
     },
+    onProgress,
   });
 };

src/clients/xhr/request.js

@@ -1,6 +1,6 @@
 import listeners from './listeners';
 
-export default ({ request, files, onProgress, body }) =>
+export default ({ request, onProgress, body }) =>
   new Promise(resolve => {
     const xhr = new XMLHttpRequest();
 
@@ -17,7 +17,7 @@ export default ({ request, files, onProgress, body }) =>
     if (body) return xhr.send(body);
 
     //send just the file if no fields or filename is set
-    if (!request.name && !request.fields) return xhr.send(files[0]);
+    if (!request.name && !request.fields) return xhr.send(request.files);
 
     var formData = new FormData();
 
@@ -28,7 +28,7 @@ export default ({ request, files, onProgress, body }) =>
       );
     }
 
-    Array.from(files).forEach(file =>
+    Array.from(request.files).forEach(file =>
       formData.append(request.name || 'file', file),
     );
 

src/upload-reducer.js

@@ -1,3 +1,4 @@
+export const SET_ERROR = 'SET_ERROR';
 export const START_UPLOADING = 'START_LOADING';
 export const SET_UPLOAD_PROGRESS = 'SET_UPLOAD_PROGRESS';
 export const FINISH_UPLOADING = 'FINISH_UPLOADING';
@@ -9,6 +10,8 @@ export function reducer(state, action) {
       return { loading: true };
     case SET_UPLOAD_PROGRESS:
       return { ...state, progress: action.payload };
+    case SET_ERROR:
+      return { loading: false, error: action.payload, done: true };
     case FINISH_UPLOADING:
       return {
         done: true,

src/use-upload.js

@@ -13,11 +13,11 @@ const handleUpload = async ({ files, client, options, dispatch }) => {
   let response = await client({
     files,
     ...options,
+    dispatch,
     onProgress: progress =>
       dispatch({ type: SET_UPLOAD_PROGRESS, payload: progress }),
   });
-
-  dispatch({ type: FINISH_UPLOADING, payload: response });
+  if (response) dispatch({ type: FINISH_UPLOADING, payload: response });
 };
 
 export const useUpload = (files, options) => {