Carga de archivos

Formularios

Permite abrir el explorador de archivos para cargar un fichero en el formulario.

File-upload

Mostrar parámetros

Parámetros Nunjucks del componente: "File-upload"

              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 #

Sube un archivo

Mostrar código

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:w-full lg:max-w-none"
}) }}

HTML

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-1">Sube un archivo</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-1" name="file-upload-1" type="file">
</div>
<!-- /file-upload -->

Con pista #

Sube una foto

Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.

Mostrar código

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": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

HTML

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-2">Sube una foto</label>
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-2-hint" class="block text-neutral-dark">Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.</p>
  <!-- /hint -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>
<!-- /file-upload -->

Con mensaje de error #

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Sube un archivo

Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.

Error:Esto es un mensaje de error

Mostrar código

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": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

HTML

<!-- file-upload -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="file-upload-3">Sube un archivo</label>
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-3-hint" class="block text-neutral-dark">Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="file-upload-3-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none c-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint" aria-errormessage="file-upload-3-error" aria-invalid="true">
</div>
<!-- /file-upload -->

Con atributos #

Sube una foto

Mostrar código

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:w-full lg:max-w-none"
}) }}

HTML

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-4">Sube una foto</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-4" name="file-upload-4" type="file" accept=".jpg, .jpeg, .png">
</div>
<!-- /file-upload -->

Con clases de form-group opcionales #

Sube un archivo

Mostrar código

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:w-full lg:max-w-none",
  "formGroup": {
    "classes": "p-base bg-warning-light"
  }
}) }}

HTML

<!-- file-upload -->
<div class="c-form-group p-base bg-warning-light">
  <!-- label -->
  <label class="block" for="file-upload-6">Sube un archivo</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-6" name="file-upload-6" type="file">
</div>
<!-- /file-upload -->

Componentes Índice de páginas

Carga de archivos

File-upload

Por defecto #

Descripción visual

Contenido

Nunjucks macro

HTML

Con pista #

Descripción visual

Contenido

Nunjucks macro

HTML

Con mensaje de error #

Descripción visual

Contenido

Nunjucks macro

HTML

Con atributos #

Descripción visual

Contenido

Nunjucks macro

HTML

Con clases de form-group opcionales #

Descripción visual

Contenido

Nunjucks macro

HTML