diff --git a/web/src/components/advanced-icon-submission-form.tsx b/web/src/components/advanced-icon-submission-form.tsx index 4c8f7874..6b3df323 100644 --- a/web/src/components/advanced-icon-submission-form.tsx +++ b/web/src/components/advanced-icon-submission-form.tsx @@ -80,6 +80,7 @@ export function AdvancedIconSubmissionForm() { const [isExistingIcon, setIsExistingIcon] = useState(false) const [activeVariants, setActiveVariants] = useState(["base"]) const [files, setFiles] = useState>({}) + const [filePreviews, setFilePreviews] = useState>({}) const [aliases, setAliases] = useState([]) const [aliasInput, setAliasInput] = useState("") const [categories, setCategories] = useState([]) @@ -96,8 +97,11 @@ export function AdvancedIconSubmissionForm() { if (variantId !== "base") { setActiveVariants(activeVariants.filter((id) => id !== variantId)) const newFiles = { ...files } + const newPreviews = { ...filePreviews } delete newFiles[variantId] + delete newPreviews[variantId] setFiles(newFiles) + setFilePreviews(newPreviews) } } @@ -106,6 +110,20 @@ export function AdvancedIconSubmissionForm() { ...files, [variantId]: droppedFiles, }) + + // Generate preview for the first file + if (droppedFiles.length > 0) { + const reader = new FileReader() + reader.onload = (e) => { + if (typeof e.target?.result === 'string') { + setFilePreviews({ + ...filePreviews, + [variantId]: e.target.result, + }) + } + } + reader.readAsDataURL(droppedFiles[0]) + } } const handleAddAlias = () => { @@ -212,6 +230,7 @@ export function AdvancedIconSubmissionForm() { // Reset form setIconName("") setFiles({}) + setFilePreviews({}) setActiveVariants(["base"]) setAliases([]) setCategories([]) @@ -312,7 +331,17 @@ export function AdvancedIconSubmissionForm() { src={files[variantId]} > - + + {filePreviews[variantId] && ( +
+ Preview +
+ )} +
) @@ -432,6 +461,7 @@ export function AdvancedIconSubmissionForm() { onClick={() => { setIconName("") setFiles({}) + setFilePreviews({}) setActiveVariants(["base"]) setAliases([]) setCategories([])