FilePond
Having spent the last few years releasing and selling JavaScript plugins on Envato, maker Rik Schennink decided it was time to give it a go on his own and released FilePond to the public on March 1, 2018.
We want to thank Rik for finding time in his schedule to give us an inside look at his make process for FilePond.
In 100 words or less, what exactly is FilePond?
FilePond is a JavaScript file upload library. It can handle all kinds of file formats from all sorts of sources. It’s accessible, and fully animated to offer a very smooth, native like, user experience. It can be extended with plugins to unlock additional functionality like image previews, client-side image editing and file validation.
How did you come up with the idea for File Pond?
In 2016 I released Slim, a commercial plugin to do client side image cropping. The response to that plugin has been so positive I decided to create a successor as I felt Slim was filling a void in the market. Slim can only handle one image at a time, and does not handle any other file formats. I wanted to create a plugin that could handle multiple files, still could also handle images, or other media, in a more specialised way.
How long did it take you to go from the idea to actually building your first version?
The first time I planned to create a successor instead of change the original is end 2016. Development started in April 2017. Soft-launch was December 2017.
How did you go about building the first version of FilePond?
I outlined all the requirements based on the feature requests I got from Slim customers and features I wanted to be key to the product. Explored the design in Sketch and based it broadly on the look and feel of Slim but applied to non-image files.
I started development in April 2017, worked on it for about 3 days a week on average. Then in May, my daughter Janne was born so I took a two month break.
When I started again, I’d read a lot about how browsers render elements to the screen, update the view, and how to write a better more performant render loop. I’d put a lot of effort in the first version of FilePond but it didn’t really follow these optimisations which hindered the way I wanted to do animation.
I ditched the first version and started from scratch around August. Worked on it for 2 days a week instead of 3, and soft-released in December.
Did you run into any challenges along the way in building FilePond?
While the animation aspect of FilePond was challenging it wasn’t really the biggest hurdle. Its render loop can be improved upon but does the trick for now.
The two biggest challenges were doing synchronous file uploads and rendering image previews.
It’s not possible to set a value to the class file input element. Therefor when a file is dropped on a drop area, there’s basically no other way to send it to the server than using AJAX. I resolved this by offering the option to encode the file as base64 data so it can be sent along the form post without AJAX. Still, it would be nice if browsers would support setting File objects to the file input element.
I wanted to scale down preview images. Rendering the entire image will use a big chunk of memory and would make updating the preview later on expensive. The problem is, that to do this, you need to access the image data, which can only be done on the main thread, which I was using to do animations. So when a big image was dropped, the animations would freeze till the image was decoded. Not very nice. I solved this by having FilePond queue CPU heavy operations to wait for a moment when animations have stopped naturally. It then spins up a busy animation (which on webkit browsers will run even when the main thread is blocked).
How did your launch day go?
It went great! FilePond got featured on Product Hunt and shared on Twitter by big accounts like Smashing Magazine and Wes Bos which resulted in a lot of additional traffic. It’s currently a trending GitHub JavaScript repository and got as high as position 2.
Looking back at FilePond’s launch day, would you do anything different?
I should have realized that FilePond is not really a product that solves an everyday need. It’s a product that solves a certain problem during a certain part of a project. So having discount codes didn’t really make sense as the chance somebody stumbled upon FilePond and was working on a project that was then and there in need of a JavaScript File Upload library was slim.
UPDATE FROM RIK: FilePond is now licensed under MIT as I’ve decided to offer the core for free and will be developing premium plugins.
What are some milestones that File Pond has hit since launch that blow your mind?
Product Hunt 5th most popular product of the day was amazing, and reaching 2nd place in the trending GitHub repositories list was quite nice as well.
Now that you have officially launched FilePond, what are some short term goals you are working towards?
Some new features I can build and want to release very quickly are a jQuery and React wrapper (maybe Vue as well). This should make it easier to integrate FilePond with other projects which saves time and further justifies the price of the product.
Secondly I’m starting work on manual image cropping, resizing and rotating. This will make FilePond a lot more interesting for handling profile pictures and imagery for print.
What is one website or resource you used during making File Pond that made the process 100 times easier?
Stack Overflow and WIP Chat.
Other than FilePond, have you launched any other projects?
- Slim
- Flip
- Eve of Impact
- Snippy
- Conditioner.js
- Fitty.js
