Yii2: How to show file uploading progress? [duplicate] - file-upload

Question

This question already has an answer here:
Track ajax post progress for fileupload using jquery ajax and FormData
(1 answer)
Closed 4 years ago.
I use Yii2 framework. I would like to show file uploading progress. I don't need complex interface with drag-n-drop or preview. Only progress bar and possible 'cancel' button. Could you point me to a simple example? Thanks.

Answer 1

Eventually I made it with jQuery ajax.
js:
function upload() {
var input = $('#archiveInput');
var files = input.prop('files');
if (files.length > 0) {
var data = new FormData();
data.append('archive', files[0]);
$.ajax({
url: input.data('upload-url'),
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
success: function () {
alert('Upload Complete');
},
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', onProgress);
return myXhr;
}
}
});
}
}
function onProgress(ev) {
if (ev.lengthComputable) {
var progress = parseInt(ev.loaded / ev.total * 100, 10);
$("#progress .progress-bar").css(
"width",
progress + "%"
);
}
}
php controller:
public function actionUpload($idSupply)
{
$directory = FileHelper::normalizePath(Yii::getAlias('#app') . '/uploads/' . $idSupply);
if (!is_dir($directory)) {
FileHelper::createDirectory($directory);
}
$fileName = 'archive.zip';
$filePath = $directory . DIRECTORY_SEPARATOR . $fileName;
if (is_file($filePath)) {
unlink($filePath);
}
move_uploaded_file($_FILES['archive']['tmp_name'], $filePath);
}