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>