Creating a simple app to upload files to S3 bucket from browser. The code works just fine in Google Chrome. It does not work in Edge, however, if I run debug mode and step through the code, then it works in Edge. It appears that the promise is not returning in time in Edge (the returned ETag is blank). Does anyone have any ideas around this please? I have added async/awaits and Promise.all()... Code extract below.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Some Form</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.410.0.min.js"></script>
<script type="text/javascript">
// See the Configuring section to configure credentials in the SDK
// Configure your region
AWS.config.region = 'us-west-2';
var IdentityPoolId = "";
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
});
AWS.config.credentials.get(function(err) {
if (err) alert(err);
console.log(AWS.config.credentials);
});
var s3 = new AWS.S3({apiVersion: '2006-03-01', region: 'us-west-2'});
</script>
<script type='text/javascript'>
// Upload a list of files to an S3 bucket
var putBatch = async function putBatch(bucket, key, files) {
// Make all the putObject calls immediately
// Will return rejected promise if any requests fail
return await Promise.all(Array.from(files).map(function(file) {
var ukey = key + file.name;
var params = {
Bucket: bucket,
Key: ukey,
Body: file
};
var response = s3.putObject(params).promise();
return response;
}));
};
const validateUploadForm = async () =>
{
var uploadedFiles = document.getElementById("files").files;
if (!uploadedFiles.length) {
alert("A file must be selected!");
} else
{
var test = getDate();
try {
var bucket = '';
var objectKey = '';
await putBatch(bucket, objectKey, uploadedFiles)
.then(alert("Successfully uploaded file."))
.catch(console.error.bind(console));
} catch (e) {
console.log(e);
}
self.close();
}
};
</script>
</head>
<body>
<text id="title" name="title">
<form id="someForm" name="someForm" >
<p>Try selecting more than one file when browsing for files.</p>
<p>Click on the "Choose Files" button to upload:</p>
<form id='uploadForm' name='uploadForm'>
<CENTER>
<label for="files">Select file(s):</label>
<input onchange="uploadCheck()" type="file" id="files" multiple>
<button id="get-data">Get</button>
</CENTER>
</form>
<script>
// Add click event listener to the button
const button = document.getElementById('get-data');
button.addEventListener('click', async () => {
// Call the asynchronous function
const data = await validateUploadForm();
});
</script>
</body>
</html>
AWS OFFICIALUpdated 7 months ago
