This commit overhauls the user area with the addition of comprehensive file upload capabilities for images and videos. Notably, it integrates front-end enhancements for drag-and-drop uploads in the user area and introduces a secure back-end handling process. The back-end adjustments include a new media upload view and adjustments to image and video models to support large file handling through settings for maximum image pixel limits. Additionally, the refactor standardizes CSRF token retrieval across JavaScript modules, improving security and code maintainability. - Front-end additions include detailed user feedback during the file upload process, such as progress bars and success/error indicators. - Back-end improvements ensure large image files are processed efficiently, mitigating potential memory issues by configuring a maximum image pixel threshold. - Consolidating the CSRF token retrieval into the `api.js` module centralizes security mechanisms, reducing redundancy and enhancing the codebase's clarity. Overall, these changes enrich the platform's media management capabilities, bolster security practices, and improve user experience through intuitive interface updates and robust back-end processing.
131 lines
4.3 KiB
JavaScript
131 lines
4.3 KiB
JavaScript
import '../scss/frontend.scss';
|
|
import '../css/userarea.css';
|
|
|
|
import { getCookie } from './api';
|
|
|
|
import { Tab } from 'bootstrap';
|
|
import DataTable from 'datatables.net-dt';
|
|
|
|
let mediaTable = new DataTable('#mediaTable');
|
|
let scenesTable = new DataTable('#scenesTable');
|
|
let permissionsTable = new DataTable('#permissionsTable');
|
|
|
|
/* Uploads */
|
|
|
|
document.querySelectorAll('.drop-zone__input').forEach(inputElement => {
|
|
const dropZoneElement = inputElement.closest('.drop-zone');
|
|
|
|
dropZoneElement.addEventListener('click', e => {
|
|
inputElement.click();
|
|
});
|
|
|
|
dropZoneElement.addEventListener('dragover', e => {
|
|
e.preventDefault();
|
|
dropZoneElement.classList.add('drop-zone--over');
|
|
});
|
|
|
|
['dragleave', 'dragend', 'drop'].forEach(type => {
|
|
dropZoneElement.addEventListener(type, e => {
|
|
dropZoneElement.classList.remove('drop-zone--over');
|
|
});
|
|
});
|
|
|
|
dropZoneElement.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
if (e.dataTransfer.files.length) {
|
|
inputElement.files = e.dataTransfer.files;
|
|
handleFiles(inputElement.files);
|
|
}
|
|
});
|
|
|
|
inputElement.addEventListener('change', e => {
|
|
if (inputElement.files.length) {
|
|
handleFiles(inputElement.files);
|
|
}
|
|
});
|
|
});
|
|
|
|
function handleFiles(files) {
|
|
const uploadStatus = document.getElementById('uploadStatus');
|
|
|
|
Array.from(files).forEach(file => {
|
|
const fileRow = document.createElement('div');
|
|
fileRow.classList.add('row', 'align-items-center', 'mb-2', 'file-upload-wrapper');
|
|
|
|
const thumbnailCol = document.createElement('div');
|
|
thumbnailCol.classList.add('col-2');
|
|
const thumbnail = document.createElement('img');
|
|
thumbnail.classList.add('img-fluid', 'thumbnail');
|
|
thumbnail.src = ''; // Placeholder until upload completes
|
|
thumbnailCol.appendChild(thumbnail);
|
|
|
|
const fileNameCol = document.createElement('div');
|
|
fileNameCol.classList.add('col-7');
|
|
const fileName = document.createElement('span');
|
|
fileName.classList.add('file-name');
|
|
fileName.textContent = file.name;
|
|
fileNameCol.appendChild(fileName);
|
|
|
|
const progressCol = document.createElement('div');
|
|
progressCol.classList.add('col-3');
|
|
const progressBar = document.createElement('div');
|
|
progressBar.classList.add('progress');
|
|
const progressBarInner = document.createElement('div');
|
|
progressBarInner.classList.add('progress-bar');
|
|
progressBarInner.setAttribute('role', 'progressbar');
|
|
progressBarInner.setAttribute('aria-valuemin', '0');
|
|
progressBarInner.setAttribute('aria-valuemax', '100');
|
|
progressBarInner.style.width = '0%';
|
|
progressBar.appendChild(progressBarInner);
|
|
progressCol.appendChild(progressBar);
|
|
|
|
fileRow.appendChild(thumbnailCol);
|
|
fileRow.appendChild(fileNameCol);
|
|
fileRow.appendChild(progressCol);
|
|
|
|
uploadStatus.prepend(fileRow);
|
|
|
|
uploadFile(file, progressBarInner, thumbnail);
|
|
});
|
|
}
|
|
|
|
function uploadFile(file, progressBar, thumbnail) {
|
|
const xhr = new XMLHttpRequest();
|
|
const formData = new FormData();
|
|
|
|
formData.append('file', file);
|
|
formData.append('csrfmiddlewaretoken', getCookie('csrftoken'));
|
|
|
|
if (file.type.startsWith('image')) {
|
|
formData.append('media_type', 'image');
|
|
} else if (file.type.startsWith('video')) {
|
|
formData.append('media_type', 'video');
|
|
} else {
|
|
formData.append('media_type', 'other');
|
|
}
|
|
|
|
formData.append('title', file.name);
|
|
|
|
xhr.upload.addEventListener('progress', (e) => {
|
|
if (e.lengthComputable) {
|
|
const percentComplete = (e.loaded / e.total) * 100;
|
|
progressBar.style.width = `${percentComplete}%`;
|
|
progressBar.textContent = `${Math.round(percentComplete)}%`;
|
|
}
|
|
});
|
|
|
|
xhr.open('POST', document.location.href, true);
|
|
|
|
xhr.onload = () => {
|
|
if (xhr.status === 200) {
|
|
const response = JSON.parse(xhr.responseText);
|
|
const thumbnailUrl = response.thumbnailUrl;
|
|
thumbnail.src = thumbnailUrl;
|
|
} else {
|
|
progressBar.classList.add('bg-danger');
|
|
progressBar.textContent = "Error!";
|
|
}
|
|
};
|
|
xhr.send(formData);
|
|
}
|