Drag n Drop Area for csv files
Answered
Specter posted this in #help-forum
SpecterOP
Hey, I just wanted to create a file drag and drop zone where users can drop their csv files so further processing and using that file's data, How can I achieve this ?
Answered by B33fb0n3
of course you can use a while library for that, however I want to also share the solution that I mentioned (see attached).
You can use libraries to parse and read your csv file. For example: https://csv.js.org/
Keep in mind, that it can be pretty hard for a beginner like you to do such a thing, so you might want to start by the basics of web developement first
You can use libraries to parse and read your csv file. For example: https://csv.js.org/
Keep in mind, that it can be pretty hard for a beginner like you to do such a thing, so you might want to start by the basics of web developement first
9 Replies
@Specter Hey, I just wanted to create a file drag and drop zone where users can drop their csv files so further processing and using that file's data, How can I achieve this ?
you listen to the
onChange event of your input field. When it changes a new file is available (droped) and you can further process it@B33fb0n3 you listen to the onChange event of your input field. When it changes a new file is available (droped) and you can further process it
SpecterOP
I got something working with the
react-drag-drop-files, i found a tutorial on geeksforgeeks, thanks thoThey did something like this, and I just copied their system
But would this code allow me to also access the file details once updated or changed ? And If so, how exactly
My main objective is to get a csv file and read it's columns and rows
But would this code allow me to also access the file details once updated or changed ? And If so, how exactly
My main objective is to get a csv file and read it's columns and rows
@Specter I got something working with the `react-drag-drop-files`, i found a tutorial on geeksforgeeks, thanks tho
of course you can use a while library for that, however I want to also share the solution that I mentioned (see attached).
You can use libraries to parse and read your csv file. For example: https://csv.js.org/
Keep in mind, that it can be pretty hard for a beginner like you to do such a thing, so you might want to start by the basics of web developement first
You can use libraries to parse and read your csv file. For example: https://csv.js.org/
Keep in mind, that it can be pretty hard for a beginner like you to do such a thing, so you might want to start by the basics of web developement first
Answer
@B33fb0n3 of course you can use a while library for that, however I want to also share the solution that I mentioned (see attached).
You can use libraries to parse and read your csv file. For example: https://csv.js.org/
Keep in mind, that it can be pretty hard for a beginner like you to do such a thing, so you might want to start by the basics of web developement first
SpecterOP
i have done a few projects, built UI for them, just never gone in depth with the systems of taking input and so on
But thanks so much, with your insights I think I can make it work
But thanks so much, with your insights I think I can make it work
@Specter i have done a few projects, built UI for them, just never gone in depth with the systems of taking input and so on
But thanks so much, with your insights I think I can make it work
sounds great. Is your initial issue solved [like that](https://nextjs-forum.com/post/1331281918347448411#message-1331301565709156456)?
happy to help