Привлечение:
- Аккаунт AWS
- Ковш S3
- Включение CORS для ведра S3
- Пользователь IAM с секретным ключом и ключом доступа
- Если вы используете токен федерации, тогда токен STS
Настройка CORS
Прежде чем сценарий браузера сможет получить доступ к корзине Amazon S3, необходимо сначала настроить его конфигурацию CORS следующим образом.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
<ExposeHeader>ETag</ExposeHeader>
</CORSRule>
</CORSConfiguration>
HTML:
<html> <head> <title> AWS S3 File Upload Progress Bar</title> <link rel="stylesheet" href="styles.css"> <script src="https://sdk.amazonaws.com/js/aws-sdk-2.693.0.min.js"></script> <script src="app.js"></script> </head> <body> <input type="file" id="myFile" multiple size="50" onchange="uploadSampleFile()"><br><br> <div id="myProgress" style="display:none;"> <div id="myBar"></div> </div> </body> </html>
CSS:
#myProgress { width: 100%; background-color: grey;} #myBar { width: 1%; height: 30px; background-color: green;}
JS :
var bucket = new AWS.S3({
accessKeyId: "ACCESS_KEY",
secretAccessKey: "SECRETE_KEY",
sessionToken: "SESSION_TOKEN", // optional you can remove if you don't want pass
region: 'us-east-1'
});
uploadfile = function(fileName, file, folderName) {
const params = {
Bucket: "BUCKET_NAME",
Key: folderName + fileName,
Body: file,
ContentType: file.type
};
return this.bucket.upload(params, function(err, data) {
if (err) {
console.log('There was an error uploading your file: ', err);
return false;
}
console.log('Successfully uploaded file.', data);
return true;
});
}
uploadSampleFile = function() {
var progressDiv = document.getElementById("myProgress");
progressDiv.style.display="block";
var progressBar = document.getElementById("myBar");
file = document.getElementById("myFile").files[0];
folderName = "Document/";
uniqueFileName = 'SampleFile';
let fileUpload = {
id: "",
name: file.name,
nameUpload: uniqueFileName,
size: file.size,
type: "",
timeReference: 'Unknown',
progressStatus: 0,
displayName: file.name,
status: 'Uploading..',
}
uploadfile(uniqueFileName, file, folderName)
.on('httpUploadProgress', function(progress) {
let progressPercentage = Math.round(progress.loaded / progress.total * 100);
console.log(progressPercentage);
progressBar.style.width = progressPercentage + "%";
if (progressPercentage < 100) {
fileUpload.progressStatus = progressPercentage;
} else if (progressPercentage == 100) {
fileUpload.progressStatus = progressPercentage;
fileUpload.status = "Uploaded";
}
})
}
Ссылка :
Https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html