Archetypes · Inputs

FileUpload

File(s).

#Contract

File(s). This is the archetype's identity: a component that keeps it is a FileUpload on every target, however differently each one draws it. Its content category is a region, which decides where it may sit and what it may contain.

#Anatomy

The published parts, with the role each one carries. The role is what a target derives the element from; the file never names an element.

text
dropzone: container
  icon: icon
  label: text
input: input
list: container  (optional)
  item: item
    name: text
    remove: control

#Behaviours

Composed from the prelude's atoms. An optional one is marked.

#Realization

No target declares a divergent realization: every target draws the same anatomy with its own primitives.

What the React target does with it
The React generator realizes every archetype the prelude defines, and its output is typechecked against the real React types for each one on every change. Where a part or a constraint cannot be expressed, the generator reports it rather than approximating.

#Start from it

A component that starts from FileUpload, before the author touches it: the root and the published anatomy, each part with the kind its role gives it. Paste it into a file, or open it in the Playground, and add the contract, the tokens and the states.

milda
component FileUpload {
  archetype FileUpload

  part FileUpload: container {
  }

  part dropzone: container {
  }

  part dropzone.icon: icon {
  }

  part dropzone.label: text {
  }

  part input: input {
  }

  part list: container {
  }

  part list.item: item {
  }

  part list.item.name: text {
  }

  part list.item.remove: control {
  }
}

Every statement a part can carry is in the reference; the tour shows the arc from archetype to generated code.