Closed dheeraj20-bot closed 4 months ago
'use client'
import { useCallback, Dispatch, SetStateAction } from 'react' import { File } from '@uploadthing/react' import { useDropzone } from '@uploadthing/react/hooks' import { generateClientDropzoneAccept } from 'uploadthing/client' import { Button } from '@/components/ui/button' import { convertFileToUrl } from '@/lib/utils'
type FileUploaderProps = { onFieldChange: (url: string) => void imageUrl: string setFiles: Dispatch<SetStateAction<File[]>> }
export function FileUploader({ imageUrl, onFieldChange, setFiles }: FileUploaderProps) { const onDrop = useCallback((acceptedFiles: File[]) => { setFiles(acceptedFiles) 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"> <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-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" className="rounded-full"> Select from computer </Button> </div> )} </div>
) }
either:
FileWithPath
File
Reopen with a reproduction
I understand that this issue may be closed if it should be filed in another category
My issue
'use client'
import { useCallback, Dispatch, SetStateAction } from 'react' import { File } from '@uploadthing/react' import { useDropzone } from '@uploadthing/react/hooks' import { generateClientDropzoneAccept } from 'uploadthing/client' import { Button } from '@/components/ui/button' import { convertFileToUrl } from '@/lib/utils'
type FileUploaderProps = { onFieldChange: (url: string) => void imageUrl: string setFiles: Dispatch<SetStateAction<File[]>> }
export function FileUploader({ imageUrl, onFieldChange, setFiles }: FileUploaderProps) { const onDrop = useCallback((acceptedFiles: File[]) => { setFiles(acceptedFiles) 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"> <input {...getInputProps()} className="cursor-pointer" />
) }