File-upload

Mostrar parámetros

Parámetros del componente

              params:
- name: name
  type: string
  required: true
  description: The name of the input, which is submitted with the form data.
- name: id
  type: string
  required: true
  description: The id of the input
- name: value
  type: string
  required: false
  description: Optional initial value of the input
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: classes
  type: string
  required: false
  description: Classes to add to the file upload component.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the file upload component.
              
            

Por defecto

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Con pista

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-2",
  "name": "file-upload-2",
  "label": {
    "text": "Sube una foto"
  },
  "hint": {
    "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Con mensaje de error

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

Error:Error: esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-3",
  "name": "file-upload-3",
  "label": {
    "text": "Sube un archivo"
  },
  "hint": {
    "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  },
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Con atributos

Mostrar códigodel ejemplo: Con atributos

Contenido

Nunjucks macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-4",
  "name": "file-upload-4",
  "label": {
    "text": "Sube una foto"
  },
  "attributes": {
    "accept": ".jpg, .jpeg, .png"
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Con label como encabezado

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-5",
  "name": "file-upload-5",
  "label": {
    "text": "Sube un archivo",
    "isPageHeading": true
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Con clases de form-group opcionales

Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-6",
  "name": "file-upload-6",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none",
  "formGroup": {
    "classes": "p-base bg-warning-light"
  }
}) }}