Removing images from the canvas/LS when deleted from the AM
Question
I upload an image with the assets manager which stores the image on the server. I select the image to insert into the canvas and it stores it in the LocalStorage. Great!
Now I delete the image. It removes it from the server and from the Assets Manager. Great!
I refresh the page.
Since the image was used in the canvas, it was not deleted from LS, so the image shows missing in the canvas. Opening the AM shows a missing image as well, since it's trying to load it from LS. If I'm wrong on WHY this is happening, then please correct me.
I am thinking the solution here could be that when we remove the image from AM it should also remove it from the canvas and LS. How do I do that?
Mind you, I do have a function running that I can tap into the function of removing images from the AM with the code below, so perhaps I should add something to it?
const am = editor.AssetManager;
am.addType('image', {
view: {
onRemove(e) {
...
Answers (3)
Ok... @kickbk this is why I ask to specify all the info when you create new issues, so please, next time, do it
btw those are different components, try this:
wrapper.find('[data-gjs-type=mj-image][src="...."]')
I am thinking the solution here could be that when we remove the image from AM it should also remove it from the canvas and LS.
Ok, but this kind of logic it's only up to you, definitely not something we should add inside the core
Mind you, I do have a function running that I can tap into the function of removing images from the AM with the code below, so perhaps I should add something to it?
Correct, once the ajax call is complete you remove the component
am.addType('image', {
view: {
onRemove(e) {
const src = this.model.get('src');
const wrapper = this.em.get('DomComponents').getWrapper();
...
deleteOnServer(...).then(res => {
if(res.isDeleted) {
wrapper.find(`img[src="${src}"]`).forEach(component => {
component.collection.remove(component);
// just realised we don't have component.remove method...
// I'll add it in the next release
});
}
})
When I do wrapper.find(img[src="${src}"]) I get an empty array. In fact, I get an empty array on wrapper.find(img) as well.
I am getting the wrapper, it just seems to have no images inside it. Are we querying the wrong element?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #861
[Question] Help adding images to the canvas
I've followed the docs and have been able to upload images. When I drag an image block (using the newsletter preset) and select an image fr...
Issue #646
Images dropped onto image picker get uploaded twice
Set the asset manager with the dropzone option set to true (which is true by default), something like that: then drop an image onto the dro...
Issue #1929
Loads asset manager, but assets not working
I'm using the pencil icon to trigger the asset manager. The triggering works fine but when I click on any of the images, no change is refle...
Issue #1816
Not allowing to upload same image on same the position after delete that image
Ajax call which is uploading image file in assests folder It's working fine to add an image from the local. But in another scenario, It's n...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.