How to upload multiple files in React-Redux

Question

I had a query that I wanted to ask you about. I was building an application in React-Redux with Express NodeJS as backend, and postgreSQL as db. I wanted to implement a File Upload component into it. Can you please tell me how should I do that ?

Our team had previously implemented file upload in angular using multer on the backend. When we did the same in redux the small files get uploaded fine but when I try to upload a file over 4 mb it re-renders the page before the file is completely uploaded.

Please guide me how should I do this ? If you have a code sample that I can understand, that will also be great.

Uday, You'll need to throw up some more information to get a good answer. The first of which is how are you uploading the file? i.e. What solution are you using for API access? — Dale Francis
– Dale Francis, Commented Sep 5, 2017 at 1:40
Also are you using the three stage pattern for api access in redux? Request/Success/Failure — Dale Francis
– Dale Francis, Commented Sep 5, 2017 at 1:41
I had used AXIOS to send requests! and yes I am using 3 stage pattern. But could you suggest me something from the beginning ? Something I can follow entirely from scratch ? — Uday Saini
– Uday Saini, Commented Sep 5, 2017 at 4:02

Harsh Makadia · Accepted Answer · 2017-09-05 04:57:44Z

It is possible to upload multiple files at once in React.

<input type="file" multiple name="myImage" accept=".png, .jpeg" className="multiple-upload" onChange={this.uploadScreenshotFile} />

Here is uploadScreenshotFile function

uploadScreenshotFile(event){ for(let size=0; size < event.target.files.length; size++){ console.log('Selected file:', event.target.files[size]); let file = event.target.files[size]; console.log("uploading screenshot file..."); // Do necessary request to upload here....... } }

my main concern is uploading a file and handling it at backend. Can you guide me in that respect ?!
I have not ever tried upload file with Node.js. May be this article will be useful for you: 1. medium.com/technoetics/… 2. dzone.com/articles/…
thanks Harsh. I did actually use that article earlier and it was successful. Technoetics one. It implemented File Upload in React and NodeJS !

Collectives™ on Stack Overflow

How to upload multiple files in React-Redux

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related