fix: add message to suggest dnd local file

client/app/components/modals/ImageReplaceModal.tsx

@@ -5,39 +5,48 @@ import SearchResults from "../SearchResults";
 import { AsyncButton } from "../AsyncButton";
 
 interface Props {
-    type: string
+  type: string;
-    id: number
+  id: number;
-    musicbrainzId?: string
+  musicbrainzId?: string;
-    open: boolean 
+  open: boolean;
-    setOpen: Function
+  setOpen: Function;
 }
 
-export default function ImageReplaceModal({ musicbrainzId, type, id, open, setOpen }: Props) {
+export default function ImageReplaceModal({
-    const [query, setQuery] = useState('');
+  musicbrainzId,
-    const [loading, setLoading] = useState(false)
+  type,
-    const [suggestedImgLoading, setSuggestedImgLoading] = useState(true)
+  id,
+  open,
+  setOpen,
+}: Props) {
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [suggestedImgLoading, setSuggestedImgLoading] = useState(true);
 
   const doImageReplace = (url: string) => {
-        setLoading(true)
+    setLoading(true);
-        const formData = new FormData
+    setError("");
-        formData.set(`${type.toLowerCase()}_id`, id.toString())
+    const formData = new FormData();
-        formData.set("image_url", url)
+    formData.set(`${type.toLowerCase()}_id`, id.toString());
+    formData.set("image_url", url);
     replaceImage(formData)
       .then((r) => {
-            if (r.ok) {
+        if (r.status >= 200 && r.status < 300) {
-                window.location.reload()
+          window.location.reload();
         } else {
-                console.log(r)
+          r.json().then((r) => setError(r.error));
-                setLoading(false)
+          setLoading(false);
         }
       })
-        .catch((err) => console.log(err))
+      .catch((err) => setError(err));
-    }
+  };
 
   const closeModal = () => {
-        setOpen(false)
+    setOpen(false);
-        setQuery('')
+    setQuery("");
-    }
+    setError("");
+  };
 
   return (
     <Modal isOpen={open} onClose={closeModal}>
@@ -47,23 +56,34 @@ export default function ImageReplaceModal({ musicbrainzId, type, id, open, setOp
           type="text"
           autoFocus
           // i find my stupid a(n) logic to be a little silly so im leaving it in even if its not optimal
-                    placeholder={`Image URL`}
+          placeholder={`Enter image URL, or drag-and-drop a local file`}
           className="w-full mx-auto fg bg rounded p-2"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
         />
-                { query != "" ? 
+        {query != "" ? (
           <div className="flex gap-2 mt-4">
-                    <AsyncButton loading={loading} onClick={() => doImageReplace(query)}>Submit</AsyncButton>
+            <AsyncButton
-                </div> :
+              loading={loading}
-                ''}
+              onClick={() => doImageReplace(query)}
-                { type === "Album" && musicbrainzId ?
+            >
+              Submit
+            </AsyncButton>
+          </div>
+        ) : (
+          ""
+        )}
+        {type === "Album" && musicbrainzId ? (
           <>
             <h3 className="mt-5">Suggested Image (Click to Apply)</h3>
             <button
               className="mt-4"
               disabled={loading}
-                    onClick={() => doImageReplace(`https://coverartarchive.org/release/${musicbrainzId}/front`)}
+              onClick={() =>
+                doImageReplace(
+                  `https://coverartarchive.org/release/${musicbrainzId}/front`
+                )
+              }
             >
               <div className={`relative`}>
                 {suggestedImgLoading && (
@@ -78,13 +98,18 @@ export default function ImageReplaceModal({ musicbrainzId, type, id, open, setOp
                   src={`https://coverartarchive.org/release/${musicbrainzId}/front`}
                   onLoad={() => setSuggestedImgLoading(false)}
                   onError={() => setSuggestedImgLoading(false)}
-                    className={`block w-[130px] h-auto ${suggestedImgLoading ? 'opacity-0' : 'opacity-100'} transition-opacity duration-300`} />
+                  className={`block w-[130px] h-auto ${
+                    suggestedImgLoading ? "opacity-0" : "opacity-100"
+                  } transition-opacity duration-300`}
+                />
               </div>
             </button>
           </>
-                : ''
+        ) : (
-                }
+          ""
+        )}
+        <p className="error">{error}</p>
       </div>
     </Modal>
-    )
+  );
 }