Read in file with client-side clojurescript/re-frame app

Question

I'm writing a client-side application which should read in a file, transform its content and then export the result. To do this, I decided on Re-Frame.

Now, I'm just starting to wrap my head around Re-Frame and cloujurescipt itself and got the following thing to work:

Somewhere in my view functions, I send this whenever a new file gets selected via a simple HTML input.

[:input {:class "file-input" :type "file"                                 
         :on-change #(re-frame/dispatch                                   
           [::events/file-name-change (-> % .-target .-value)])}]

What I get is something like C:\fakepath\file-name.txt, with fakepath actually being part of it.

My event handler currently only splits the name and saves the file name to which my input above is subscribed to display the selected file.

(re-frame/reg-event-db                       
  ::file-name-change                       
   (fn [db [_ new-name]]                          
     (assoc db :file-name (last (split new-name #"\\")))))

Additionally I want to read in the file to later process it locally. Assuming I'd just change my on-change action and the event handler to do this instead, how would I do it?

I've searched for a while but found next to nothing. The only things that came up where other frameworks and such, but I don't want to introduce a new dependency for each and every new problem.

Denis Fuenzalida Denis Fuenzalida · Accepted Answer · 2019-10-31T02:32:45

I'm assuming you want to do everything in the client using HTML5 APIs (eg. no actual upload to a server).

This guide from MDN may come handy: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

It seems you can subscribe to the event triggered when the user selects the file(s), then you can obtain a list of said files, and inspect the files contents through the File API: https://developer.mozilla.org/en-US/docs/Web/API/File

In your case, you'll need to save a reference to the FileList object from the event somewhere, and re-use it later.

Read in file with client-side clojurescript/re-frame app

1 Answers