Loop through array of multiple images to upload individually to AWS s3 ReactJS

Asked
Active3 hr before
Viewed126 times

5 Answers

reactjsmultiplearray
90%

How should I loop through the array of imagefiles encode them in base64, and upload each one individually?,It only allows one image to be uploaded at a time, so I need to loop through the array of files and upload each one individually. ,Im building an upload page that is supposed to take multiple images and upload them to aws s3 using AWS amplify storage.

const { useState, useRef } = React;

function Uploader() {
   const file = useRef({});
   
   function readContent(file) {
      return new Promise((accept, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => accept({
            name: file.name,
            type: file.type,
            content: reader.result
         });
         reader.onerror = () => reject();
      });
   }
  
   function upload(file) { // fake upload
   
      return new Promise(accept => {
         setTimeout(() => accept(file), 1000);
      });
   }
   
   function onSubmit(event) {
      event.preventDefault();
      
      const filesAsArray = [...file.current.files];
      const fileInfo = Promise.all(filesAsArray.map(readContent))
          .then(files => Promise.all(files.map(upload)))
          .then(console.log);
      
      return false;
   }
   
   return (
     <div>
       <form onSubmit={onSubmit}>
         <input ref={file} type="file" multiple={true} />
         <input type="submit" value="Upload" />
       </form>
     </div>
   );
}

ReactDOM.render(<Uploader />, document.getElementById("root"));
load more v
88%

In my previous article Uploading Files to S3 using react hooks. We only covered the ability to do one file at a time. And I’m confident you could have figured out how to do multiple files. Either way I’m going to show you how to do it.,Learn how to upload multiple files to Amazon’s AWS S3 using Modern React. And React Hooks.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

independently manage S3 buckets while working with Amplify,“Dog or Not“ React application where you can upload a photo of a dog to an existing S3 bucket,re-use S3 buckets created and managed by existing Amplify projects

Pretag
 Pretag team - issue, fix, solve, resolve
75%

With this option set to true, users can upload some files, and then add more files and upload those as well. A model use case for this is uploading images to a gallery or adding attachments to an email.,Sometimes you might need to mark some files as “already uploaded”, so that the user sees them, but they won’t actually be uploaded by Uppy. This can be achieved by looping through files and setting uploadComplete: true, uploadStarted: true on them,Stop all uploads in progress and clear file selection, set progress to 0. Basically, return things to the way they were before any user input.

import Uppy from '@uppy/core'

const uppy = new Uppy()
load more v

Other "reactjs-multiple" queries related to "Loop through array of multiple images to upload individually to AWS s3 ReactJS"