Form Upload

<x-upload />

Files can be uploaded through selection or drag-and-drop. Also, when sending a png, jpg, jpeg or gif file , a preview is offered when clicking on the file image. To disable the preview, simply pass the :preview="false" parameter to the component. All files uploaded as part of tests on this page are deleted each hour.

A validation error on the bound property paints the input and the label red, hides the hint and shows the rule message below the input, the same way the input component does.

When multiple , the errors of each file land on keys like photos.0 and photos.1 . They are listed next to each file inside the floating, and since the floating is usually closed after the files are selected, a generic message is shown below the input to warn about them. An error on the property itself, such as a max rule on the array, behaves like the single mode and takes the place of the generic message, so only one message is shown below the input at a time.

<x-upload multiple without-summary />

The generic message is dropped in every scenario, leaving only the messages next to each file inside the floating. An error on the property itself is still shown below the input.

<x-upload invalidate />

Every validation feedback is hidden: the red state, the message below the input, the generic message of the multiple mode and the messages next to each file. Without the attribute, the invalidate_global key of the configuration file decides.

<!-- The Livewire component should have the "deleteUpload" method -->
 
<x-upload delete />
 
<!-- Or you can specify a different method name -->
 
<x-upload delete delete-method="deleting" />

You can use this algorithm to be the base of the method of deleting temporary files.

use Illuminate\Support\Arr;
use Illuminate\Http\UploadedFile;
 
public function deleteUpload(array $content): void
{
    /*
     the $content contains:
     [
         'temporary_name',
         'real_name',
         'extension',
         'size',
         'path',
         'url',
     ]
     */
 
    if (! $this->photo) {
        return;
    }
 
    $files = Arr::wrap($this->photo);
 
    /** @var UploadedFile $file */
    $file = collect($files)->filter(fn (UploadedFile $item) => $item->getFilename() === $content['temporary_name'])->first();
 
    // 1. Here we delete the file. Even if we have a error here, we simply
    // ignore it because as long as the file is not persisted, it is
    // temporary and will be deleted at some point if there is a failure here.
    rescue(fn () => $file->delete(), report: false);
 
    $collect = collect($files)->filter(fn (UploadedFile $item) => $item->getFilename() !== $content['temporary_name']);
 
    // 2. We guarantee restore of remaining files regardless of upload
    // type, whether you are dealing with multiple or single uploads
    $this->photo = is_array($this->photo) ? $collect->toArray() : $collect->first();
}

<!-- The Livewire property must be an array -->
 
<x-upload multiple />

If you have ever uploaded multiple files, you may have already encountered this issue: after selecting some files, if new files are selected they replace the selected ones with the new selected files, instead of merging them. To solve this problem and allow your user to select multiple files, in batches, you can use an algorithm like this:

use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Http\UploadedFile;
 
class MyComponent extends Component
{
    use WithFileUploads;
 
    // For multiple files the property must be an array 
    public $photos = [];
 
    // 1. We create a property that will temporarily store the uploaded files
    public $backup = [];
 
    public function updatingPhotos(): void
    {
        // 2. We store the uploaded files in the temporary property
        $this->backup = $this->photos;
    }
 
    public function updatedPhotos(): void
    {
        if (!$this->photos) {
            return;
        }
 
        // 3. We merge the newly uploaded files with the saved ones
        $file = Arr::flatten(array_merge($this->backup, [$this->photos]));
 
        // 4. We finishing by removing the duplicates
        $this->photos = collect($file)->unique(fn (UploadedFile $item) => $item->getClientOriginalName())->toArray();
    }
 
    // ...
}

The only thing to pay attention to with this approach is that real-time validations may not work correctly to display validation errors linked to the correct files , so if you want to use this strategy we suggest that you use a single validation with properties bind with wire:model . Also, remember to update the methods with the name of the property you are using to upload files, following Livewire lifecycle hooks convention:

// Supposing you want to use $files instead of $photos:
 
public $photos = []; 
public $files = []; 
 
public function updatingPhotos(): void {} 
public function updatingFiles(): void {} 
 
public function updatedPhotos(): void {} 
public function updatedFiles(): void {} 

<x-upload>
    <x-slot:footer>
        <x-button class="w-full">
            Save
        </x-button>
    </x-slot:footer>
</x-upload>

Use the when-uploaded parameter directly in the slot to only render the slot as a file has been uploaded:

<x-upload>
    <x-slot:footer when-uploaded> 
        <x-button class="w-full" wire:click="store">
            Save
        </x-button>
    </x-slot:footer>
</x-upload>

You can perform validations on selected files before they are actually uploaded to the server.

<script>
    window.TallStackUi = window.TallStackUi || {};
 
    window.TallStackUi.upload = function (files) {
        return false;
    };
</script>

In this case, files will be an array of the files. You should return false to prevent the upload.

<x-upload label="Banner" accept="image/*" direct />
 
<x-upload label="Photos" multiple direct />

Clicking the input, or its icon, opens the file picker of the operating system, and the chosen files are uploaded right away. While uploading, a spinning icon takes the place of the upload icon, and a failed upload shows the error message below the input.

Validation errors follow the rules of the Validation Error section, but in multiple mode the messages of each file have nowhere to be rendered, so only the generic message is shown for them. Combined with without-summary , an error that only touches a file is not shown at all.

• Use the Livewire component mount method to prepare and store the files in a property:

  use Livewire\Component;
  use Illuminate\Support\Facades\File;
  use Illuminate\Support\Facades\Storage;
  use Symfony\Component\Finder\SplFileInfo;
   
  class MyComponent extends Component
  {
      // For static usage the property must be an array 
      public $photos = [];
   
      public function mount(): void
      {
          // We get all files and map the contents of the files
          // to ensure a necessary structure for the component.
          $this->photos = collect(File::allFiles(public_path('storage/images')))->map(fn (SplFileInfo $file) => [
              'name' => $file->getFilename(),
              'extension' => $file->getExtension(),
              'size' => $file->getSize(),
              'path' => $file->getPath(),
              'url' => Storage::url('images/'.$file->getFilename()),
          ])->toArray();
   
          // In this example we are using the images that exists
          // in the application server, but you can use any other
          // files for example, files that are stored in the S3 bucket.
      }
   
      // ...
  }

• Prepare the Blade file of the component:

  <!-- All other options is available when static:
      label, hint, tip,
      footer slot,
      events (only remove event)
      renaming delete method -->
   
  <!-- WITHOUT delete action -->
  <x-upload wire:model="photos" static />
   
  <!-- WITH delete action -->
  <x-upload wire:model="photos" static delete />
   
  <!-- You can set a custom placeholder for the input -->
  <x-upload wire:model="photos"
           :placeholder="count($photos) . ' images'" <!-- [tl! highlight] -->
           static
           delete />

• If you intend to offer the option to delete files, then the approach to deleting files will be a little different from the used when file is uploading, for example:
  use Illuminate\Support\Arr;
  use Illuminate\Support\Facades\File;
   
  public function deleteUpload(array $content): void
  {
      /*
       the $content contains:
       [
           'temporary_name',
           'real_name', // same of 'temporary_name' in static mode
           'extension',
           'size',
           'path',
           'url',
       ]
       */
   
      if (empty($this->photos)) {
          return;
      }
   
      File::delete($content['path']);
   
      $files = Arr::wrap($this->photos);
   
      $this->photos = collect($files)
          ->filter(fn (array $item) => $item['name'] !== $content['real_name'])
          ->toArray();
  }