Tuesday, February 9, 2021

FileSender UI overhaul to using Bootstrap

 I have recently made a branch available which updates the user interface for FileSender to use Bootstrap. In this post I will discuss some of the changes and also mention some of the features of FileSender which might be useful to people. FileSender allows you to send and receive large files with people. You can upload a file to FileSender and send somebody a link to be able to download it. You can invite a person to send you a file on a FileSender server that you use and have the option to restrict them to only send files to you. This can be very handy if you meet somebody at a conference who wants to offer you a data set and you would like to only let them send to you. 

FileSender also offers End-to-End encryption so you can be comfortable that your data is only used by those you intend to have access. FileSender is open source and browser based.

The following screen shots are taken from the above cited branch with the updated user interface. The upload screen is shown below. I have resisted adding animations to the main "Drag or choose file(s)" panel at this stage. I think the secondary button for select File or select Directory are the main interesting items as perhaps people are not so used to dropping files into the browser and a single "add" action does not explicitly inform a user that a whole directory (recursively) can be added if desired.

Once you have added a file you see the manifest and the clear all button has been moved to above the option to remove single files. This listing lets you see the files that will be transferred and also can show why a file might not be ok. For example, if a file is 0 bytes or can not be read, or is a type such as an executable which is not allowed by the system.

If you choose the File Encryption option then you can either set a passphrase or have one generated for you. When FileSender is using a generated password it knows how much entropy was used for the password. So to go back to a user nominated password you have to deselect "generated password" which allows the password field to be edited again. Using a generated password will be more secure than anything a human is likely to enter.


After clicking "Continue" you move to stage 2 of the new upload process. The main choice here is if you would like to get a link to the file or would like to email the link directly to the recipient. Many of the other options on this stage can be left at the default and you could just click send from here to start the upload process.


If you choose the "Or send via email" button the page alters to what is shown below. Again, once you click on Send then the transfer will begin.

The upload is happening in the below screen shot. I have paused the upload here to make it easier to capture the screenshot. FileSender can upload using multiple web workers which can work on one or more files at the same time depending on the server configuration. The grey bar below "Admin" is a developer option I have enabled which shows the progress of each of the web workers and how long they have been since the last progress message. It is grey as I have paused the upload. 

The resume button will continue the upload and if a stall is detected will automatically attempt to reconnect and resume the upload (not from the start). The "Reconnect and Continue" button will tell FileSender to close the connections and remake then before resuming the upload. This can be useful if you move a laptop to another network. Even if you IP address and network have changed you should be able to resume the upload with "Reconnect and Continue".

The automatic resumes and the like on this page are all setup to try to complete the upload if possible. When things stall multiple attempts are made to try to complete the transfer without needing any interaction from you. It is only if all that fails that an error is presented to that effect. Even at that stage you can setup the transfer again and resume without loosing all the data that has already been transferred.

The plan is that after a while you will see the below screen informing you of a successful upload. In this case I have chosen to get a link to the uploaded file. This is the link I can follow to download the file and I can share that link with anybody I wish to be able to download the file(s).


The My Transfers page shows all the files you have uploaded. The files which have not expired are listing in the main (default) tab. The actions icons all have hints on mouse over to let you know what they are for. As I am an admin user I have an extra option to extend the expire time for any transfer using the red clock. I have used a red overlay for admin privileged actions. In this case, as an admin I can extend the expire time as many times as I like.

When you expand a transfer with the + icon you see the details and can access the download link or see an audit log for the file. The ip address information might not be shown depending on how the FileSender instance is configured.

The my transfers page can still be used even on smaller displays which is very handy if people want to take a quick look at some data on a tablet or cast it from the tablet to a large screen at a meeting.



The guests section has the primary action allowing you to invite a guest to the FileSender server. I may update the "can only send to me" and "get a link" into a single drop down option as these two options are mutually exclusive which is currently only shown by the colour and a message when you try to select both at once. This is a hold over from the old UI code and I have been looking to update that code for a long time. Other options like seeing the current guests or which transfers a guest has sent (optional depending on server configuration and settings), are now shown as tabs at the top of the page. In the old UI these were below the invite form and might not even be known to exist at first.

The download page allows you to select individual files to download or a subset of the files to download into either a tar or zip file. When a file is encrypted you can only download the subset as a zip64 file. I have used zip64 even for small archives in order to not surprise users when they start downloading larger files and find that some downloads might not be supported natively by the tools that come with their operating system. There is a nice free tool which is recommended if you visit this page on macos.

The download process is a little tricky here as the files have each been encrypted in the browser. The server never sees the passphrase needed to decrypt the files. Once you start to download to a zip for some files they are sent in the encrypted form from the server and decrypted in the browser before being added to a virtual zip64 file which is then streamed to your disk. The result is a zip64 file containing the decrypted files you have selected.

For real world use the files will likely be more interesting than just random test files I am using here :)

If you are new to FileSender and this looks interesting you can setup your own server with using apache/nginx and php to serve, and mariadb/postgresql for database storage and a big disk of your choice ;)

https://docs.filesender.org/v2.0/install/