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

1

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.......

    }
}

answered Sep 5, 2017 at 4:57

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Uday Saini Over a year ago

my main concern is uploading a file and handling it at backend. Can you guide me in that respect ?!

Harsh Makadia Over a year ago

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/…

Uday Saini Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related