#Filesystem

39 messages · Page 1 of 1 (latest)

jolly jewel
#

I have a form component ( 1 image ) to which you can add images and they will appear as preview, and by submitting form they will be saved on server in folder, it works as needed. But I wanted to add editing functionality. And there is my question: By fetching item I get an array of paths to all images on server corresponding to that item in case I want to edit them on my editing page ( like delete some images or replace by new ones ) I somehow need to get them from my server ( knowing only path ) and convert them to file again, how can I do this ?

image.png
lament zenith
#

@jolly jewel Not sure what database and server you're using, but some databases (like mongoDB) let you do queries on nested documents, which might be what you need here.

jolly jewel
#

So the actual files are in my project folder, not on db or somewhere else

lament zenith
#

I'm sorry, I'm very confused by that setup, not sure what to suggest. Maybe someone else can help you

earnest arch
#

@jolly jewel , You should also store an Id alongside with your images so you can safely id and remove or replace them.

Since you are working on your file system, I would recommend to save your image to a folder locally + save your path, id + extra information if needed into a JSON file also in your file system to mimic data from a DB.

I would store the image data in the following structure, but feel free to change it:

interface ImageData {
  id: string // UUID or anything unique
  path: string
  deleted: boolean
  createdAt: string // timestamp or ZonedDateTime
  updatedAt: string // timestamp or ZonedDateTime
}

Since you actually not gonna "edit" the image itself but either replace it, you probably don't need updatedAt field.

If the order matters, you should add an ordering: number field to the interface

#

So how would adding an image work?
Very simple, you already do it.
Save the image into the file system and save the path into a variable.
Create your dataset, save into a JSON.
Nice and simple.

Deleting an image would be very simple as well:
Your server should return the id and path when you request your data.
If you want to delete an image, you can easily find it by it's id and mark it as deleted

Replacing an image could be done multiple ways.

  1. You can save the new image first and keep it's path in a variable. Save the old images path in a variable. Replace your existing record's path with the new path. Then delete the old image

  2. If you need to keep record of old files, you can just mark the old record as deleted, and create a new record using the same ordering number if that is important then add it to your JSON file.

jolly jewel
#

So I actually somehow managed to make editing image functionality but there is a small problem

earnest arch
#

Now you also mentioned that each of these form components are separate instances, so each of able to hold multiple images.

So each of these instance needs to be a separate entity with its own Id, so your interface might needs to change to something like this:

interface ImageData {
  id: string // UUID or anything unique
  path: string
  deleted: boolean
  createdAt: string // timestamp or ZonedDateTime
  updatedAt: string // timestamp or ZonedDateTime
}

interface ImageInstance {
  id: string // UUID or anything unique
  images: ImageData[]
  createdAt: string // timestamp or ZonedDateTime
  updatedAt: string // timestamp or ZonedDateTime
}

Now fetching the data should be also very simple, you only want to return the images which are mark as not deleted

jolly jewel
#

To send those images to backend I use FormData

#

And to parse this FormData on backend, I use library "formidable"

earnest arch
jolly jewel
#

And I stuck with ordering problem, since when I parse FormData with formidable, I get those 3 fields

image.png
#

And order of my images gets lost

#

P.S if I'm editing images, I add them to array, but if any of thiese images is already saved on backend and I just push it's path to array

#

that's why i lose order of images

#

because formidable parses files to different array

#

and I can't find a way to access data property from FormData on the backend

#

sorry if I confused you, I tried to explain as clear as I can

earnest arch
#

You can pass some extra metadata alongside the images

jolly jewel
#

it would be much easier if I could just loop over the array and if the images was a file and not a path, then I would save it, if not, I would just add it to itemPaths

earnest arch
#

there are multiple ways of doing editing etc...

#

You can make a separate endpoint which handles editing only using the container id + image id

#

I know that ideally, if you have an image already uploaded and you try to reupload, it shouldn't be there.
But in real life you cannot control this unfortunately, there's not really a way checking if an image already exists.
Comparing the name of the image is not a solution I am afraid.
Comparing every byte of each already saved image to a newely uploaded image is very heavy on the server and not the best approach.

jolly jewel
#

the way that formidable works, it just takes any files that comes in Form-data and makes a new array of them

#

and I don't know how can I access the original form data, now parsed

earnest arch
#

I assume you have your own Node server setup and you have a couple of endpoints already in place.

#

You can create a couple more endpoints which will perform the editing and deleting of your images

#

deleting will only need to use the container ID + the image ID

#

editing would also need the container ID + the image ID which you want to replace + the new image which you can send as form data

jolly jewel
#

okay, thanks you, hope I will be able to make it )

#

@earnest arch btw, do you think I should move my image to some cloud ? Or it will be okay to stay on server ?

#

it is just a pet project, not any commercial thing

earnest arch
jolly jewel
earnest arch
#

me pleasure 🙂

#

I didn't provide any SQL code but since you are using postgres I assumes you will be fine to create the table(s) yourself, but if you need help with it just give me a shout