Upload image file to AWS S3 React JS - reactjs

Question

Currently I have code working where it will upload multiple files to s3.
My problem is, the image files are corrupted and will not open.
I want to upload them as images, or Form data, not encoded in base64 format.
How would I go about solving this?
I apologize for the sloppy code.
My Code
import { API, Storage } from "aws-amplify";
import { S3Album } from 'aws-amplify-react';
function Upload(props) {
async function readContent(fileToUpload) {
return new Promise((accept, reject) => {
const reader = new FileReader();
reader.readAsDataURL(fileToUpload);
reader.onload = () => accept({
name: fileToUpload.name,
type: fileToUpload.type,
content: reader.result
});
reader.onerror = () => reject();
});
}
async function handleSubmit(event) {
event.preventDefault();
const filesAsArray = [...fileToUpload.current.files];
const fileInfo = Promise.all(filesAsArray.map(readContent))
.then(files => Promise.all(files.map(uploadFile)))
.then(console.log);
return false;
}
async function uploadFile(fileToUpload) {
setShowLoading(true);
const filename = `${job.jobId}/${fileToUpload.name}`;
const stored = await Storage.put(filename, fileToUpload.content, {
contentType: fileToUpload.type
});
return new Promise(accept => {
setTimeout(() => accept(fileToUpload), 1000);
});
setShowLoading(false);
}
return(
<h4 style={centerText}> Please upload all images for {(job.streetAddress)} </h4>
<br></br>
<br></br>
<S3Album path={job.jobId}/>
<form onSubmit={handleSubmit}>
<input multiple type="file" ref={fileToUpload}></input>
<Button expand="block" color="primary" strong="true" size="default" type="submit"> Upload </Button>
</form>
);
}
export default withRouter(Upload);

Answer 1

const stored = await Storage.put(filename, fileToUpload, {contentType:fileToUpload.type});
Storage.put() can take in a file object directly, so no need for FileReader().
See image example: https://aws-amplify.github.io/docs/js/storage