Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable file upload on React's Material UI simple input?

I am creating a simple form to upload file using electron-react-boilerplate with redux form & material ui.

The problem is that I do not know how to create input file field because material ui does not support upload file input.

Any ideas on how to achieve this?

like image 960
gintoki27 Avatar asked Nov 14 '16 12:11

gintoki27


People also ask

How do I use React to upload files?

In order to upload files, the 'content-type' header must be set to 'multipart/form-data'. new FormData() creates a new empty formData object that we send as the payload in our POST request. Our POST request assumes there is an API endpoint on our backend server at http://localhost:3000/uploadFile. We're done!

How do I enable file upload in HTML?

The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!


1 Answers

The API provides component for this purpose.

<Button   variant="contained"   component="label" >   Upload File   <input     type="file"     hidden   /> </Button> 
like image 115
elijahcarrel Avatar answered Sep 24 '22 01:09

elijahcarrel