Can a FE only app (React/NextJS) read CSV from a user without submitting to a backend?
Based on my knowledge, this isn't possible, but I thought I'd ask as FE advances faster than I (a backend dominant full-stack) can keep up with.
Is it possible for me to create a mini app, using something like NextJS, to take a file a user submits and do some work based on it? If it matters, I want to take the data to fill a template (create name tags with barcodes). Best as I know and have been able to google, a NextJS app can read something out of public, but I haven't seen anything about reading something straight from the user, without first submitting to a backend.
8 Replies
You can do whatever you want with a file obtained via an input[type=file] or via drag'n'drop
Not sure why it wouldnt be possible
MDN Web Docs
FileReader - Web APIs | MDN
The FileReader interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
But also fwiw the difference between client/server in nextjs is very subtle
Reading a csv on the front end is as simple as:
1. Listen for change events on the input
2. Get the selected files by using the
.files property, that's your file handle(s)
3. Use the .text() getter on the file handle
4. Do whatever you want with the text content
(in case of image files you might need to use array buffers but that's not your case)See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files for details
MDN Web Docs
- HTML: HyperText Markup Language | MDN
elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.
There's also this article that might help you get where you want : https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications
MDN Web Docs
Using files from web applications - Web APIs | MDN
Using the File API, web content can ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML element or by drag and drop.
Thanks! I donno why when I searched I wasn't able to find this sort of info.