File validation on the browser ✨

Validating client-side files in a browser has always been a tedious, repetitive and boring task, at least until now.

Zeppol has arrived, a library that allows you to validate different types of files, from the most basic to the most complete. Here are some examples.

import { type ZRules, type Validator, checkFileValidity} from 'zeppol'

// Add ZRules if you want autocompletion and type checking
const rules: ZRules<Validator> = {
    audio: {
        $params: {
            minSize: {
                value: 0,
            },
            maxSize: 1000000,
            minDuration: 10,
            maxDuration: {
                value: 60,
                // Custom error message
                message: 'The file must be shorter than 60 seconds'
            },
            mime: ['audio/mpeg', 'wav']
        },
        // Custom validators
        $validators: {
            name(file) {
                return {
                    valid: file.name.length > 10,
                    message: `File name must be longer than 10 characters`
                }
            }
        }
    }
}

const audioFile = document.getElementById('audio-file')

audioFile.addEventListener('input', async ({ target }) => {
    const file = target.files[0]
    await checkFileValidity(file, rules)  // This will throw an error if the file is not valid
})

The above example defines the following rules for the file:

• The file must be an audio file
• The file must have a size between 0 and 1000000 bytes
• The file must have a duration between 10 and 60 seconds
• The file must be of type audio/mpeg or audio/wav
• The file name must be longer than 10 characters

https://www.npmjs.com/package/zeppol