Smooth File Uploading with React
Tags: react, javascript, webdev
Published: 2019-01-22 19:39:10

---
title: Smooth File Uploading with React
published: true
tags: react,javascript,webdev
canonical_url: https://itnext.io/uploading-files-with-react-and-filepond-f8a798308557
---

**A tutorial on how to quickly set up the FilePond React Adapter**

![](https://cdn-images-1.medium.com/max/1024/1*A66M6hR0oBaAqNoLqBXZ9A.jpeg)

[FilePond](https://pqina.nl/filepond) is a relatively new JavaScript file upload library. In this tutorial we’ll set up a new [React](https://reactjs.org) app, integrate with the [FilePond React Adapter](https://github.com/pqina/react-filepond) component and set up a connection to a backend which will receive our uploaded files.

We’ll use the [Create React App](https://github.com/facebook/create-react-app) node module to quickly assemble our base React application. If you’re familiar with this process you can probably skip to the Integrating with FilePond section.


### Creating a base React app

Assuming you‘ve already installed [Node](https://nodejs.org/) version 6 or higher run the following command from your terminal (if not, this is the time to install it). It will create a folder “my-app” which will contain our React app.

```
npx create-react-app my-app
```

Alrighty, we got our starting point, let’s navigate to the “my-app” directory.

```
cd my-app
```

Now start the development server, it will automatically open a browser window.

```
npm start
```

You can stop the app from the command line by pressing both the `CTRL` and `C` key at the same time.

### Integrating with FilePond

With our React app running we can now add the FilePond React adapter.

Let’s stop the app and install the adapter.

```
npm install filepond  react-filepond --save
```

With the adapter files installed, let’s fire up the app again so we can start making changes.

We’ll add the FilePond component to the app landing page, in reality, you’ll probably move it somewhere else, but for the purpose of this article, this will suffice.

We first need to import the `FilePond` component and its stylesheet.

Open the “App.js” file and add the following lines to the top of the file.

```js
import { FilePond } from 'react-filepond';
import 'filepond/dist/filepond.min.css';
```

Next step is to add the component to the HTML. Let’s edit the HTML in the `render()` function and add the `<FilePond>` tag.

```jsx
<div className="App">

  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <h1 className="App-title">Welcome to React</h1>
  </header>

  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload.
  </p>

  <FilePond></FilePond>

</div>
```

The FilePond drop area should now show up below the introduction text. It’ll look something like this:

![](https://cdn-images-1.medium.com/max/900/1*tMmUHba39VqaKbCyry9K8A.png)

Now we can start configuring FilePond to our wishes.

By default FilePond only accepts one file, this is because it enhances the default file input element and copies its standard behavior.

![](https://cdn-images-1.medium.com/max/900/1*27IG4zyokQcRTxh2zU6YWg.gif)

To enable multiple file mode lets add the `allowMultiple` prop.

```jsx
<FilePond allowMultiple={true}></FilePond>
```

Drop a folder or select multiple files to see it in action.

![](https://cdn-images-1.medium.com/max/900/1*EQ3uuEJ4nwtsBH5-5GYGYA.gif)

Just like the classic file input, files are loaded to FilePond but don’t do anything else, they just sit there. We most likely want to send them to our backend. We’ll do this by supplying FilePond with the server prop.

If you’ve got a server endpoint that can handle file objects being posted to it you can probably use that, if not, we can set up the [FilePond PHP Boilerplate](https://github.com/pqina/filepond-boilerplate-php) (download the repository and run vagrant up).

```jsx
<FilePond allowMultiple={true} server="http://192.168.33.10"></FilePond>
```

With the server location configured, FilePond will automatically POST dropped files to the supplied URL.

![](https://cdn-images-1.medium.com/max/900/1*8tN-yfQKQPkkHfM07T5NQg.gif)

The default FilePond server calls are described in the [server configuration docs](https://pqina.nl/filepond/docs/patterns/api/server/). Every tiny detail of the `server` property can be finetuned, this allows FilePond to be integrated with basically any remote or local file storage solution.

To spice things up a bit let’s enable image previews.

We’ll start with installing the image preview plugin.

```
npm install filepond-plugin-image-preview --save
```

Now we need to import and register the plugin with the FilePond core. We’ll have to alter the FilePond import to also import the `registerPlugin` method.

```js
import { FilePond, registerPlugin } from 'react-filepond';
```

We’re ready to import and register the image preview plugin.

```js
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

registerPlugin(FilePondPluginImagePreview);
```

Done! Let’s restart the app and drop an image.

![](https://cdn-images-1.medium.com/max/900/1*mwkOVJH-HlWwIMYa6xkRHw.gif)

And that’s it, the basics of file uploading with FilePond.

You can further enhance the component with features like automatic [EXIF orientation correction](https://github.com/pqina/filepond-plugin-image-exif-orientation), [image cropping](https://github.com/pqina/filepond-plugin-image-crop), [resizing](https://github.com/pqina/filepond-plugin-image-resize), [clientside image transforms](https://github.com/pqina/filepond-plugin-image-transform) and [various other plugins](https://github.com/pqina/filepond#plugins).

There are a lot of [props](https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#properties) and [events](https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#callbacks) you can configure to make FilePond fit your needs.

* * *