joelwmale livewire-quill image upload

To change the image upload path in joelwmale/livewire-quill so that images are uploaded to the public folder and displayed correctly in the Quill editor, you need to do two things:

1. Change the upload path so images are stored in public/ (which you’ve already done).
2. Customize the returned image URL so the editor uses /public/your-image.jpg instead of /storage/your-image.jpg.

By default, the package uses Laravel's Storage::url() which points to /storage/.... To customize this, you need to override the image upload handler in your Livewire component.

Here’s how you can do it:

1. Publish the config (if needed)

If you haven’t already, publish the config to customize the upload behavior:

php artisan vendor:publish --provider="Joelwmale\LivewireQuill\LivewireQuillServiceProvider"

2. Override the image upload logic in your Livewire component

In your Livewire component, handle the image upload yourself and return the correct public URL:

use Livewire\Component;
use Livewire\WithFileUploads;

class YourComponent extends Component
{
    use WithFileUploads;

    public $content;

    public function uploadQuillImage($image)
    {
        // Store the image in the public folder
        $imageName = uniqid().'.'.$image->getClientOriginalExtension();
        $image->move(public_path('uploads'), $imageName);

        // Return the public URL for the image
        return response()->json([
            'url' => asset('uploads/' . $imageName),
        ]);
    }

    public function render()
    {
        return view('livewire.your-component');
    }
}

3. Point the Quill editor to use your custom upload endpoint

In your Blade view where you use <livewire:quill ...>, specify the image-upload endpoint:

<livewire:quill
    name="content"
    image-upload="/your-component/upload-quill-image"
/>

Note: Adjust the route and method names as needed. Make sure your route is set up in web.php:

Route::post('/your-component/upload-quill-image', [YourComponent::class, 'uploadQuillImage']);

---

Summary:

• Upload images to public/uploads.
• Return the image URL using asset('uploads/filename.jpg').
• Configure Quill to use your custom upload endpoint.

This way, images will be stored and displayed from /public/uploads/ instead of /storage/.

Let me know if you need further clarification!