In this episode, we focus on connecting our custom file upload solution back into our Livewire component, making the uploaded file accessible from within Livewire. We start by looking at how the server is returning file information to the client, and why it's important to avoid sending the full internal file path directly—something we'll tidy up later.
Next, we wire up the front end to call a new handleSuccess
method on our Livewire component when an upload is finished, passing over the original file name and its path. We walk through setting up this method, and test it with a simple dd
to confirm the data is coming through as expected.
To make our uploader components more flexible and reusable, we introduce a base upload component. We then create a more specific upload component (like you might want for different upload types) that extends the base. This way, each specialized uploader can handle the finished upload differently, receiving an UploadedFile
object for easy saving.
To keep things tidy and remind ourselves (or others) to implement the necessary onSuccess
method in child components, we add a quick check in the mount
method that throws a reminder exception if it's missing.
By the end of the episode, our file uploader is nicely tied into Livewire and ready for you to handle file saves however you like, using an interface that's familiar and powerful.