fix: a tiny bit better upload ui
This commit is contained in:
parent
0d2a73b508
commit
6b097e0860
|
@ -174,13 +174,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
|
|||
</PinningProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const UploadFormSchema = z.object({
|
||||
uppyFiles: z.array(z.any()).min(1, {
|
||||
message: "At least one file must be uploaded",
|
||||
}),
|
||||
});
|
||||
|
||||
const UploadFileForm = () => {
|
||||
const {
|
||||
getRootProps,
|
||||
|
@ -193,44 +186,21 @@ const UploadFileForm = () => {
|
|||
upload,
|
||||
} = useUppy();
|
||||
|
||||
const [form, fields] = useForm({
|
||||
constraint: getZodConstraint(UploadFormSchema),
|
||||
shouldValidate: "onInput",
|
||||
onValidate: ({ formData }) => {
|
||||
const result = parseWithZod(formData, {
|
||||
schema: UploadFormSchema,
|
||||
});
|
||||
return result;
|
||||
},
|
||||
onSubmit: (e) => {
|
||||
e.preventDefault();
|
||||
return upload();
|
||||
},
|
||||
});
|
||||
|
||||
const inputProps = getInputProps();
|
||||
const files = useInputControl({
|
||||
key: fields.uppyFiles.key,
|
||||
name: fields.uppyFiles.name,
|
||||
formId: form.id
|
||||
});
|
||||
|
||||
const isUploading = state === "uploading";
|
||||
const isCompleted = state === "completed";
|
||||
const hasErrored = state === "error";
|
||||
const hasStarted = state !== "idle" && state !== "initializing";
|
||||
const isValid = form.valid || getFiles().length > 0;
|
||||
const isValid = getFiles().length > 0;
|
||||
const getFailedState = (id: string) =>
|
||||
failedFiles.find((file) => file.id === id);
|
||||
|
||||
console.log({ files: getFiles() });
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader className="mb-6">
|
||||
<DialogTitle>Upload Files</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...getFormProps(form)} className="flex flex-col">
|
||||
{!hasStarted ? (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
|
@ -240,13 +210,8 @@ const UploadFileForm = () => {
|
|||
aria-hidden
|
||||
key={new Date().toISOString()}
|
||||
multiple
|
||||
name={fields.uppyFiles.name}
|
||||
name="uppyFiles[]"
|
||||
{...inputProps}
|
||||
value={files.value}
|
||||
onChange={() => {
|
||||
//@ts-expect-error -- conform has shitty typeinference for controls
|
||||
files.change(getFiles());
|
||||
}}
|
||||
/>
|
||||
<CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
|
||||
<p>Drag & Drop Files or Browse</p>
|
||||
|
@ -268,7 +233,6 @@ const UploadFileForm = () => {
|
|||
|
||||
<ErrorList
|
||||
errors={[
|
||||
...(fields.uppyFiles.errors ?? []),
|
||||
...(hasErrored ? ["An error occurred"] : []),
|
||||
]}
|
||||
/>
|
||||
|
@ -302,12 +266,12 @@ const UploadFileForm = () => {
|
|||
<Button
|
||||
type="submit"
|
||||
size={"lg"}
|
||||
onClick={isValid ? upload : () => {}}
|
||||
className="mt-6"
|
||||
disabled={!isValid}>
|
||||
Upload
|
||||
</Button>
|
||||
) : null}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -57,14 +57,12 @@ export function useUppy() {
|
|||
"completed" | "idle" | "initializing" | "error" | "uploading"
|
||||
>("initializing");
|
||||
|
||||
const [inputProps, setInputProps] = useState<
|
||||
| {
|
||||
const [inputProps, setInputProps] = useState<{
|
||||
ref: typeof inputRef;
|
||||
type: "file";
|
||||
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
| object
|
||||
>({});
|
||||
>();
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [failedFiles, setFailedFiles] = useState<FailedUppyFile<Record<string, any>, Record<string, any>>[]>([])
|
||||
const getRootProps = useMemo(
|
||||
|
@ -76,7 +74,6 @@ export function useUppy() {
|
|||
//@ts-expect-error -- dumb html
|
||||
inputRef.current.value = null;
|
||||
inputRef.current.click();
|
||||
console.log("clicked", { input: inputRef.current });
|
||||
}
|
||||
},
|
||||
role: "presentation",
|
||||
|
|
Loading…
Reference in New Issue