ipl-upload

View Source

<div>Uploaded file: {{ file?.name }}</div>
<ipl-upload
    v-model="file"
    placeholder="Click to upload a file..."
/>

Note on drag-and-drop functionality

For dragging and dropping to upload a file to work, the default behavior for the drop and dragover events must be disabled. To do this, include a script like this in your page:

window.addEventListener('drop', e => {
    e.preventDefault();
});
window.addEventListener('dragover', e => {
    e.preventDefault();
});

Using the uploaded file

The following is an abridged version of a function used in the ipl-overlay-controls project (Source)

// 'file' is the object obtained through the uploader's v-model property.
async function sendFile(file: File): Promise<void> {
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch('/upload-file', { method: 'POST', body: formData });
    // [...]
}