Material-UI-Dropzone Typescript Example

janac
Jul 29, 2021

Intro

This NPM plugin: https://www.npmjs.com/package/material-ui-dropzone
is very popular, however the examples are in JavaScript. Here’s a typescript equivalent of their posted example:

import React, { useState } from "react";
import { DropzoneAreaBase } from "material-ui-dropzone";
import "./styles.css";
const Home = () => {
const [files, setFiles] = useState([]);
const handleAdd = (newFiles: any) => {
setFiles([...files]);
};
const handleDelete = (deleted: any) => {
setFiles(files.filter((f) => f !== deleted));
};
return (
<DropzoneAreaBase
fileObjects={files}
onAdd={handleAdd}
onDelete={handleDelete}
/>
);
}
export default Home;

Produces:

--

--

janac

Most of my writing is about software. I enjoy summarizing and analyzing books and self-help videos. I am senior software consultant at LazerTechnologies.com.