98 lines
2.9 KiB
JavaScript
98 lines
2.9 KiB
JavaScript
|
import '../../scss/chat-file-uploader.scss';
|
|||
|
|
import {isEmptyValue} from "./common";
|
|||
|
|
bindFileInputEvents();
|
|||
|
|
|
|||
|
|
function bindFileInputEvents() {
|
|||
|
|
$(".chat-file-uploader #old-file-upload")?.remove();
|
|||
|
|
|
|||
|
|
$(".chat-file-uploader #file-upload").on("change", function () {
|
|||
|
|
updateFileInput(this);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(".chat-file-uploader .remove-btn").on("click", function () {
|
|||
|
|
eraseFileInput();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function eraseFileInput() {
|
|||
|
|
let fileInput = $(".chat-file-uploader #file-upload")[0];
|
|||
|
|
if (isEmptyValue(fileInput)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fileInput.value = "";
|
|||
|
|
if (fileInput.value) {
|
|||
|
|
// Это механизм "надёжного" сброса содержимого файл-инпута
|
|||
|
|
// для браузеров всех возрастов и типов
|
|||
|
|
fileInput.type = "text";
|
|||
|
|
fileInput.type = "file";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateFileInput(fileInput);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Старые браузер не поддерживают `structuredClone`
|
|||
|
|
* Эта функция создаёт копию инпута,
|
|||
|
|
* чтобы пользователь не мог повторно отправить тот же файл
|
|||
|
|
* пока предыдущая транзакция не завершилась
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
function fileStructuredClone() {
|
|||
|
|
$(".chat-file-uploader #file-upload")?.attr("id", "old-file-upload");
|
|||
|
|
|
|||
|
|
var newFileInput = document.createElement("input");
|
|||
|
|
newFileInput.setAttribute(
|
|||
|
|
"data-allowed_extensions",
|
|||
|
|
$(".chat-file-uploader #old-file-upload")?.data("allowed_extensions")
|
|||
|
|
);
|
|||
|
|
newFileInput.setAttribute("multiple", "");
|
|||
|
|
newFileInput.setAttribute("type", "file");
|
|||
|
|
newFileInput.setAttribute("name", "chat_file");
|
|||
|
|
newFileInput.setAttribute("id", "file-upload");
|
|||
|
|
|
|||
|
|
var label = document.getElementById("label-for-file-upload");
|
|||
|
|
var chatFileUploader = document.getElementById("chat-file-uploader-for-history");
|
|||
|
|
chatFileUploader.insertBefore(newFileInput, label);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateFileInput(fileInput) {
|
|||
|
|
let errorField = $(".chat-file-uploader p");
|
|||
|
|
let removeBtn = $(".chat-file-uploader .remove-btn");
|
|||
|
|
let uploadFileName = $(".chat-file-uploader .upload-file-name");
|
|||
|
|
|
|||
|
|
errorField.hide();
|
|||
|
|
|
|||
|
|
if (fileInput.files.length < 1) {
|
|||
|
|
uploadFileName.text("");
|
|||
|
|
|
|||
|
|
removeBtn.hide();
|
|||
|
|
uploadFileName.hide();
|
|||
|
|
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let files = [];
|
|||
|
|
let allowedExtensions = new RegExp($(fileInput)?.data("allowed_extensions"), "i");
|
|||
|
|
for (let I = 0; I < fileInput.files.length; I++) {
|
|||
|
|
const file = fileInput.files[I];
|
|||
|
|
|
|||
|
|
if (!allowedExtensions.exec(file.name)) {
|
|||
|
|
eraseFileInput();
|
|||
|
|
errorField.show();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
files.push(file.name);
|
|||
|
|
}
|
|||
|
|
let formattedFilesString = files.join(", ");
|
|||
|
|
|
|||
|
|
uploadFileName.text(formattedFilesString);
|
|||
|
|
|
|||
|
|
removeBtn.show();
|
|||
|
|
uploadFileName.show();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export { bindFileInputEvents, fileStructuredClone, eraseFileInput, updateFileInput };
|