View on GitLab

File Inputs

x-larastrap::file is a Input component with a few peculiar behaviors.

The most important: when included into a Form, it automatically enforces the enctype="multipart/form-data" attribute to the parent Form itself. 

<x-larastrap::form>
    <x-larastrap::file label="A File" />
</x-larastrap::form>

<form id="form-e4da3b7fbbce2345d7772b0674a318d5" class="" method="post" enctype="multipart/form-data" name="form-e4da3b7fbbce2345d7772b0674a318d5">
  <input type="hidden" name="_token" value="Gtcf5TkEuZJtgE3aLaq6ubFrSbc0911217Txpew9" autocomplete="off">
  <div class="row mb-3">
    <label for="input-c843c631f65a3369ef13485e900a7f5f" class="col-4 col-form-label">A File</label>
    <div class="col-8">
      <input id="input-c843c631f65a3369ef13485e900a7f5f" type="file" class="form-control" name="2PUiw4j1Ap" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-731c92ed1ac0db62a0b798591b5152d6" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

multiple

The multiple parameter enforces the multiple HTML attribute to the node, and - if required - handles the node's name as an array to actually permit multiple values. 

<x-larastrap::file label="Many Files" name="files" multiple />

<div class="row mb-3">
  <label for="input-9c33aa084798a5352ddb5e2c424b156d" class="col-4 col-form-label">Many Files</label>
  <div class="col-8">
    <input id="input-9c33aa084798a5352ddb5e2c424b156d" type="file" class="form-control" name="files[]" value="" multiple>
  </div>
</div>