refactor(userarea.js): senhance file upload
UX Uniformly changed single quotes to double quotes for consistency throughout userarea.js. Improved the file upload feature by refining the visual feedback during file upload processes. This includes more descriptive progress and success/error messages, ensuring users have clear, immediate insight into the state of their uploads. Additionally, refined the data submission structure in `uploadFile`, explicitly assigning file type and title, optimizing for better server-side processing. These changes enhance code readability and user experience.
This commit is contained in:
parent
53d90cb070
commit
f5723de9fd
|
@ -1,132 +1,142 @@
|
||||||
import '../scss/frontend.scss';
|
import "../scss/frontend.scss";
|
||||||
import '../css/userarea.css';
|
import "../css/userarea.css";
|
||||||
|
|
||||||
import { getCookie } from './api';
|
import { getCookie } from "./api";
|
||||||
|
|
||||||
import { Tab } from 'bootstrap';
|
import { Tab } from "bootstrap";
|
||||||
import DataTable from 'datatables.net-dt';
|
import DataTable from "datatables.net-dt";
|
||||||
|
|
||||||
let mediaTable = new DataTable('#mediaTable');
|
let mediaTable = new DataTable("#mediaTable");
|
||||||
let scenesTable = new DataTable('#scenesTable');
|
let scenesTable = new DataTable("#scenesTable");
|
||||||
let permissionsTable = new DataTable('#permissionsTable');
|
let permissionsTable = new DataTable("#permissionsTable");
|
||||||
|
|
||||||
/* Uploads */
|
/* Uploads */
|
||||||
|
|
||||||
document.querySelectorAll('.drop-zone__input').forEach(inputElement => {
|
document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
|
||||||
const dropZoneElement = inputElement.closest('.drop-zone');
|
const dropZoneElement = inputElement.closest(".drop-zone");
|
||||||
|
|
||||||
dropZoneElement.addEventListener('click', e => {
|
dropZoneElement.addEventListener("click", (e) => {
|
||||||
inputElement.click();
|
inputElement.click();
|
||||||
});
|
});
|
||||||
|
|
||||||
dropZoneElement.addEventListener('dragover', e => {
|
dropZoneElement.addEventListener("dragover", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
dropZoneElement.classList.add('drop-zone--over');
|
dropZoneElement.classList.add("drop-zone--over");
|
||||||
});
|
});
|
||||||
|
|
||||||
['dragleave', 'dragend', 'drop'].forEach(type => {
|
["dragleave", "dragend", "drop"].forEach((type) => {
|
||||||
dropZoneElement.addEventListener(type, e => {
|
dropZoneElement.addEventListener(type, (e) => {
|
||||||
dropZoneElement.classList.remove('drop-zone--over');
|
dropZoneElement.classList.remove("drop-zone--over");
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
dropZoneElement.addEventListener('drop', e => {
|
dropZoneElement.addEventListener("drop", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (e.dataTransfer.files.length) {
|
if (e.dataTransfer.files.length) {
|
||||||
inputElement.files = e.dataTransfer.files;
|
inputElement.files = e.dataTransfer.files;
|
||||||
handleFiles(inputElement.files);
|
handleFiles(inputElement.files);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
inputElement.addEventListener('change', e => {
|
inputElement.addEventListener("change", (e) => {
|
||||||
if (inputElement.files.length) {
|
if (inputElement.files.length) {
|
||||||
handleFiles(inputElement.files);
|
handleFiles(inputElement.files);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleFiles(files) {
|
function handleFiles(files) {
|
||||||
const uploadStatus = document.getElementById('uploadStatus');
|
const uploadStatus = document.getElementById("uploadStatus");
|
||||||
|
|
||||||
Array.from(files).forEach(file => {
|
Array.from(files).forEach((file) => {
|
||||||
const fileRow = document.createElement('div');
|
const fileRow = document.createElement("div");
|
||||||
fileRow.classList.add('row', 'align-items-center', 'mb-2', 'file-upload-wrapper');
|
fileRow.classList.add(
|
||||||
|
"row",
|
||||||
|
"align-items-center",
|
||||||
|
"mb-2",
|
||||||
|
"file-upload-wrapper"
|
||||||
|
);
|
||||||
|
|
||||||
const thumbnailCol = document.createElement('div');
|
const thumbnailCol = document.createElement("div");
|
||||||
thumbnailCol.classList.add('col-2');
|
thumbnailCol.classList.add("col-2");
|
||||||
const thumbnail = document.createElement('img');
|
const thumbnail = document.createElement("img");
|
||||||
thumbnail.classList.add('img-fluid', 'thumbnail');
|
thumbnail.classList.add("img-fluid", "thumbnail");
|
||||||
thumbnail.src = ''; // Placeholder until upload completes
|
thumbnail.src = ""; // Placeholder until upload completes
|
||||||
thumbnailCol.appendChild(thumbnail);
|
thumbnailCol.appendChild(thumbnail);
|
||||||
|
|
||||||
const fileNameCol = document.createElement('div');
|
const fileNameCol = document.createElement("div");
|
||||||
fileNameCol.classList.add('col-7');
|
fileNameCol.classList.add("col-7");
|
||||||
const fileName = document.createElement('span');
|
const fileName = document.createElement("span");
|
||||||
fileName.classList.add('file-name');
|
fileName.classList.add("file-name");
|
||||||
fileName.textContent = file.name;
|
fileName.textContent = file.name;
|
||||||
fileNameCol.appendChild(fileName);
|
fileNameCol.appendChild(fileName);
|
||||||
|
|
||||||
const progressCol = document.createElement('div');
|
const progressCol = document.createElement("div");
|
||||||
progressCol.classList.add('col-3');
|
progressCol.classList.add("col-3");
|
||||||
const progressBar = document.createElement('div');
|
const progressBar = document.createElement("div");
|
||||||
progressBar.classList.add('progress');
|
progressBar.classList.add("progress");
|
||||||
const progressBarInner = document.createElement('div');
|
const progressBarInner = document.createElement("div");
|
||||||
progressBarInner.classList.add('progress-bar');
|
progressBarInner.classList.add("progress-bar");
|
||||||
progressBarInner.setAttribute('role', 'progressbar');
|
progressBarInner.setAttribute("role", "progressbar");
|
||||||
progressBarInner.setAttribute('aria-valuemin', '0');
|
progressBarInner.setAttribute("aria-valuemin", "0");
|
||||||
progressBarInner.setAttribute('aria-valuemax', '100');
|
progressBarInner.setAttribute("aria-valuemax", "100");
|
||||||
progressBarInner.style.width = '0%';
|
progressBarInner.style.width = "0%";
|
||||||
progressBar.appendChild(progressBarInner);
|
progressBar.appendChild(progressBarInner);
|
||||||
progressCol.appendChild(progressBar);
|
progressCol.appendChild(progressBar);
|
||||||
|
|
||||||
fileRow.appendChild(thumbnailCol);
|
fileRow.appendChild(thumbnailCol);
|
||||||
fileRow.appendChild(fileNameCol);
|
fileRow.appendChild(fileNameCol);
|
||||||
fileRow.appendChild(progressCol);
|
fileRow.appendChild(progressCol);
|
||||||
|
|
||||||
uploadStatus.prepend(fileRow);
|
uploadStatus.prepend(fileRow);
|
||||||
|
|
||||||
uploadFile(file, progressBarInner, thumbnail);
|
uploadFile(file, progressBarInner, thumbnail);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function uploadFile(file, progressBar, thumbnail) {
|
function uploadFile(file, progressBar, thumbnail) {
|
||||||
const xhr = new XMLHttpRequest();
|
const xhr = new XMLHttpRequest();
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
|
|
||||||
formData.append('file', file);
|
formData.append("file", file);
|
||||||
formData.append('csrfmiddlewaretoken', getCookie('csrftoken'));
|
formData.append("csrfmiddlewaretoken", getCookie("csrftoken"));
|
||||||
|
|
||||||
if (file.type.startsWith('image')) {
|
if (file.type.startsWith("image")) {
|
||||||
formData.append('media_type', 'image');
|
formData.append("media_type", "image");
|
||||||
} else if (file.type.startsWith('video')) {
|
} else if (file.type.startsWith("video")) {
|
||||||
formData.append('media_type', 'video');
|
formData.append("media_type", "video");
|
||||||
} else {
|
} else {
|
||||||
formData.append('media_type', 'other');
|
formData.append("media_type", "other");
|
||||||
|
}
|
||||||
|
|
||||||
|
formData.append("title", file.name);
|
||||||
|
|
||||||
|
xhr.upload.addEventListener("progress", (e) => {
|
||||||
|
if (e.lengthComputable) {
|
||||||
|
if (e.loaded == e.total) {
|
||||||
|
progressBar.style.width = "100%";
|
||||||
|
progressBar.textContent = "Processing...";
|
||||||
|
} else {
|
||||||
|
const percentComplete = (e.loaded / e.total) * 100;
|
||||||
|
progressBar.style.width = `${percentComplete}%`;
|
||||||
|
progressBar.textContent = `${Math.round(percentComplete)}%`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
formData.append('title', file.name);
|
xhr.open("POST", document.location.href, true);
|
||||||
|
|
||||||
xhr.upload.addEventListener('progress', (e) => {
|
xhr.onload = () => {
|
||||||
if (e.lengthComputable) {
|
if (xhr.status === 201) {
|
||||||
const percentComplete = (e.loaded / e.total) * 100;
|
const response = JSON.parse(xhr.responseText);
|
||||||
progressBar.style.width = `${percentComplete}%`;
|
const thumbnailUrl = response.thumbnailUrl;
|
||||||
progressBar.textContent = `${Math.round(percentComplete)}%`;
|
thumbnail.src = thumbnailUrl;
|
||||||
}
|
progressBar.classList.add("bg-success");
|
||||||
});
|
progressBar.textContent = "Success!";
|
||||||
|
} else {
|
||||||
xhr.open('POST', document.location.href, true);
|
progressBar.classList.add("bg-danger");
|
||||||
|
progressBar.textContent = "Error!";
|
||||||
xhr.onload = () => {
|
}
|
||||||
if (xhr.status === 201) {
|
};
|
||||||
const response = JSON.parse(xhr.responseText);
|
xhr.send(formData);
|
||||||
const thumbnailUrl = response.thumbnailUrl;
|
|
||||||
thumbnail.src = thumbnailUrl;
|
|
||||||
progressBar.classList.add('bg-success');
|
|
||||||
progressBar.textContent = "Success!";
|
|
||||||
} else {
|
|
||||||
progressBar.classList.add('bg-danger');
|
|
||||||
progressBar.textContent = "Error!";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send(formData);
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue