Sample AJAX file upload via October CMS

ajax-file-upload.htm

title = "AJAX File Upload"
url = "/test"
layout = "default"
is_hidden = 0
==
<?php
use System\Models\File;

function onSubmit()
{
    $validator = Validator::make(
        $form = Input::all(), [
            'image' => 'required|image',
            'size' => 'required|integer|min:0|max:500',
        ]
    );

    if ($validator->fails()) {
        throw new ValidationException($validator);
    }

    $file = (new File())->fromPost($form['image']);

    return [
        '#result' => '<img src="'.$file->getThumb($form['size'], $form['size']).'" />'
    ];
}
?>
==
<div class="container">
    <h2>Image Resize</h2>
    <form data-request="onSubmit" data-request-files data-request-flash>
        <div class="form-group">
            <label>Image</label>
            <input type="file" name="image" accept="image/*">
        </div>
        <div class="form-group">
            <label>Size</label>
            <input type="integer" name="size" class="form-control" value="200">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

    <h2>Result</h2>
    <div id="result">No image uploaded</div>
</div>

I try this sample, but not work.
It seems like the file not post ?

I need to do the file upload with JavaScript API of OctoberCMS , instead of using a <form> tag and I keep getting a javascript error (undefined FormData)

Could you please give me an example of multi-files management which users can manage their files at the Frontend ? (Add/Edit/Delete)