Upload and process a file

I need to upload a file from the UI and then parse the file line by line, extract data from each line and save the parsed data to db.
I know that I can use the Upload component to let the user choice a file that then will be uploaded to the server, but I can’t find any example or guidelines to how then process it in the best way.
I mean, the file once uploaded needs time to be parsed, the process can last even 10 minutes, so it should be processed in one thread, and also, I’m little confused about what side of the framework will do the parse…I should do it in the backend side, but the upload component is in the frontend side. I can use a service (I use Vaadin with Spring) that i inject in the UI but i don’t know if it’s the best approach.
And if i would like to show a progressbar, I would like it to show the total time to parse the file, and not the time to upload the file (that is almost immediate).
Sorry for the too many questions)


Using an injected service would be a good approach.

The key point is to update the UI from a separate thread by using the
method. Also, if you are using Spring, you can configure your service method to run asynchronously with
and let it accept a custom
progress listener

For example, you can implement the following method in your service class:

@Async // run in a separate thread
public void processData(String data,
                        SerializableConsumer<Integer> progressListener) {
   ... process data and call progressListener.accept() when appropriate ...

And use it from the Vaadin UI part as follows:

public void uploadSucceeded(Upload.SucceededEvent event) {
processingService.processData(data, this::updateProcessingProgress);

private void updateProcessingProgress(int processedChars) {
theVaadinUi.access(() → progressBar.setValue((float) processedChars / totalChars));
[/code]See this working example implemented with Vaadin 8:


Inspired by your question, I recorded a video. Check it out:

Hi Alejandro!
First of all sorry if i didn’t reply earlier…and I wanted to thank you for your reply and for your nice and clean solution!
And the video is very cool and really helpful to understand all the process.

I was trying to implement a solution for it, trying to implement a new thread in the UI class (the class that contains also the Upload component), in the uploadSucceeded function, and in this thread call the service, to read the next line of the file, and so update the progress in the frontend…It was really a mess!

So thank you again! You made my day :)))

I have had a similiar issue. In my project there is a UI that represents documet table (main form). When I click my aweome “update” button on the form, it makes a (long-lasting) rest request, which is supposed to fetch some data for the document table. When button is pressed, I show a modal dialog window with infinitely circling progressbar and a cancel button. If the rest request is finished before the cancel button pressed the modal dialog is being closed by the power of push socket.
So there I have a thread which is being launched by “update” button. It starts a tread. Thread is making a rest request and starts to continuously update a table component. I think at the same time some UI change impacts are coming to ui side as a result of request made by button “update”. Those table change impacts, which came with request result and those which came with push updates are interfere with each other. I do make all the changes in the thread code wrapping them into UI.access() locking scopes although it is not convinient. But it still get errors when I forget to wrap some pieces of code here or there.
It all makes me think there must be a better way to organize this kind of ui logic: couple of concurrent threads which constantly accessing ui components and still not blocking each other.