Inviting the open source community to make the best file upload ever!

Hi, I’m Tom, a software engineer at Dell Boomi, working daily on the Dell Boomi Flow application.

Boomi Flow provides a low-code development platform for creating customer journeys and automating simple and sophisticated workflows.

Components, components everywhere!

So, that means we here at Boomi Flow have a lot of UI components that our customers can use in their workflows. Our customers are able to change many of the simple features of these components by modifying an “attribute” — nice and easy so far!

However, when the change that a customer wants to make lies outside our strategically predefined model, as a customer you will have to take a step further to get the results you want.

How does one do this I hear you ask? Unfortunately, although we do provide a shell custom UI component as a very basic starting point, you will still have to effectively start from scratch by writing the file upload code for the component yourself.

Doing this does however mean that your improvements/additions aren’t shared.

Surely we can figure out something better than that?

Many heads are better than one

So, after some head scratching in the software engineering team here at Boomi Flow, we wondered…

…what if we opened our components up to the public?

Then, the world can use them and add any feature they want to them.

Yes! This is how we are going to make the best ‘file upload’ ever!

Humble beginnings

The beginnings are somewhat humble — a simple file upload system!

Here we go — a simple file upload system quickly jazzed up with a bootstrap import and some centering

Nice and simple so far? Perhaps, too simple?

No — it is exactly this simplicity that makes it very easy to quickly get this component going in your project. We here at Boomi Flow pride ourselves on trying to keep things as simple and as easy as possible — three little steps…

Installation:

npm install — save @boomi/react-file-upload

Usage:

import FileUpload from ‘@boomi/react-file-upload’;

Minimum required setup:

<FileUpload />

We’ve also included lots of the customization options that we already provide to our customers, so it can be easily manipulated to say anything you want, simply by editing the properties.

For example:

{
    uploadCaption: “Upload that cat!”,
    label: “Cat Uploader”,
    validationMessage: “Any cat will do”,
    hintValue: “Drag a picture of your cat here!”,
}

Okay, now get those cat pictures off your computer and share them with your friends!

Dreams for the future?

What next? We just need your help and contributions to make this happen!

This component could get very exciting.

I idly wondered what else we could do with this — what features could make the file upload even better?

1. Examples of file-upload integration with dropbox/google drive? (so people can simply pick up this component and drop it into their projects without any effort!)
2. Maximum file size limits?
3. Only accepts permitted file types?
4. Individual progress bars for each file? (currently there is one progress bar shared even if multiple uploads are done at a time.)

Can you think of any more?

Grab the component and start experimenting!

This awesome little file upload component is also available on npm, so you can use it right away!

@boomi/react-file-upload

And yes, here is a picture of a cat

We couldn’t write about a cat uploader without including one could we?

Photo by Mikhail Vasilyev on Unsplash

About Dell Boomi

Dell Boomi (Boomi), one of the Dell group of companies, is the leading provider of cloud integration and workflow automation for building The Connected Business.

Our cloud-native, low-code platform helps more than 7,500 organizations run better, faster and smarter. Our technologies connect applications, assure data quality and automate business processes.

Please visit https://www.boomi.com for more information.