File Upload

Demo

Pick anything less than 1 MiB

Explanation #

In this example we show how to create a file upload form that will be submitted via fetch.

 1<label>
 2    <p>Pick anything less than 1MB</p>
 3    <input type="file" data-bind:files multiple/>
 4</label>
 5<button
 6    class="warning"
 7    data-on:click="$files.length && @post('/examples/file_upload')"
 8    data-attr:aria-disabled="`${!$files.length}`"
 9>
10    Submit
11</button>

We don’t need a form because everything is encoded as signals and automatically sent to the server. We POST the form to /examples/file_upload, since the input is using data-bind the file’s contents will be automatically encoded as base64.

Note #

If you try to upload a file that is too large you will get an error message in the console.