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,
@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
@dan3460 and this might be a silly question, but does your <form> contain enctype="multipart/form-data"?
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.
I added 'xlsx' to the list of 'preview_mimes' and now works. Thanks.
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.