My livewire upload works fine locally, but doesn't work at all when deployed on shared hosting

I don't understand what could be affecting it, i've adjusted my php.ini and i created storage:link in my public_html

My view looks like

<head>
@livewireStyles()
<!-- alpineJs -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
@livewire('upload-freevideo')
@livewireScripts()
</body>

upload-freevideo.blade.php

<form wire:submit.prevent="submit" enctype="multipart/form-data">
  
    <div>
        @if(session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
    </div>
  
    <div class="form-group">
        <input type="text" class="form-control" placeholder="enter caption" wire:model="caption">
        @error('caption') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    <div x-data="{ isUploading: false, progress: 5 }"
        x-on:livewire-upload-start="isUploading = true"
        x-on:livewire-upload-finish="isUploading = false; progress = 5"
        x-on:livewire-upload-error="isUploading = false"
        x-on:livewire-upload-progress="progress = $event.detail.progress">
        
        <div class="form-group">
            <input type="file" class="form-control" wire:model="video" accept="video/mp4,video/x-m4v,video/*">
            @error('video') <span class="text-danger">{{ $message }}</span> @enderror

            <div x-show="isUploading" class="progress progress-sm mt-2 rounded">
                <div class="progress-bar progress-bar-striped" role="progressbar" x-bind:style="`width: ${progress}%`" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
    <label class="custom-file-label" for="customFile">
        @if ($video)
            {{ $video->getClientOriginalName() }}
        @endif
    </label>
    <br>
    @if($video)
        <button type="submit" class="btn btn-primary">Upload</button>
    @endif

</form>

My Http/Livewire

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use App\Videopost;

class UploadFreevideo extends Component
{
    use WithFileUploads;
    public $caption, $video;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function submit()
    {
        $dataValid = $this->validate([
            'caption' => 'required',
            'video' => 'required|mimetypes:video/x-ms-asf,video/x-flv,video/mp4,application/x-mpegURL,video/MP2T,video/3gpp,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/avi',
        ]);

        // Get filename with the extension
        $filenameWithExt = $dataValid['video']->getClientOriginalName();
        // Get just filename
        $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
        // Get just ext
        $extension = $dataValid['video']->getClientOriginalExtension();
        // Filename to store
        $fileNameToStore= $filename.'_'.time().'.'.$extension;
        // Upload Image
        $this->video->storeAs('public/video', $fileNameToStore);
        // save in DB
        $dataValid['video'] = $fileNameToStore;

        $dataValid['user_id'] = auth()->user()->id;
  
        Videopost::create($dataValid);
  
        session()->flash('message', 'File uploaded.');
    }
    
    public function render()
        {
            return view('livewire.upload-freevideo');
        }
}

config/filesystem.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application. Just store away!
    |
    */

    'default' => env('FILESYSTEM_DRIVER', 'public'),

    /*
    |--------------------------------------------------------------------------
    | Default Cloud Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Many applications store files both locally and in the cloud. For this
    | reason, you may specify a default "cloud" driver here. This driver
    | will be bound as the Cloud disk implementation in the container.
    |
    */

    'cloud' => env('FILESYSTEM_CLOUD', 's3'),

    /*
    |--------------------------------------------------------------------------
    | Filesystem Disks
    |--------------------------------------------------------------------------
    |
    | Here you may configure as many filesystem "disks" as you wish, and you
    | may even configure multiple disks of the same driver. Defaults have
    | been setup for each driver as an example of the required options.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
        ],

    ],

];

tomasosho

4 years ago

Best Answer

Level 4

i had to publish my assets then link it locally

php artisan vendor:publish --tag=livewire:assets

Please or to participate in this conversation.