Fix #33

Author: Jovert Lota Palonpon

resources/js/ui/Dropzone.js

@@ -146,7 +146,24 @@ function Dropzone(props) {
         }
 
         if (removedFile.status === 'uploaded') {
-            handleFileRemoved(removedFile, () => {
+            handleFileRemoved(removedFile, (removed, message = '') => {
+                if (!removed) {
+                    // Let it be known why the file is not removed.
+                    setFiles(
+                        files.map(file => {
+                            if (file.url === removedFile.url) {
+                                return Object.assign(file, {
+                                    message,
+                                });
+                            }
+
+                            return file;
+                        }),
+                    );
+
+                    return;
+                }
+
                 setFiles(files.filter(file => file.url !== removedFile.url));
             });
 
@@ -214,20 +231,33 @@ function Dropzone(props) {
             return;
         }
 
-        handleUpload(files.find(file => file.status === 'uploading'), () => {
-            setFiles(
-                files.map(file => {
-                    if (file.status === 'uploading') {
-                        return Object.assign(file, {
-                            status: 'uploaded',
-                            message: '',
-                        });
-                    }
+        handleUpload(
+            files.find(file => file.status === 'uploading'),
+            (uploaded, message = '') => {
+                function updateFiles(fileStatus, fileMessage = '') {
+                    setFiles(
+                        files.map(file => {
+                            if (file.status === 'uploading') {
+                                return Object.assign(file, {
+                                    status: fileStatus,
+                                    message: fileMessage,
+                                });
+                            }
 
-                    return file;
-                }),
-            );
-        });
+                            return file;
+                        }),
+                    );
+                }
+
+                if (!uploaded) {
+                    updateFiles('rejected', message);
+
+                    return;
+                }
+
+                updateFiles('uploaded');
+            },
+        );
     }, [files]);
 
     const { getRootProps, getInputProps, open, isDragActive } = useDropzone({

resources/js/views/__backoffice/users/Forms/Avatar.js

@@ -53,10 +53,26 @@ class Avatar extends Component {
         const { user } = this.props;
 
         try {
-            await axios.delete(`api/v1/users/${user.id}/avatar`);
+            const response = await axios.delete(
+                `api/v1/users/${user.id}/avatar`,
+            );
 
-            removed();
-        } catch (error) {}
+            if (response.status !== 200) {
+                removed(false, response.statusText);
+
+                return;
+            }
+
+            removed(true);
+        } catch (error) {
+            if (!error.response) {
+                removed(false, 'File not removed due to unknown error.');
+
+                return;
+            }
+
+            removed(false, error.response.statusText);
+        }
     };
 
     /**
@@ -74,7 +90,7 @@ class Avatar extends Component {
             const formData = new FormData();
             formData.append('avatar', file);
 
-            await fetch(`api/v1/users/${user.id}/avatar`, {
+            const response = await fetch(`api/v1/users/${user.id}/avatar`, {
                 method: 'POST',
                 headers: {
                     Authorization:
@@ -85,8 +101,20 @@ class Avatar extends Component {
                 body: formData,
             });
 
-            done();
-        } catch (error) {}
+            if (response.status !== 200) {
+                done(false, response.statusText);
+            }
+
+            done(true);
+        } catch (error) {
+            if (!error.response) {
+                removed(false, 'File not uploaded due to unknown error.');
+
+                return;
+            }
+
+            removed(false, error.response.statusText);
+        }
     };
 
     componentDidMount() {