upload data csv or pdf

Doyin Atobaru answered on January 24, 2025 Popularity 3/10 Helpfulness 1/10

answer upload data csv or pdf

upload data csv or pdf

Comment

const UploadData = () => {
    const formSchema = z.object({
        upload: z.array(z.any()),
    })

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            upload: [] as any[],
        },
    })
    const [selectedFile, setSelectedFile] = useState<File | null>(null);
    const [dropDisplay, setDropDisplay] = useState(false);
    const [progress, setProgress] = useState(13)
 
    const { setValue } = form;   

    useEffect(() => {
        const timer = setTimeout(() => setProgress(66), 500)
        return () => clearTimeout(timer)
    }, [])

    //this function checks if the file type is valid
    const isValidFileType = (file: File) => {
        const validTypes = ['application/pdf', 'text/csv'];
        return validTypes.includes(file.type);
    };

// this handles the file drop event 
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    if (file && isValidFileType(file)) {
        setSelectedFile(file);
        setDropDisplay(false);
    } else {
        alert('Invalid file type. Please upload a PDF or CSV file.');
    }
};

  //prevent the browser's default behaviour when you drag image over it
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setDropDisplay(true);
};

const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setDropDisplay(false);
};

  //this handle the image(file) change event
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0] || null;
    if (file && isValidFileType(file)) {
        setSelectedFile(file);
    } else {
        alert('Invalid file type. Please upload a PDF or CSV file.');
    }
};

  const removeFile = (index: number) => {
    setSelectedFile(null)
    // setSelectedFile((prevFiles: File | any) => {
    //   const updatedFiles = prevFiles.filter((_: any, i: number) => i !== index);

    //   console.log('updatedFiles:', updatedFiles);
    //   setValue('upload', updatedFiles, { shouldValidate: true });

    //   return updatedFiles;
    // });
  };

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: csv javascript pdf upload

Link to this answer
Share Copy Link

Contributed on Jan 24 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

upload data csv or pdf

Contents

More Related Answers

upload data csv or pdf

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.