I am using react-aws-s3 npm package to upload images to my s3 bucket, but it is giving me following error while clicking on upload to s3 button.
TypeError: Cannot read properties of undefined (reading 'split') Error
Code:
const config = {
bucketName: S3_BUCKET,
dirName: 'media',
rregion: REGION,
accessKeyId: ACCESS_KEY,
secretAccessKey: SECRET_ACCESS_KEY
}
const [selectedFile, setSelectedFile] = useState(null);
const [uploadedFile, setUploadedFile] = useState(null);
const handleFileInput = (e) => {
setSelectedFile(URL.createObjectURL(e.target.files[0]));
setUploadedFile(e.target.files[0])
}
const handleUpload = async (file) => {
const ReactS3Client = new S3(config);
ReactS3Client
.uploadFile(file, "MyImage")
.then(data => console.log(data))
.catch(err => console.error(err))
}
return <>
<div>
<div>React S3 File Upload</div>
<input type="file" onChange={handleFileInput}/>
<button onClick={() => handleUpload(uploadedFile)}> Upload to S3</button>
<div>
<img src={selectedFile} width={200}/>
</div>
</div>
</>;