Image gallery with create and edit support

I'm planning on creating an image gallery with Laravel and Vue. This thread is not actually me asking for code but looking for the best approach so I can write the code.

Here is what I want to do (for create):

The user will click to select an image or drag and drop:

Then the cropping will appear:

When the user crops the image will appear on the gallery:

Behind the scenes what is happening is that the cropped image is actually a base64 image representation inside an array in vue, with all the images in an array I can send to the backend using axios.

This process works without a problem, the question here is: what would be the best approach for updating a gallery.

For updating I thought: maybe I can load the update view and pass all the images on the database to the array of the vue component as props, the problem is:

1 - what if the user deletes an image from the array? how am I going to remove that on the backend as well? 2 - what if the user selects another image? he will have to crop and instead of the url of the image it will have a mix between base64 (the nearly cropped image) and the image url (the already uploaded before when creating). so on the backend I will have to know what is to update and what is to upload (I hope it's not that confusing)

The approach I thought is: when the user selects an image, crop, it will automatically upload then it will return an url of the current uploaded image to be displayed, this way even when updating I won't have to deal with the uploading step, only updating. The problem with that approach that I don't know how to solve is: should I return the entire uploaded url, display, and also send to tbe backend so it updates on the database or only the relative path? For example:

images: ['http://mywebsite.com/images/image1.jpg', 'http://mywebsite.com/images/image1.jpg']

images: ['images/image1.jpg', 'images/image1.jpg']

Is this a nice approach or is there a better one? I never had to deal with image gallery before.

fylzero

6 years ago

Level 67

@zefex I may bounce around answering this but here goes...

First, definitely and always use a relative URL. This keeps your code mobile. Consider using the APP_URL from your env to reference this in the application or make a separate env reference like IMAGE_UPLOAD_LOCATION, something to that effect. That way if you ever change where you store files, it won't bite you having to update every single record in the database.

I'm a little confused about your image garbage collection question. Assuming you are just displaying an image in base64 and clearing that, there is no backend to worry about, right? From another angle if you are talking about editing an image stored on your server or s3, etc. You can just reference the image key and send that to a custom endpoint to lookup and destroy the file. So when you pull the images from the db to display, hang on to the image primary key number... if they delete the image, make an axios call to destroy the image by passing the key and have a controller method that looks up the image and removes it from s3, what-have-you. Keep in mind for the user to remove the image from the data array, that would require an action on the user's part like clicking a delete image button or something. So just bind the garbage collection call to that action.

23 likes

Please or to participate in this conversation.