In this episode, we're setting up the import modal so users can bring in CSV records into our app. We start by creating a new Livewire component specifically for this import modal, similar to the export modal we already have. Instead of building everything from scratch, we use some pre-made markup (which you can grab from the GitHub repo) and paste it directly into our blade file for quick setup.
We go over the structure of the modal: there's a spot for selecting a CSV file and (later on) for showing how many records are in the file. We'll accept only CSV files — and while we're not focusing on validation or error messages just yet, that's coming soon (like if someone uploads a file that’s too big, for example). For the rest of this stage, the main goal is just to get the modal working!
Next, we make sure the modal can be triggered correctly from the transactions table. When users click the import button, our modal pops up. We wire it up so it knows which model to use for the import. We wrap up by setting a property in the modal to track what we're importing — just a string for now. By the end of this episode, the import modal is in place and ready for the next step.
Up next: handling the actual file upload and displaying how many rows are in the CSV file!