Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image uploads?? #106

Closed
pastorryanhayden opened this issue Aug 1, 2019 · 2 comments
Closed

Image uploads?? #106

pastorryanhayden opened this issue Aug 1, 2019 · 2 comments

Comments

@pastorryanhayden
Copy link

@pastorryanhayden pastorryanhayden commented Aug 1, 2019

Is your feature request related to a problem? Please describe.
How would you handle an image upload in a livewire component?

In this page (see below), I'm redering the title and the content (with markdown redering). But how do I do the photo?

Describe the solution you'd like
A wire:model="photo" on an input type="file" would be ideal, but just any documented solution would work.

Describe alternatives you've considered
I've considered using javascript and axios for this, but I don't know how to pass the image URL back to the component.

Additional context
Screen Shot 2019-08-01 at 9 50 14 AM

@pastorryanhayden

This comment has been minimized.

Copy link
Author

@pastorryanhayden pastorryanhayden commented Aug 1, 2019

Here is what I'm doing currently as a workaround:

In my app.js I'm catching the file input and sending it to a conroller via axios then catching the response and sending it via a livewire event to my livewire controller. Seems to be working.:

App.js

var photoInput = document.getElementById('photoInput');
photoInput.addEventListener('input', () => {
    var file = photoInput.files[0];
let formData = new FormData();
    formData.append('file', file);
    axios.post('/api/uploadPhoto',
        formData,
        {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }
    ).then(response => {
        url = response.data.url;
        livewire.emit('updatePhoto', url);
    })
    
});

Photouploadcontroller.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class PhotoUploadController extends Controller
{
    public function store(Request $request)
    {
        $file = $request->file;
        $photo = $file->store('postcard-photos', 's3', 'public');
        Storage::setVisibility($photo, 'public');
        $url = Storage::url($photo);
        return response()->json([
            'url' => $url
        ]);
    }
}

In Postcard.php (livewire component)

 protected $listeners = ['updatePhoto' => 'handle'];

    public function handle($url)
    {
        $this->image = $url;
    }
@calebporzio

This comment has been minimized.

Copy link
Collaborator

@calebporzio calebporzio commented Aug 6, 2019

Hey @pastorryanhayden, yeah, this is a problem I would love a good solution for (out of the box with Livewire).

For the reasons you've mentioned, it's not a simple solution, but I would do basically what you've outlined above (thanks for providing the code BTW!).

For now, I'm going to close this, but I'd love to hear other ideas on how to accomplish this. So re-open it if anyone has ideas.

@calebporzio calebporzio closed this Aug 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.