add progress bar
This commit is contained in:
chark1es
parent
2b5bde9f42
commit
022f730ae9
2 changed files with 110 additions and 40 deletions
|
|
@ -474,46 +474,6 @@ export class EventAuth {
|
|||
const fileInput = this.elements.editorFiles;
|
||||
fileInput.setAttribute('multiple', 'true');
|
||||
fileInput.setAttribute('accept', '*/*');
|
||||
|
||||
// Add file input change handler for automatic upload
|
||||
fileInput.addEventListener('change', async () => {
|
||||
const selectedFiles = fileInput.files;
|
||||
if (selectedFiles && selectedFiles.length > 0) {
|
||||
try {
|
||||
// Create FormData for file upload
|
||||
const formData = new FormData();
|
||||
|
||||
// Add existing files to the formData
|
||||
if (event.files && Array.isArray(event.files)) {
|
||||
formData.append("files", JSON.stringify(event.files));
|
||||
}
|
||||
|
||||
// Add new files to the formData
|
||||
Array.from(selectedFiles).forEach(file => {
|
||||
formData.append("files", file);
|
||||
});
|
||||
|
||||
// Update the event with new files
|
||||
const updatedEvent = await this.pb.collection('events').update(event.id, formData);
|
||||
|
||||
// Update the files display without refreshing the entire editor
|
||||
event.files = updatedEvent.files;
|
||||
this.updateFilesDisplay(event);
|
||||
|
||||
// Clear the file input
|
||||
fileInput.value = '';
|
||||
|
||||
// Clear the file name display
|
||||
const fileNameDisplay = fileInput.parentElement?.querySelector('.file-name');
|
||||
if (fileNameDisplay) {
|
||||
fileNameDisplay.setAttribute('data-content', '');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to upload files:', err);
|
||||
alert('Failed to upload files. Please try again.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Store the event ID for saving
|
||||
saveEventButton.dataset.eventId = eventId;
|
||||
|
|
@ -1038,6 +998,105 @@ export class EventAuth {
|
|||
}
|
||||
|
||||
private init() {
|
||||
// Add file input change handler for automatic upload
|
||||
const fileInput = this.elements.editorFiles;
|
||||
fileInput.addEventListener('change', async () => {
|
||||
const selectedFiles = fileInput.files;
|
||||
if (selectedFiles && selectedFiles.length > 0) {
|
||||
try {
|
||||
// Get the current event ID
|
||||
const eventId = this.elements.saveEventButton.dataset.eventId;
|
||||
if (!eventId) {
|
||||
throw new Error('No event ID found');
|
||||
}
|
||||
|
||||
// Get current event to preserve existing files
|
||||
const currentEvent = await this.pb.collection("events").getOne(eventId);
|
||||
const formData = new FormData();
|
||||
|
||||
// Preserve existing files by adding them to formData
|
||||
if (currentEvent.files && Array.isArray(currentEvent.files)) {
|
||||
formData.append("files", JSON.stringify(currentEvent.files));
|
||||
}
|
||||
|
||||
// Add new files to the formData
|
||||
Array.from(selectedFiles).forEach(file => {
|
||||
formData.append("files", file);
|
||||
});
|
||||
|
||||
// Show progress bar container
|
||||
const progressContainer = document.getElementById('uploadProgress');
|
||||
const progressBar = document.getElementById('uploadProgressBar') as HTMLProgressElement;
|
||||
const progressText = document.getElementById('uploadProgressText');
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.remove('hidden');
|
||||
// Reset progress
|
||||
if (progressBar) progressBar.value = 0;
|
||||
if (progressText) progressText.textContent = '0%';
|
||||
}
|
||||
|
||||
// Create XMLHttpRequest for better progress tracking
|
||||
const xhr = new XMLHttpRequest();
|
||||
const url = `${this.pb.baseUrl}/api/collections/events/records/${eventId}`;
|
||||
|
||||
xhr.upload.onprogress = (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const progress = Math.round((e.loaded * 100) / e.total);
|
||||
if (progressBar) progressBar.value = progress;
|
||||
if (progressText) progressText.textContent = `${progress}%`;
|
||||
console.log('Upload progress:', progress + '%');
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = async () => {
|
||||
if (xhr.status === 200) {
|
||||
// Update was successful
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
const event = await this.pb.collection("events").getOne(eventId);
|
||||
this.updateFilesDisplay(event);
|
||||
|
||||
// Clear the file input
|
||||
fileInput.value = '';
|
||||
|
||||
// Hide progress bar after a short delay
|
||||
setTimeout(() => {
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.add('hidden');
|
||||
if (progressBar) progressBar.value = 0;
|
||||
if (progressText) progressText.textContent = '0%';
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
console.error('Upload failed:', xhr.responseText);
|
||||
alert('Failed to upload files. Please try again.');
|
||||
if (progressContainer) progressContainer.classList.add('hidden');
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = () => {
|
||||
console.error('Upload failed');
|
||||
alert('Failed to upload files. Please try again.');
|
||||
if (progressContainer) progressContainer.classList.add('hidden');
|
||||
};
|
||||
|
||||
// Get the auth token
|
||||
const token = this.pb.authStore.token;
|
||||
|
||||
// Send the request
|
||||
xhr.open('PATCH', url, true);
|
||||
xhr.setRequestHeader('Authorization', token);
|
||||
xhr.send(formData);
|
||||
} catch (err) {
|
||||
console.error('Failed to upload files:', err);
|
||||
alert('Failed to upload files. Please try again.');
|
||||
|
||||
// Hide progress bar on error
|
||||
const progressContainer = document.getElementById('uploadProgress');
|
||||
if (progressContainer) progressContainer.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Only sync attendees if user is an officer or administrator
|
||||
setTimeout(async () => {
|
||||
const user = this.pb.authStore.model;
|
||||
|
|
|
|||
|
|
@ -243,6 +243,17 @@ const { editor_title, form } = config.ui.tables.events;
|
|||
multiple
|
||||
accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png"
|
||||
/>
|
||||
<div id="uploadProgress" class="w-full mt-2 hidden">
|
||||
<div class="flex justify-between mb-1 text-xs opacity-70">
|
||||
<span>Uploading files...</span>
|
||||
<span id="uploadProgressText">0%</span>
|
||||
</div>
|
||||
<progress
|
||||
id="uploadProgressBar"
|
||||
class="progress progress-primary w-full"
|
||||
value="0"
|
||||
max="100"></progress>
|
||||
</div>
|
||||
<div id="currentFiles" class="mt-4 space-y-2"></div>
|
||||
<label class="label">
|
||||
<span class="label-text-alt opacity-70"
|
||||
|
|
|
|||
Loading…
Reference in a new issue