Здравствуйте! Хочу сделать прогресс бар загружая на AWS s3 используя AJAX (axios) и laravel методы в роутах. У меня есть функция onUploadProgress в axios, но она показывает не весь ход загрузки, а именно локалькую какую-то (или что-т одругое, не знаю как назвать. Мб без обработки только загрузка. - не важно), суть в том, что она доходит до 100%, но ответ приходит через пару секунд после этого.
Подскажите пожалуйста как можно сделать.
Для простоты понимая я сделал тестовый код , вот он:
HTML форма:
<form action="{{ route('task.store') }}" method="POST" enctype="multipart/form-data" class="form">
<input type="file" name="files[]" id="files" multiple required>
<input type="submit" id="btn">
</form>
JavaScript:
var btn = document.getElementById('btn');
var form = document.querySelector('.form');
form.addEventListener('submit', function(e){
e.preventDefault();
var file = document.querySelector('#files').files[0];
var data = new FormData();
data.append('test', file);
var settings = {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: function (progressEvent) {
let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(percentCompleted);
}
};
axios.post(this.action, data, settings)
.then(response => {
console.log(response);
})
.catch(response => {
console.log(response)
});
});
Роут на сервер (тот, который в action в форме):
public function store(Request $request) {
$path = 'folder';
$s3_path = $request->test->store($path, 's3');
return [
'path' => $s3_path
];
}
Буду признателен если поможете!
