Robust Photo Uploader, handling unsupported file types, upload error, apollo uploader (#1400)

* added uploaded controller, handled unsupported image formatting and error uploading styling

* remove callbacks

front/src/modules/settings/profile/components/ProfilePictureUploader.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState } from 'recoil';
 
@@ -14,19 +15,47 @@ export function ProfilePictureUploader() {
   const [uploadPicture] = useUploadProfilePictureMutation();
   const [removePicture] = useRemoveProfilePictureMutation();
   const [currentUser] = useRecoilState(currentUserState);
-  async function onUpload(file: File) {
+  const [uploadController, setUploadController] =
+    useState<AbortController | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  async function handleUpload(file: File) {
     if (!file) {
       return;
     }
-    await uploadPicture({
-      variables: {
-        file,
-      },
-      refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
-    });
+
+    const controller = new AbortController();
+    setUploadController(controller);
+
+    try {
+      const result = await uploadPicture({
+        variables: {
+          file,
+        },
+        context: {
+          fetchOptions: {
+            signal: controller.signal,
+          },
+        },
+        refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+      });
+
+      setUploadController(null);
+      setError(null);
+      return result;
+    } catch (error) {
+      setError(error as Error);
+    }
   }
 
-  async function onRemove() {
+  async function handleAbort() {
+    if (uploadController) {
+      uploadController.abort();
+      setUploadController(null);
+    }
+  }
+
+  async function handleRemove() {
     await removePicture({
       variables: {
         where: {
@@ -40,8 +69,10 @@ export function ProfilePictureUploader() {
   return (
     <ImageInput
       picture={getImageAbsoluteURIOrBase64(currentUser?.avatarUrl)}
-      onUpload={onUpload}
-      onRemove={onRemove}
+      onUpload={handleUpload}
+      onRemove={handleRemove}
+      onAbort={handleAbort}
+      error={error}
     />
   );
 }

front/src/modules/ui/input/image/components/ImageInput.tsx

@@ -75,6 +75,8 @@ type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
   picture: string | null | undefined;
   onUpload?: (file: File) => void;
   onRemove?: () => void;
+  onAbort?: () => void;
+  error?: Error | null;
   disabled?: boolean;
 };
 
@@ -82,6 +84,8 @@ export function ImageInput({
   picture,
   onUpload,
   onRemove,
+  onAbort,
+  error,
   disabled = false,
   ...restProps
 }: Props) {
@@ -112,6 +116,7 @@ export function ImageInput({
           <StyledHiddenFileInput
             type="file"
             ref={hiddenFileInput}
+            accept="image/jpeg, image/png, image/gif" // to desired specification
             onChange={(event) => {
               if (onUpload) {
                 if (event.target.files) {
@@ -136,10 +141,21 @@ export function ImageInput({
             disabled={!picture || disabled}
             fullWidth
           />
+          {onAbort && (
+            <Button
+              icon={<IconTrash size={theme.icon.size.sm} />}
+              onClick={onAbort}
+              variant="secondary"
+              title="Abort"
+              disabled={!picture || disabled}
+              fullWidth
+            />
+          )}
         </StyledButtonContainer>
         <StyledText>
           We support your best PNGs, JPEGs and GIFs portraits under 10MB
         </StyledText>
+        {error && <StyledText>{error.message}</StyledText>}
       </StyledContent>
     </StyledContainer>
   );