In this episode, we dive into handling file uploads and edits on a form that's used to update existing records (in this case, products). Dealing with files can be a bit tricky because we need to show both files that already exist for the product and any new files the user wants to upload—plus give users the ability to remove either while editing.
First, you'll see how we re-use the file upload setup from the product creation form to allow new uploads when editing a product. We bring over the logic to manage that, including the ability to add or remove new files before submitting.
Next, we set up a system to manage existing files separately from new uploads. For existing files, we introduce a new property to keep track of them, and show how to display them properly—even though the data structures differ from new uploads. We also build a removal mechanism for existing files, which involves keeping a list of files marked for removal (but not actually deleting them until the form is saved).
A cool part shown here is how to use Livewire's accessors to filter out files that have been "removed" from the UI instantly, making it feel seamless for the user. All of the actual add and remove work happens in-memory until the user hits save, after which everything gets properly synchronized with the database.
By the end of this episode, we've got a form that lets users add, preview, and remove both new and existing files—setting us up perfectly for persisting those changes in the next step.