Image

@wq/material’s <Image/> input component provides an interface for selecting and uploading individual image/* files.

Depending on your use case, you may be interested in the following components:

File allows submission of any file type.

FileArray supports uploading multiple files or images with a compact UI.

Demo

const config = {
    "pages": {
        "survey": {
            "form": [
                {
                    "name": "name",
                    "label": "Image field",
                    "hint": "Select an image.",
                    "type": "image",
                    "bind": {
                        "required": true
                    }
                },
            ],
            "name": "survey",
            "url": "surveys",
            "list": true,
            "verbose_name": "survey",
            "verbose_name_plural": "surveys"
        }
    }
};

import wq from './wq.js';
wq.init(config).then(...);
// navigate to /surveys/new

XLSForm Definition

type	name	label	hint	required	constraint
image	[name]	Image field	Select an image.	yes

Django Definition

class MyModel(models.Model):
    [name] = models.ImageField(
        upload_to="[folder name]",
        verbose_name="Image field",
        help_text="Select an image.",
    )

Source

While @wq/react defines a placeholder implementation, @wq/material’s versions are more useful as reference: