upload data CSV or PDF - 2

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

answer upload data CSV or PDF - 2

upload data CSV or PDF - 2

Comment

    return (
        <Card className="max-sm:w-full max-md:w-[300px] max-w-[650px] mx-auto rounded-xl shadow-sm my-5">
            <CardContent className="p-4">
                <Form {...form}>
                    <form
                    // onSubmit={form.handleSubmit(onSubmit)}
                    >
                        <FormField
                            control={form.control}
                            name="upload"
                            render={() => (
                                <FormItem>
                                    <label>
                                        <div
                                              onDrop={handleDrop}
                                              onDragOver={handleDragOver}
                                              onDragLeave={handleDragLeave}
                                            className={`flex flex-col items-center justify-center gap-5 p-2 border
border-[#3538CD] border-dashed rounded-xl cursor-pointer py-4 ${dropDisplay && 'bg-gray-200'}`}
                                            // 
                                        >
                                            <input
                                                type="file"
                                                multiple
                                                accept="image/*"
                                                onChange={handleFileChange}
                                                className="hidden"
                                            />

                                            <div className="flex gap-2 text-sm text-center text-gray-400">
                                                <div className="rounded-full w-6 h-6 bg-gray-50">
                                                    <LucidePlus className="text-[#3538CD] px-1" />
                                                </div>
                                                <p className="text-black">
                                                    Click to upload or drag & drop
                                                </p>
                                            </div>
                                        </div>
                                    </label>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <div className="flex justify-center mt-2">
                            <Button
                                type="button"
                                className="w-fit h-auto py-1 px-4 rounded-full bg-[#17151F] text-white text-right"
                                disabled={true}
                            >
                                <LucideCloudUpload className="w-8 px-2" />
                                Upload Data
                            </Button>
                        </div>
                    </form>
                </Form>
                
                <div>
                <Progress value={progress} className="h-[5px] bg-[#551DFF33]" />
                <p>Uploading... {progress || 0}%</p>
                </div>
              
            </CardContent>
        </Card>
    )
}

export default UploadData

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 - 2

Contents

More Related Answers

upload data CSV or PDF - 2

Grepper

Documentation

Social

Legal

Contact

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