Uploading files with progress tracking
File uploads use FormData with multipart/form-data encoding.
You can upload single files, multiple files, or files with additional form fields.
For progress tracking, you need to use XMLHttpRequest since
the Fetch API doesn't support upload progress (only download).
// Single file upload
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
formData.append('description', 'My uploaded file');
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
// Don't set Content-Type - browser adds boundary
});
const result = await response.json();
console.log('Upload complete:', result);
// Multiple files
const files = fileInput.files; // FileList
const formData = new FormData();
for (const file of files) {
formData.append('files', file); // Same key for multiple
}function uploadWithProgress(file, url, onProgress) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', file);
// Track upload progress
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
onProgress(percent);
}
});
// Handle completion
xhr.addEventListener('load', () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(new Error(`HTTP ${xhr.status}`));
}
});
// Handle errors
xhr.addEventListener('error', () => {
reject(new Error('Network error'));
});
xhr.addEventListener('abort', () => {
reject(new Error('Upload cancelled'));
});
xhr.open('POST', url);
xhr.send(formData);
});
}
// Usage
try {
const result = await uploadWithProgress(
file,
'/api/upload',
(percent) => {
progressBar.style.width = `${percent}%`;
}
);
console.log('Uploaded:', result);
} catch (error) {
console.error('Upload failed:', error);
}function validateFile(file, options = {}) {
const {
maxSize = 5 * 1024 * 1024, // 5MB default
allowedTypes = [],
allowedExtensions = []
} = options;
const errors = [];
// Check file size
if (file.size > maxSize) {
const maxMB = (maxSize / 1024 / 1024).toFixed(1);
errors.push(`File too large. Max size: ${maxMB}MB`);
}
// Check MIME type
if (allowedTypes.length && !allowedTypes.includes(file.type)) {
errors.push(`Invalid file type: ${file.type}`);
}
// Check extension
if (allowedExtensions.length) {
const ext = file.name.split('.').pop().toLowerCase();
if (!allowedExtensions.includes(ext)) {
errors.push(`Invalid extension: .${ext}`);
}
}
return { valid: errors.length === 0, errors };
}
// Usage
const validation = validateFile(file, {
maxSize: 10 * 1024 * 1024, // 10MB
allowedTypes: ['image/jpeg', 'image/png', 'image/gif'],
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif']
});
if (!validation.valid) {
alert(validation.errors.join('\n'));
return;
}