Upload Excel file in Livewire

I'm trying to upload an excel file using Livewire but seems that it doesn't accept xlxs files. If i select a txt or csv file it does upload. Here is my component:

<?php

namespace App\Http\Livewire\Main;

use Livewire\Component;
use Livewire\WithFileUploads;

class MainPage extends Component
{
    use WithFileUploads;

    public $preRoute;
    public $route;

    public function render()
    {
        return view('livewire.main.main-page');
    }

    public function uploadFiles()
    {
        dd($this);
        if (!$this->preRoute) {
            $this->preRoute->store('SciLog','PreRoute');
        }
        $this->route->store('SciLog', 'Route');
    }
}

and her is the html with the input tags:

       <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg p-4 mt-4 bg-white">
            <div class="md:flex md:items-center mb-6">
                <div class="md:w-1/3">
                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="preRoute">
                        Select Pre-Route File
                    </label>
                </div>
                <div class="md:w-2/3">
                    <input wire:model='preRoute'
                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                        id="preRoute" type="file">
                </div>
            </div>
            <div class="md:flex md:items-center mb-6">
                <div class="md:w-1/3">
                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="route">
                        Select Route File
                    </label>
                </div>
                <div class="md:w-2/3">
                    <input wire:model='route'
                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                        id="route" type="file">
                </div>
            </div>
            <div class="flex justify-end">
                <button wire:click='uploadFiles' class="btn btn-notice">Upload Files</button>
            </div>
        </div>

Thanks for the help,

neilstee

5 years ago

Best Answer

Level 34

@dan3460 can you check your global validation configuration?

In your config/livewire.php:

return [
    ...
    'temporary_file_upload' => [
        ...
        'rules' => 'file|mimes:png,jpg,pdf|max:102400', // (100MB max, and only pngs, jpegs, and pdfs.)
        ...
    ],
];

https://laravel-livewire.com/docs/2.x/file-uploads#global-validation

neilstee

5 years ago

Level 34

@dan3460 and this might be a silly question, but does your <form> contain enctype="multipart/form-data"?

dan3460

5 years ago

Level 8

Never a silly question, i'm not using a . Do you think i need a form to upload to livewire?

You may be into something here, this is my livewire config:


    'temporary_file_upload' => [
        'disk' => null,        // Example: 'local', 's3'              Default: 'default'
        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  Default: ['required', 'file', 'max:12288'] (12MB)
        'directory' => null,   // Example: 'tmp'                      Default  'livewire-tmp'
        'middleware' => null,  // Example: 'throttle:5,1'             Default: 'throttle:60,1'
        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs.
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
        ],
        'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
    ],

I have forgotten to publish the config file.

dan3460

5 years ago

Level 8

I added 'xlsx' to the list of 'preview_mimes' and now works. Thanks.

ktan

2 years ago

Level 1

Another approach one can take when importing excel files, is to import the "data itself" rather than the file.

Here's a guide on how to pass data from spreadsheet files in the client to the server: https://fly.io/laravel-bytes/batch-read-excel-livewire/

Please or to participate in this conversation.