Example code using react-filepond and multer to upload files to a server

0_README.md

Example code using react-filepond and multer to upload files to a server

https://pqina.nl/filepond/

https://github.com/expressjs/multer

Gallery.jsx

import React, { Component } from "react";
import agent from "superagent";
import classNames from "classnames";
import { FilePond } from "react-filepond";
import logo from "./logo.svg";
import "./Gallery.css";
import ImageList from "./Components/ImageList";

export default class Gallery extends Component {
    constructor() {
        super()
        this.state = {
            wasClicked: false,
            selectedIndex: 0,
            selectedID: "",
            images: [
                {
                    id: 0,
                    src: "#",
                    alt: "Placeholder Text",
                },
            ],
        }

        this.handleOnClick = this.handleOnClick.bind(this)
        
        // you only need to bind (this) if you want your handler to be able to access methods and state
        this.handlePondFile = this.handlePondFile.bind(this)
    }


    componentWillMount() {
        this.fetchImages()
    }
    fetchImages() {
        agent.get("http://localhost:3001/api/images").then((res) => {
            this.setState({ images: res.body }, () => {
                this.setState({
                    selectedID: this.state.images[this.state.selectedIndex].id,
                })
            })
            console.log(res.body)
        })
    }

    handleOnClick(e) {
        const index = this.state.images.findIndex(i => i.id === e.target.id)
        this.setState({
            selectedIndex: index,
            wasClicked: true,
            selectedID: e.target.id,
        })
        setTimeout(() => {
            this.setState({ wasClicked: false })
        }, 500)
    }

    /* This is the function that recieves a callback when the FilePond
       component finishes processing a file
       
       Callbacks and events can be found here https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#events
    */
    handlePondFile(error, file) {
        if (error) {
            console.log('Oh no');
            return;
        }
        console.log('File added', file);
        this.fetchImages()
    }

    render() {
        const currentClass = classNames({
            "fade-in": this.state.wasClicked,
        })
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <div className="container">
                    <div className="main-img">
                        <img
                            src={this.state.images[this.state.selectedIndex].src}
                            alt={this.state.images[this.state.selectedIndex].alt}
                            id="current"
                            className={currentClass}
                        />
                    </div>
                    <ImageList
                        images={this.state.images}
                        selectedIndex={this.state.selectedIndex}
                        selectedID={this.state.selectedID}
                        onClick={this.handleOnClick}
                    />
                    <FilePond
                        // Set the callback here.
                        onprocessfile={this.handlePondFile}
                        allowMultiple
                        maxFiles={3}
                        name="images"
                        server="http://localhost:3001/api/image"
                    />
                </div>
            </div>
        )
    }
}

server.js

const util = require("util");
const fs = require("fs");
const path = require("path");
const express = require("express");
const uniqueString = require("unique-string");
var cors = require("cors");
const readDir = util.promisify(fs.readdir);
var multer = require("multer");
var upload = multer({ dest: "../server/public/images/" });

async function getImageList(dir) {
  try {
    return await readDir(path.join(__dirname, "public", dir));
  } catch (error) {
    throw error;
  }
}

const app = express();

app.use(cors());

/* This is the endpoint that handles the upload. FilePond expects a unique id returned
   so it can request an undo if needed. The filename prop works well for this. */
app.post("/api/image", upload.array("images", 12), function(req, res, next) {
  // req.files is array of `photos` files
  console.log(req.files);
  // req.body will contain the text fields, if there were any
  console.log(req.body);
  res.send([req.files[0].filename]);
});

app.use(express.static(path.join(__dirname, "public")));

app.listen(3001, () => console.log("Example app listening on port 3001!"));