Blog

Browse a file system on the server-side

By  
Tatu Lund
·
On May 22, 2018 6:00:00 AM
·

Recently I saw this question in StackOverflow:

Stackoverflow Vaadin 8 file system question

The quick answer to this one is that, no there is no FilesystemDataProvider in Vaadin 8. Since it is missing, it is naturally a hindrance to some Vaadin 7 -> 8 migration projects. That gave me motivation to study, if it is difficult to implement one.

Actually creating such a DataProvider in Vaadin 8 is quite straightforward. There is also a simplified version of the idea as code example in our Docs. I set the target specs to be roughly the same as old FilesystemContainer in Vaadin 7 and to have lazy loading.

Vaadin 8 base classes give at least two alternative ways for implementation. Since the Docs example mentioned earlier has the approach of extending the AbstractBackEndHierarchicalDataProvider, I selected the other path to extend the TreeDataProvider.

TreeDataProvider gives a convenient baseline for many types of custom hierarchical data providers. It consist of two classes, The TreeDataProvider is the actual DataProvider implementing functionality of the AbstractHierarchicalDataProvider. The other class TreeData is the data model class. Basically TreeDataProvider is using TreeData to produce a fully functioning DataProvider.

Hence my first task is to extend TreeData, so I created a FilesystemData class which contains the following methods, which I created by copy pasting code from original FilesystemContainer and modifying when needed. This way the API is similar, so that makes migration of apps easier.

Constructors:

public FilesystemData(File root)
public FilesystemData(File root, boolean recursive)
public FilesystemData(File root, String filter, boolean recursive)
	

Methods:

public List<file> getChildrenFromFilesystem(File item)
public boolean isRecursive()
public void setFilter(FilenameFilter filter)
public void setFilter(String extension) 
	

Sub class:

public class FileExtensionFilter implements FilenameFilter, Serializable
	

Since I construct data model in constructors, I can rely on the superclass implementation of the getChildren method.

The first version of my FilesystemDataProvider was just a stub TreeDataProvider using FilesystemData, but that could not do lazy loading yet.

Loading big directory structure to FilesystemDataProvider recursively is time and memory consuming. This is naturally a generic issue, and also something that concerns also FilesystemContainer, or any complex hierarchical data.

Thus I made getChildrenFromFilesystem public, so that can be used as helper, to add items to FilesystemData as per needed. In first phase I did that in demo application as Tree nodes were expanded. But naturally it would be nicer and better developer experience, if the FilesystemDataProvider would do this automatically to you.

So in second phase I added in the FilesystemDataProvider class progressively lazy loading mechanism, which required to override getChildCount, hasChildren and fetchChildren methods with some optimizations. As a final touch isInMemory returns false if the FilesystemData is not recursive.

In Vaadin 7 there is also FileTypeResolver, which is actually copy pasted to Vaadin 8 as well. It is a bit outdated and attempts to use icons from Runo theme, so actually it is not so useful anymore. FileTypeResolver has convenience methods to get MIME types and some icons according to MIME types. In Vaadin 8 we have the icon set called VaadinIcons, which has set of file system icons too. So I did some quick rewrite of FileTypeResolver using the VaadinIcons instead. That completes the story, and now we have can better server side file browser experience than we had with Vaadin 7.

Vaadin FileSystem data provider

And you do not need to rewrite it yourself, just go to the Directory and get the FilesystemDataProvider add-on

As final remark, one should be cautious when exposing files from server side.

Check out FilesystemDataProvider add-on

Tatu Lund
Tatu Lund has a long experience as product manager in different industries. Now he is head of the team delivering Vaadin support and training services. You can follow him on Twitter - @ TatuLund
Other posts by Tatu Lund