FileUpload

Livewire native file upload

Requirements

• This field requires you to configure Livewire file uploads according to the main documentation. Setup storage disk and default file validation. This component handles the rest.

• Read livewire docs about scheduling cleanup of the temporary storage folder

• Read livewire docs about saving the files

Add required traits to your component

use Tanthammar\TallForms\Traits\UploadsFiles;
use Livewire\WithFileUploads;

class someForm extends Component
{
    use WithFileUploads, UploadsFiles;
}

Add required properties

Livewire requires you to add the property for file-upload fields, to the form component

//properties used in this example
//Do NOT add type declaration = Livewire error...
public $image;
public $files;

Validation messages

Set default validation message in the config file

Livewire default validation rules are in its config file. This is fine until you want to use custom validation. The problem is that the file gets uploaded before your custom validation executes, and the file remains on the server. The FileUpload field has a workaround that deletes the temporary file if your custom validation fails. The user is presented with a general error that you define in the language files. This component tries to minimize unwanted files in the temp folder, by forcing the user to delete uploaded files before they can upload new ones.

//languange files
'file-upload' => [
    'upload-file-error' => '...',
]

Cleanup old uploads

• Not using s3: Livewire will handle the file cleanup automatically.

• Using s3: You must schedule the cleanup

php artisan livewire:configure-s3-upload-cleanup

Saving the files

You must save the files yourself !!!

• The data is accessed via the fields name property, like $this->fieldname.

• (Read Livewire docs about various ways to store uploaded files)

• (Read more about Lifecycle Hooks to understand saveFoo())

The FileUpload data is never available in the form_data property, you access it with $this->foo because Livewire requires you to define the property on the component.

Preview

Component

Single file upload example

public $image;

protected function fields()
{
    return [
        $this->fileUpload(),
    ];
}

protected function fileUpload()
{
    return optional($this->model)->exists //you probably do not want to attach files if the model does not exist
        ? FileUpload::make('Upload image', 'image')
            ->help('Max 1024kb, png, jpeg, gif or tiff') //important for usability to inform about type/size limitations
            ->rules('nullable|mimes:png,jpg,jpeg,gif,tiff|max:1024') //only if you want to override livewire main config validation
            ->accept("image/*") //html5 file input accept attribute
        : null;
}

// saving single file upload example
protected function saveImage($validated_file)
{

    $path = filled($validated_file) ? $this->image->store('photos') : null;
    //do something with the model?
    if (optional($this->model)->exists && filled($path)) {
        $this->model->single_image_url = $path;
        $this->model->save();
    }
}

Multiple file uploads example

public $files;

protected function fields()
{
    return [
        $this->fileUploads()
    ];
}


protected function fileUploads()
{
    return optional($this->model)->exists //you probably do not want to attach files if the model does not exist
        ? FileUpload::make('Upload files', 'files')
            ->multiple() //remove if you want single file upload
            ->help('Max 1024kb, pdf, png, jpeg, gif or tiff') //important for usability to inform about type/size limitations
            ->rules('nullable|mimes:pdf,png,jpg,jpeg,gif,tiff|max:1024') //only if you want to override livewire main config validation
            ->accept("image/*,.pdf") //html5 file input accept attribute
        : null;
}


//saving multiple file uploads example
protected function saveFiles($validated_files)
{
    $paths = [];
    if (filled($validated_files)) {
        foreach ($this->files as $file) {
            if (filled($file)) array_push($paths, $file->store('files'));
        }
    }
    //do something with the model?
    if (optional($this->model)->exists && filled($paths)) {
        //the field must be cast to array and stored in a json or text column
        $this->model->multiple_image_urls = $paths;
        $this->model->save();
    }
}

Headless

• This field requires Livewire.

• See the "Component" tab, on how to setup your Livewire component to interact with this code example.

• Apart from the earlier mentioned traits, you must use the HandlesArrays trait if you are not extending the TallForms component.

Livewire component example

use Livewire\Component;
use Livewire\WithFileUploads;
use Tanthammar\TallForms\Traits\HandlesArrays;
use Tanthammar\TallForms\Traits\UploadsFiles;

class Foo extends Component
{
    use WithFileUploads, UploadsFiles, HandlesArrays;

    public $images;
}

//saving multiple image uploads example
public function saveImages($validated_files)
{
    $paths = [];
    if (filled($validated_files)) {
        foreach ($this->files as $file) {
            if (filled($file)) array_push($paths, $file->store('files'));
        }
    }
    //attach to a model?
}

Blade file

<x-tall-file-upload :field="FileUpload::blade('images')
    ->multiple()
    ->help('Max 1024kb, pdf, png, jpeg, gif or tiff')
    ->rules('nullable|mimes:pdf,png,jpg,jpeg,gif,tiff|max:1024')
    ->accept('image/*,.pdf')"
    :field-value="$images"
    {{-- these props updates in UploadsFiles trait if there are multiple file upload fields on the page --}}
    :show-file-upload-error="$showFileUploadError"
    :show-file-upload-error-for="$showFileUploadErrorFor"
/>

Styles

The classes are applied differently on this field.

Attribute	Comment
wrapperClass	Applied to the blade component root div
class	Applied to the div that wraps the input
errorClass	Applied t the div that wraps the input @error
inputClass	Applied to the input

Search for File upload in tall-theme.css