Issue #1439Opened September 18, 2018by kickbk1 reactions

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)

artfSeptember 21, 20181 reactions

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="...."]')

artfSeptember 20, 20180 reactions

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
						});
					}
			})
kickbkSeptember 20, 20180 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.