Thanks a lot for this tutorial. It is simple and I learned two things (How to drag files to upload them and parsing CSV on browser both in 16 minutes video. ✨
I think this is the first time when I subbed on to a YT channel and pressed the notification bell with great interest! I also watched your react js recharts video, I learned a lot from you! Thank you! Wish you the best and happy holidays!!
Cheers! Thank you for your support, Cory! Me neither, want one of those sick plaques like Wes Bos was showing off this week haha. Only 93k more followers to go lol.
Thanks Anurag! I appreciate the support :) I just do videos that interest me! If it's not interesting to me it's really hard to get motivated to learn about it, create a demo app, record a video, etc... so I don't even try!
@@leighhalliday It's the reason that sets you apart from others. Because you're not making videos just for the sake of making it but to bring actual value to your viewers. Much respect 👏🤗
Nice! For CSV parsing? Images? I was thinking of displaying an image preview... might do that when I move on to tying this in to a form rather than standalone like in this video.
Thanks Ahmed! Glad you're enjoying them :D If you're looking for something more in depth, I just launched a full course!! courses.leighhalliday.com/next-level-next-js
This is most likely what flatFile is using behind the scenes. Good video! who wants to pay $1 per upload with flatFile when you can just build yourself lol this is great!
Awesome video Leigh! I've never looked into how to make drop zones for uploading files. It's seems really easy with couple of events. Keep up with interesting topics and videos :)
Great video, really enjoyed it. I'm pretty sure you're not supposed to the async inside of a forEach loop . I think for of would be the correct loop to use here. Nevertheless, great video thanks a lot !
Hey Vaihbhav! The drag and drop portion doesn't really care what type of file it is, but parsing the file is another story. You'd have to use a package like this: www.npmjs.com/package/xlsx I am sure there is some sort of row (file size) limit, but I honestly don't know what it is... a lot probably depends on the person's computer.
Hmmm... do you want actual excel or csv? This tutorial is more about parsing csvs, not so much producing them... I haven't really looked too much into producing and downloading csv files in the browser. There must be a package out there for that?
Hello, awesome tutorial! Was just wondering, how would I make a component out of the drop logic? referring to the below code. I tried making a component, but it still needs access somehow to the contacts list, and w.e result it produces, the main app needs to access the result, any help? " { setHighlighted(true); }} onDragLeave={() => { setHighlighted(false); }} onDragOver={(e) => { e.preventDefault(); }} onDrop={(e) => { e.preventDefault(); setHighlighted(false); Array.from(e.dataTransfer.files) .filter((file) => file.type === "text/csv") .forEach(async (file) => { const text = await file.text(); const result = parse(text, { header: true }); setContacts((existing) => [...existing, ...result.data]); }); }} > DROP HERE "
