Hi how i can manage this use case:
i got a product with a image already on S3, its in the Top of the form, in the bottom i got a s3 button (this should work as image replace) so if user uploads a new image it should save to DB, but, if user dont upload anything, it should keep the same image in the top header. How is that possible?
thank you
Hey there @agaitan026!
You may be able to do something like {{ s3Uploader2.lastUploadedFileUrl || YOUR_DEFAULT_FILE_URL_HERE }}. How are you getting the default image?
im not using any default image for now, just want an option for user to replace image when click on Edit modal
Ah I see, you might be able to use some JavaScript to define an object that only has fields which are actually populated, can you try a writing a transformer that does something like:
const updates = {
marca: {{ textInput1.value }},
modelo: {{ textInput2.value }},
...
imagen: {{ uploadedImageTrackingState.value ? s3Uploader.lastUploadedFileUrl : undefined }},
}
return _.pickBy(updates);
Then pass the value of that transformer as your update object?
The lodash _.pickBy function filters your object based on the second parameter that's passed to it, normally a function. If you don't pass a second parameter it'll just filter out values that are falsey (e.g. "", null, undefined, false, 0).
Should I leave my form like that? Only create a new transformer?
Just make sure the transformer includes all the update fields you want, then switch the "Changeset" from "Key value pairs" to "Object"!
Will try that, do with that option I can replace image or leave the original one
works good thank you for that tip, its possible to erase the old image? i already got a query for that
Hmm... if you use the same S3 key it should automatically overwrite the old image. Otherwise, you might need to add that delete query as an additional event handler that runs at the same you run your update query. If that's the case I would make sure to disable it whenever there isn't a newly uploaded image!
You might want to add a way to keep track of whether an image has uploaded for this particular file, for instance, you might use a temporary state and add an event handler to your S3 uploader that sets it to true with another event handler that sets it back to false whenever you switch records.
You'll want to include that in the solution for updating your database as well so that you don't upload an image to the wrong row!
Sorry for missing that earlier, I've edited the post but just so it's here as well:
const updates = {
marca: {{ textInput1.value }},
modelo: {{ textInput2.value }},
...
imagen: {{ uploadedImageTrackingState.value ? s3Uploader.lastUploadedFileUrl : undefined }},
}
return _.pickBy(updates);
Yeah I decided to keep the same filename and turn off random filenames, for my case is better as they are inventory images of all products