File input

  • id:

Single

  • Nahrát soubor 
  •         {% include "@Components/fields/file-field/file-field.twig" with {props: {
  label: "Nahrát soubor",
  icon: {
    src: "@Images/svg/file.svg"
  },
  full_name: "file",
}} %}

      
  •             <div class="f-file d-flex flex-column gap-2 u-posr">

  <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary    --icon-before    --full-width w-100  f-file__button">
      <span class="btn__title u-z-index-1">
      Nahrát soubor
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M14.414 0H5c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 2 3v21h20V7.586L14.414 0ZM15 3.414 18.586 7H15V3.414ZM4 22V3a.997.997 0 0 1 1-1h8v7h7v13H4Z"/></svg>      </span>
    </span>
  
  </span>

  <div class="f-file__files d-flex gap-1 flex-wrap"></div>

  <input class="f-file__input" type="file" name=file>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</div>

Multiple

  • Nahrát soubory 
  •         {% include "@Components/fields/file-field/file-field.twig" with {props: {
  label: "Nahrát soubory",
  icon: {
    src: "@Images/svg/file.svg"
  },
  full_name: "files[]",
  multiple: true,
}} %}

      
  •               <div class="f-file d-flex flex-column gap-2 u-posr">

  <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary    --icon-before    --full-width w-100  f-file__button">
      <span class="btn__title u-z-index-1">
      Nahrát soubory
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M14.414 0H5c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 2 3v21h20V7.586L14.414 0ZM15 3.414 18.586 7H15V3.414ZM4 22V3a.997.997 0 0 1 1-1h8v7h7v13H4Z"/></svg>      </span>
    </span>
  
  </span>

  <div class="f-file__files d-flex gap-1 flex-wrap"></div>

  <input class="f-file__input" type="file" name=files[] multiple>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</div>