Some Backend Work

Previously I’d written a little experiment to get drag and drop working for list items in and unordered list. In truth, the UI I have needs some work. Well, currently it’s not a very good UI and it doesn’t upload any images and it doesn’t write what it needs to to the database. I can’t remember how to upload files from the frontend but let’s look at the UI I have.

Obviously it’s not finished, the text is wrong but the modal you see there is what I’m working with. There’s an add new button and if I click it:

We get an image that is just a placeholder because just having an image that goes nowhere is ugly and a file input. I can do that again and you’ll see there are two:

My thinking is to allow the user to grab however many images they like and then when they hit the save button my code will grab each file from each input and send it to the server. I don’t know how to send it to the server but I’ll give it a go. Once the file is sent to the server, it will need to return a path that is accessible to my app and nobody else as well as, probably the rest of the data. There will be a position and a location ID as well since it will need to know which location it’s associated with. They are associated with. So every entry will have a position and a location ID. The first challenge, though, is to upload these things.

Also whilst the UI is on the screen I thought it would be nice to hide the file inputs and just click on the image to upload a new one. This is the screen where I want the drag and drop to work too. Clearly it needs more styling but I just want to get it working before making it beautiful. You’ll also need to be able to delete an image as well, but maybe that can be put onto an overlay that appears when you hover. Or before. So what am I doing?

Up in the ProjectsTable component there’s a function that fires when you hit the save button on that modal and this is how it looks so far:

So we have a FormData object. The files are being appended. What do I need to be able to save a project on the backend? I’m going to need a project ID, the files, and the files positions. Then on the backend I can insert everything. So I feel like we need to append more than just the files. Still, I don’t have a position field yet and if I ignore any association with the project and don’t insert anything into the table, let’s see if we can upload these things.

Okay, let’s create an LocationImageViewController. I’m still going to need somewhere to process the request.

Okay this is what I’ve got on the Sanctum side:

I want to be sending more than one, but assuming I’ve put the name of the file in the right places — I don’t really know what I’m doing and I’m too tired to look it up — then hopefully this will store a single file. Granted it’s going to the public directory in storage which isn’t what I want but if it uploads, I call that progress. Actually, it would make more sense to send the files up as an array because then I could loop over them no matter how many of them there were, but let’s try this. I’ll need a route for this:

So now we have a route, a controller holding an endpoint, what could go wrong? The get method is not supported. Well at least I know it’s hitting it.

With that fixed it’s giving me a 419 which means page expired. Why?

Needed a token. I think they’re unnecessary for get requests for some reason so I’d never noticed the need. Now I’m hitting the route and spitting out some response. This was before the storing that I returned soooo…drum roll…does it get past validation. No. But I’m not sure what I’m doing wrong and it’s not giving me anything meaningful.

Phew. After fiddling for quite some time I fixed it. I am a blasted idiot and the front end was specifying a JSON type for the request. After taking that out it worked like a dream. Okay…back to my Putin documentary.