How can I validate file uploads in Vue.js using Axios?

How can I validate file uploads in Vue.js using Axios?

You can validate file uploads in Vue.js by checking the file type and size before sending it with Axios. Would you like a code example?

Yes, please provide a code example for validating a file.

Sure! You can use the following code snippet to validate the file type and size:

const validateFile = (file) => {
    const validTypes = ['image/jpeg', 'image/png'];
    const maxSize = 2 * 1024 * 1024; // 2MB
    if (!validTypes.includes(file.type)) {
        return 'Invalid file type!';
    }
    if (file.size > maxSize) {
        return 'File size exceeds 2MB!';
    }
    return 'File is valid!';
};

You can call this function before making the Axios request.

How do I integrate this validation with an Axios request?

You can integrate the validation like this:

const handleFileUpload = (file) => {
    const validationMessage = validateFile(file);
    if (validationMessage !== 'File is valid!') {
        alert(validationMessage);
        return;
    }
    const formData = new FormData();
    formData.append('file', file);
    axios.post('/upload', formData)
        .then(response => console.log('File uploaded successfully!'))
        .catch(error => console.error('Error uploading file:', error));
};

This way, you ensure the file is validated before uploading.