Upload de arquivo Em desenvolvimento

Existem 2 formas para permitir envio de arquivo através do sistema. Entenda as diferenças de cada um e escolha o que mais se adequa a necessidade do contexto em que estará inserido.

Tipos de upload

Envio simples

Modelo mais utilizado em formulários com mais entrada de dados.

<div class="field">
  <div class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      lista-de-contatos.csv
    </span>
  </label>
</div>
</div>

Área de drag and drop

<div class="placeholder is-drop-zone">
  <label>
    <input class="file-input" type="file" name="resume">
    <div class="file-cta is-flex flex-column">
      <span class="icon is-medium">
        <i class="fas fa-cloud-upload-alt"></i>
      </span>
      <span class="file-dropdown-text">
        Arraste seus arquivos aqui ou clique para enviá-los
      </span>
    </div>
  </label>
</div>