class FileUpload {
constructor(input) {
this.input = input;
}
upload() {
Array.from(this.input.files).forEach(file => {
this.create_progress_bar(file);
this.upload_file(file);
});
}
upload_file(file) {
var formData = new FormData();
formData.append('file', file);
formData.append('filename', file.name);
$('.filename[data-name="' + file.name + '"]').text(file.name);
$('.textbox[data-name="' + file.name + '"]').text("Uploading file");
$.ajaxSetup({
headers: {
"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
}
});
var self = this; // Preserve reference to 'this'
$.ajax({
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
$('.progress-bar[data-name="' + file.name + '"]').css('width', percent + '%');
$('.progress-bar[data-name="' + file.name + '"]').text(percent + '%');
}
});
return xhr;
},
url: '/add/fileUploader/',
type: 'POST',
dataType: 'json',
cache: false,
processData: false,
contentType: false,
data: formData,
error: function (xhr) {
alert(xhr.statusText);
},
success: function (res) {
$('.textbox[data-name="' + file.name + '"]').text(res.data);
console.log('File uploaded to:', res.existingPath);
// Add the uploaded file path as an option in the select tag
var option = '';
$('#filePathInput').append(option);
}
});
}
create_progress_bar(file) {
var progress = `
`;
$('#uploaded_files').append(progress);
}
}
(function ($) {
$('#fileupload').on('change', function (event) {
var uploader = new FileUpload(this);
uploader.upload();
});
})(jQuery);