Added upload remove + review comments

Author: leo95oliveira

.npmignore

@@ -5,4 +5,6 @@ vercel.jsontsconfig.json
 jest.config.ts
 .storybook
 .github
-*DS_Store
+*DS_Store
+*.stories.tsx
+*.test.tsx

src/lib/ImageUpload/ImageUpload.scss

@@ -45,7 +45,12 @@
         }
 
         .file-name {
-            padding: 0.5rem 2rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.5rem;
+            padding: 0.5rem 1.5rem;
             background: $color__n-90;
             border: 1px solid $color__n-60;
             border-top: 0;
@@ -59,6 +64,15 @@
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
+
+            button {
+                padding: 0;
+                background: transparent;
+                border: 0;
+                height: 24px;
+                width: 24px;
+                cursor: pointer;
+            }
         }
     }
 

src/lib/ImageUpload/ImageUpload.test.tsx

@@ -117,7 +117,6 @@ describe("========== C4 IMAGE UPLOAD - RUNNING TESTS ==========", () => {
 
     test("Triggers correct drag and drop event logic on invalid uploads", async () => {
         const fileCache = new WeakMap();
-        const onImageSelected = jest.fn();
         // Set accepted type to png only but provide a jpeg to make it invalid
         render(<ImageUpload {...defaultArgs} accept="image/png" />);
         const input: HTMLInputElement = screen.getByAltText(defaultAltText);

src/lib/ImageUpload/ImageUpload.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, DragEvent, useCallback, useEffect, useRef, useState } from "react";
+import React, { ChangeEvent, DragEvent, useEffect, useRef, useState } from "react";
 
 import "./ImageUpload.scss";
 import { Icon } from "../Icon";
@@ -34,7 +34,6 @@ export const ImageUpload = ({
     hasUploaded = false
 }: ImageUploadProps) => {
     const inputRef = useRef<HTMLInputElement>(null);
-    const labelRef = useRef<HTMLLabelElement>(null);
     const maxSizeInBytes = maxSize * 1024 * 1024;
     const [dragActive, setDragActive] = useState(false);
     const [uploadedImages, setUploadedImages] = useState<File[]>([]);
@@ -51,7 +50,14 @@ export const ImageUpload = ({
             onImageSelected(undefined);
         }
         if (inputRef.current) {
-            inputRef.current.files = null;
+            /**
+             * Simply assigning inputRef.current.files to null
+             * was causing an issue where uploading the same image that was cleared
+             * was not working. To resolve it, we're passing an empty file list
+             * instead.
+             */
+            const dt = new DataTransfer();
+            inputRef.current.files = dt.files;
         }
     }
 
@@ -206,6 +212,13 @@ export const ImageUpload = ({
             </div>
             {uploadedImages && uploadedImages.length > 0 && <div className="file-name">
                 <p>{uploadedImages[0].name}</p>
+                <button
+                    type="button"
+                    aria-label="Remove upload"
+                    onClick={clearInput}
+                >
+                    <Icon color="#ff427b" name="x" size="medium" />
+                </button>
             </div>}
         </div>}
         <div className='c4imgupload'>