Upload files in React e FilePond

FilePond è una libreria per Javascript per l'upload dei files.

Non esegue un vero upload sul server, nel senso che deve esserci una API che viene richiamata lato server, ma si occupa della parte lato client.

In questo articolo vediamo come usarla in React.

Dobbiamo installare un pò di librerie; possiamo usare npm:

npm install react-filepond filepond filepond-plugin-image-preview filepond-plugin-image-exif-orientation

Cosi abbiamo anche la preview.

Qui sotto un esempio di codice:

import React, {useState} from 'react';
import {FilePond, registerPlugin} from 'react-filepond';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

function App() {
    const [files, setFiles] = useState([]);

    return (
        <div className="App">
            <FilePond
                files={files}
                allowReorder={true}
                allowMultiple={true}
                onupdatefiles={setFiles}
                labelIdle='Drag & Drop qui o <span class="filepond--label-action">Scegli</span>'
            />
        </div>
    );
}

export default App;

Per farlo funzionare dovete anche accertarvi di disabilitare lo strict dal tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Enjoy!