File Uploader Schema

The `FileUploader` component provides a drag-and-drop interface for uploading images, updating the displayed image preview and state when a file is dropped or selected. It uses `react-dropzone` to handle file drop events and updates the parent component with the uploaded file's URL.

In the src/content/docs/component directory, You can find the FileUpload.mdx

Functions

type FileUploaderProps = {
  onFieldChange: (url: string) => void;
  imageUrl: string;
  setFiles: any;
  field: string;
};

export function FileUploader({ imageUrl, onFieldChange, setFiles, field }: FileUploaderProps) {
  const onDrop = useCallback((acceptedFiles: any) => {
    setFiles((prev: any) => [
      ...prev,
      { field: field, file: { name: acceptedFiles[0].name, url: convertFileToUrl(acceptedFiles[0]) } },
    ]);
    onFieldChange(convertFileToUrl(acceptedFiles[0]));
  }, []);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: "image/*" ? generateClientDropzoneAccept(["image/*"]) : undefined,
  });

  return (
    <div
      {...getRootProps()}
      className="flex-center bg-dark-3 flex h-72 cursor-pointer flex-col overflow-hidden rounded-xl bg-grey-50 border-2 border-dashed border-gray-400"
    >
      <input
        {...getInputProps()}
        className="cursor-pointer"
      />

      {imageUrl ? (
        <div className="flex h-full w-full flex-1 justify-center ">
          <img
            src={imageUrl}
            alt="image"
            width={250}
            height={250}
            className="w-full object-cover object-center"
          />
        </div>
      ) : (
        <div className="flex justify-center items-center flex-col py-5 text-grey-500">
          <img
            src="/assets/icons/upload.svg"
            width={77}
            height={77}
            alt="file upload"
          />
          <h3 className="mb-2 mt-2">Drag photo here</h3>
          <p className="p-medium-12 mb-4">SVG, PNG, JPG</p>
          <Button
            type="button"
            variant="default"
            className="rounded-full bg-blue-600"
          >
            Select from computer
          </Button>
        </div>
      )}
    </div>
  );
}

The FileUploader component provides a user-friendly interface for uploading image files. It utilizes the useDropzone hook from the @uploadthing/react/hooks package to handle file drops. When an image file is dropped or selected, it displays a preview of the image along with options to either drag and drop more images or select from the computer. Upon selecting or dropping an image file, it triggers the onFieldChange callback to update the parent component with the URL of the uploaded image.