288 lines
8.6 KiB
JavaScript
288 lines
8.6 KiB
JavaScript
const fileInput = document.getElementById('fileInput');
|
|
const selectedFilesDiv = document.getElementById('selectedFiles');
|
|
|
|
let repeatedList = []
|
|
fileInput.addEventListener('change', function () {
|
|
|
|
populateFileTable(Array.from(fileInput.files));
|
|
console.log('fileInput.files on change', fileInput.files); getFileListFromServer(fileInput.files);
|
|
});
|
|
|
|
async function getFileListFromServer(fileInput) {
|
|
|
|
const fileUpload = document.getElementById('fileUpload');
|
|
fileUpload.style.color = 'white';
|
|
|
|
await fetch('/getfilenames')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Call populateFileTable() with the retrieved file list
|
|
compareFilelist(fileInput , data);
|
|
})
|
|
.catch(error => console.error('Error getting file list from server:', error));
|
|
}
|
|
function compareFilelist(fileInput , data) {
|
|
// console.log("resultes :");
|
|
console.log(fileInput);
|
|
// console.log(data); //array
|
|
|
|
Array.from(fileInput).forEach(selectedfile => {
|
|
console.log(selectedfile.name);
|
|
data.forEach(filename => {
|
|
if (filename === selectedfile.name){
|
|
const repeatedFileName = selectedfile.name
|
|
console.log( repeatedFileName, 'is repeated ');
|
|
repeatedList.push(repeatedFileName);
|
|
|
|
Array.from(selectedFilesDiv.children[0].rows).forEach((row, index) => {
|
|
const fileNameCell = row.cells[0];
|
|
const fileStateCell = row.cells[2];
|
|
|
|
const fileName = fileNameCell.textContent;
|
|
if (fileName == repeatedFileName) {
|
|
row.style.backgroundColor = 'rgb(254 255 82)';
|
|
fileStateCell.innerText = 'Repeated file!';
|
|
}
|
|
});
|
|
|
|
} // repeat function
|
|
});
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
async function handleFormSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
const getFileStateBtn = document.getElementById('getFileStateBtn');
|
|
getFileStateBtn.disabled = false;
|
|
|
|
const fileUpload = document.getElementById('fileUpload');
|
|
fileUpload.style.color = 'grey';
|
|
|
|
const formData = new FormData(this);
|
|
|
|
// Get the file input element
|
|
const fileInput = document.getElementById('fileInput');
|
|
const fileList = fileInput.files;
|
|
|
|
|
|
|
|
// Filter out files based on repeatedList before upload
|
|
const filteredFiles = Array.from(fileList).filter(file => {
|
|
return !repeatedList.includes(file.name);
|
|
});
|
|
|
|
if (filteredFiles.length > 0) {
|
|
|
|
// Replace the original files with the modified file list
|
|
formData.delete('uploaded'); // Delete the existing files
|
|
filteredFiles.forEach(file => formData.append('uploaded', file)); // Add modified files
|
|
|
|
|
|
try {
|
|
const response = await fetch('/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
// Handle response as needed
|
|
|
|
|
|
const data = await response.json();
|
|
console.log(data);
|
|
const fileStates = data.states;
|
|
const filelist = data.files;
|
|
const fileErrors = data.errors;
|
|
|
|
const resultDiv = document.getElementById('result');
|
|
// createTable(resultDiv, data.files);
|
|
|
|
|
|
Array.from(selectedFilesDiv.children[0].rows).forEach((row, index) => {
|
|
const fileNameCell = row.cells[0];
|
|
const fileSizeCell = row.cells[1];
|
|
const fileStateCell = row.cells[2];
|
|
|
|
const fileName = fileNameCell.textContent;
|
|
const fileSize = fileSizeCell.textContent;
|
|
|
|
filelist.forEach(element => {
|
|
if (element.originalFilename === fileName) {
|
|
console.log('found file name similar');
|
|
console.log('element.size', element.size);
|
|
console.log('fileName', fileSize);
|
|
|
|
if (element.size == fileSize) {
|
|
row.style.fontWeight = 'bold';
|
|
row.style.backgroundImage = 'radial-gradient(farthest-corner at 50% 50%, skyblue, transparent)';
|
|
fileStateCell.innerText = 'uploaded';
|
|
} else {
|
|
row.style.backgroundColor = 'pink';
|
|
fileStateCell.innerText = 'error upload';
|
|
|
|
}
|
|
}
|
|
|
|
});
|
|
// const fileState = filelist.find(file => file.originalFilename === fileName);
|
|
// if (fileState) {
|
|
// fileSizeCell.textContent = fileState.size;
|
|
// if (fileState.size === 'Bad') {
|
|
// row.style.backgroundColor = 'red';
|
|
// } else {
|
|
// row.style.backgroundColor = 'transparent';
|
|
// }
|
|
// }
|
|
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('Error uploading files:', error);
|
|
// Handle errors during upload
|
|
alert('Error uploading files:', error);
|
|
}
|
|
} else {
|
|
console.log("No valid files selected for upload.");
|
|
alert('Допустимые файлы не выбраны или уже загружены.');
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// Function to populate the file table with selected files
|
|
function populateFileTable(fileList) {
|
|
const table = document.createElement('table');
|
|
|
|
const headerRow = table.insertRow();
|
|
// headerRow.style.background = '#121212';
|
|
headerRow.style.background = ' linear-gradient(90deg, rgba(28,28,28,0.8379726890756303) 0%, rgba(24,23,23,0.9556197478991597) 51%, rgba(29,29,29,0.8715861344537815) 100%)';
|
|
headerRow.style.color = 'white';
|
|
const filenameHeader = headerRow.insertCell();
|
|
filenameHeader.textContent = 'Filename';
|
|
const sizeHeader = headerRow.insertCell();
|
|
sizeHeader.textContent = 'Size';
|
|
const stateHeader = headerRow.insertCell();
|
|
stateHeader.textContent = 'State';
|
|
|
|
|
|
fileList.forEach(fileData => {
|
|
const row = table.insertRow();
|
|
const filenameCell = row.insertCell();
|
|
if (fileData.originalFilename) {
|
|
filenameCell.textContent = fileData.originalFilename;
|
|
} else if (fileData.name) {
|
|
filenameCell.textContent = fileData.name;
|
|
}
|
|
|
|
const sizeCell = row.insertCell();
|
|
sizeCell.textContent = fileData.size;
|
|
const stateCell = row.insertCell();
|
|
stateCell.textContent = '---';
|
|
});
|
|
|
|
// Replace the existing content with the new table
|
|
selectedFilesDiv.innerHTML = '';
|
|
selectedFilesDiv.appendChild(table);
|
|
}
|
|
|
|
|
|
|
|
document.querySelector('form').addEventListener('submit', handleFormSubmit);
|
|
|
|
document.getElementById("getFileStateBtn").addEventListener("click", async function () {
|
|
|
|
const getFileStateBtn = document.getElementById('getFileStateBtn');
|
|
getFileStateBtn.disabled = true; // Disable the button
|
|
const fileUpload = document.getElementById('fileUpload');
|
|
fileUpload.style.color = 'white';
|
|
|
|
const response = await fetch('/getState');
|
|
const data = await response.json();
|
|
console.log(data);
|
|
// const stateDiv = document.getElementById('state');
|
|
// createTable(stateDiv, data.states);
|
|
|
|
const fileStates = data.states;
|
|
const fileErrors = data.errors;
|
|
|
|
// const resultDiv = document.getElementById('result');
|
|
// createTable(resultDiv, data.files);
|
|
|
|
|
|
Array.from(selectedFilesDiv.children[0].rows).forEach((row, index) => {
|
|
const fileNameCell = row.cells[0];
|
|
const fileSizeCell = row.cells[1];
|
|
const fileStateCell = row.cells[2];
|
|
|
|
const fileName = fileNameCell.textContent;
|
|
|
|
const fileState = fileStates.find(file => file.name === fileName);
|
|
if (fileState) {
|
|
fileStateCell.innerText = fileState.size;
|
|
if (fileState.size === 'Bad') {
|
|
row.style.backgroundImage = 'radial-gradient(farthest-corner at 50% 50%, orangered, transparent)';
|
|
} else {
|
|
row.style.backgroundImage = 'radial-gradient(farthest-corner at 50% 50%, lightgreen, transparent)';
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
const dropZone = document.getElementById('dropZone');
|
|
|
|
// Prevent default behavior for drag events
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
dropZone.addEventListener(eventName, preventDefault, false);
|
|
});
|
|
|
|
function preventDefault(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
// Handle file drop event
|
|
dropZone.addEventListener('drop', handleDrop, false);
|
|
|
|
function handleDrop(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const fileList = event.dataTransfer.files;
|
|
|
|
// const repeatedList = ['avoid_uploading_this_file.txt', 'another_filename_to_avoid.txt']; // Example repeatedList
|
|
|
|
// Filter out files based on repeatedList before upload
|
|
const filteredFiles = Array.from(fileList).filter(file => {
|
|
return !repeatedList.includes(file.name);
|
|
});
|
|
|
|
// Replace the original files with the modified file list
|
|
const formData = new FormData();
|
|
filteredFiles.forEach(file => formData.append('uploaded', file)); // Add modified files
|
|
|
|
// Update the file input field with dropped files
|
|
const fileInput = document.getElementById('fileInput');
|
|
fileInput.files = fileList;
|
|
|
|
// Submit the form or call handleFormSubmit function here with formData
|
|
|
|
populateFileTable(Array.from(fileInput.files));
|
|
console.log('dragdrop', fileInput.files);
|
|
getFileListFromServer(fileInput.files);
|
|
|
|
}
|
|
|
|
// Allow users to trigger file selection by clicking the drop zone
|
|
dropZone.addEventListener('click', () => {
|
|
const fileInput = document.getElementById('fileInput');
|
|
fileInput.click();
|
|
}); |