Comments (18)
First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from
Hey @HarshitMishraGit, thanks for the hints...
your answer is correct, but it's just a bit not obvious with the bunch of images you provided.
so I will just simplify it so everyone reaches here can get it straightforward
Enhance ImageTool LifeCycle
import Image from "@editorjs/image"
// extend the image tool to enhance the image removal lifecycle
class CustomImage extends Image {
removed() {
// access the image block's file data
const { file } = this._data
// do something with the file data
// i.e. delete from server or s3 bucket
}
}
Usage
const editor = new EditorJS({
tools: {
image: {
class: CustomImage as any,
config: {
endpoints: {
byFile: "/api/upload",
},
},
},
// ....
from image.
First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from server
we are having some LifeCycle methods of the block , One of them is removed But for built-in Tools such as image we have to extend the class and override the removed function so just
-
Go to your tools section
-
Here I have build a new class just to override the removed( ) method
-
Use this MyImageTool class inplace of the built-In ImageTool to apply the removed( ) functionality
-
In this removed( ) function write your code to delete the image
For Firebase I have first check where I am getting the url so you can try with
a.console.log(this._data)
- and you are able to see the block data
b. To get the url -console.log(this._data.file.url)
.. this will give you entire url of the image before removing the block
c. Get the refrence of the image by url
d. Delete the image☺️ -
final Result
bandicam.2023-04-17.01-22-13-787.mp4
from image.
I'm having the same issue. No problem uploading an image to my server but how can I get the event that I'm deleting one (and so getting the block data that i'm deleting) so that I can also delete from my server? I've been trying to figure out if there's such a thing in the api but with no success
from image.
Hey Guys
I found a solution that worked for me which i will share down here. I'm using VueJS for the project and currently saving images in FirebaseStorage using "uploadByFile" function. The way I'm saving them is by generating a unique UID for each image, attaching it to the name and saving it in the state of the application. In order to detect the deletion of blocks I'm using the onChange listener that comes with EditorJS. In it you can access the current number of block in the editor. I check to see if any was deleted, use javascript to select all the images blocks currently in the editor. I subtract the UID from the name of the image and cross-reference it with the array of imagesUploade saved in the state. If any of them is missing i delete it from Firestore and subsequently from the state. Below is the code for this:
this.editor = new EditorJS({
onChange: (ev) => {
if(ev.blocks.getBlocksCount() < that.previousCount)
{
let noMatch = [...that.imagesUploaded]
document.querySelectorAll('.image-tool__image-picture').forEach((img) => {
let indx = (img.src).match(/images%2F(.*?)\?alt/)[1]
noMatch.splice(noMatch.indexOf(indx, 1));
})
if(noMatch.length == 1)
{
storageRef(`${that.sessionId}/images/${noMatch[0]}`).delete()
that.imagesUploaded.splice(that.imagesUploaded.indexOf(noMatch[0]), 1)
}
}
else{
that.previousCount = ev.blocks.getBlocksCount()
}
}
}
from image.
Using the idea from @patratel , I did something similar in React.
Basically, I used a custom uploadFile() function in my image config. Whenever an image is uploaded, the url for that image is stored in an array. Each time the change event is triggered in the editor, a change handler function checks if the number of images in the image array is equal to the number of images displayed in the editor. If there are more entries in the images array than there are images in the editor, the function filters out the the extra image url and sends it to the back end with a delete request, where the image gets deleted.
Here's the code:
const [imagesUploaded, setImagesUploaded] = useState([])
// tools config
const tools = {
paragraph,
image: {
class: ImageTool,
config: {
uploader: {
async uploadByFile(file) {
const formData = new FormData()
formData.append('image', file)
try {
const res = await fetch('/api/upload', {
method: 'POST',
body: formData,
})
const json = await res.json()
// keep track of images, add the url of each new image to our array
setImagesUploaded((x) => [...x, json.file.url])
return json
} catch (err) {
console.log(err.message)
}
},
},
},
},
}
// change handler
const handleChange = () => {
// get all current images in editor
const currentImages = []
document
.querySelectorAll('.image-tool__image-picture')
.forEach((x) => currentImages.push(x.src.match(/\/api.*$/g)[0]))
if (imagesUploaded.length > currentImages.length) {
imagesUploaded.forEach(async (img) => {
if (!currentImages.includes(img)) {
try {
const res = await fetch('/api/upload', {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ path: img.match(/image.*$/g)[0] }),
})
const data = await res.text()
console.log(data)
setImagesUploaded((images) => images.filter((x) => x !== img))
} catch (err) {
console.log(err.message)
}
}
})
}
}
from image.
Perhaps I'm wrong or didn't found a better solution but onDelete
sounds to me like a quick win solution but will create new problemes. Example: While the block can be deleted it doesn't really mean that the editor has performed it's save action. A reload would still have the same block but the image would be removed already.
In my case I did extended the editorjs-core with a unique-id per block (codex-team/editor.js#873) and used this id for a server-side diff which allows me to identify if a block got created, modified, moved or deleted. I'm using this to dispatch specific events and during the delete
-event I'm using an async s3 delete operation for the object.
from image.
First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from server
we are having some LifeCycle methods of the block , One of them is removed But for built-in Tools such as image we have to extend the class and override the removed function so just
- Go to your tools section
- Here I have build a new class just to override the removed( ) method
- Use this MyImageTool class inplace of the built-In ImageTool to apply the removed( ) functionality
- In this removed( ) function write your code to delete the image
For Firebase I have first check where I am getting the url so you can try with
a.console.log(this._data)
- and you are able to see the block data
b. To get the url -console.log(this._data.file.url)
.. this will give you entire url of the image before removing the block
c. Get the refrence of the image by url
d. Delete the image☺️ - final Result
bandicam.2023-04-17.01-22-13-787.mp4
Thank's bro.
from image.
First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from server
we are having some LifeCycle methods of the block , One of them is removed But for built-in Tools such as image we have to extend the class and override the removed function so just
- Go to your tools section
- Here I have build a new class just to override the removed( ) method
- Use this MyImageTool class inplace of the built-In ImageTool to apply the removed( ) functionality
- In this removed( ) function write your code to delete the image
For Firebase I have first check where I am getting the url so you can try with
a.console.log(this._data)
- and you are able to see the block data
b. To get the url -console.log(this._data.file.url)
.. this will give you entire url of the image before removing the block
c. Get the refrence of the image by url
d. Delete the image☺️ - final Result
bandicam.2023-04-17.01-22-13-787.mp4
Thank you so much 🙌
from image.
I can't delete any block. ( only using backspace which doesn't apply to image blocks )
I've tried the official demo and it doesn't seem to work either. link
from image.
@miguelangeltorresfp not trying to be facetious, but, the block delete action requires you to click the X button twice. It works that way on the official demo as well and works fine.
If you did indeed click the button twice (ie confirm the delete) could you perhaps share your browser/device info https://whatsmybrowser.org/ so that others can try and replicate the issue?
from image.
I'm having the same issue. No problem uploading an image to my server but how can I get the event that I'm deleting one (and so getting the block data that i'm deleting) so that I can also delete from my server? I've been trying to figure out if there's such a thing in the api but with no success
i have the same problem
from image.
I am having same issue, is there any OnDelete event I could bind?
from image.
I'm having the same issue. No problem uploading an image to my server but how can I get the event that I'm deleting one (and so getting the block data that i'm deleting) so that I can also delete from my server? I've been trying to figure out if there's such a thing in the api but with no success
I have the same problem. This problem will increase the cost of storing files because unused files will be stored. This is not economical.
from image.
@christoph-kluge Yeah that's absolutely correct. But diff is overkill if you just want to delete images. I keep an array called deleted, I append the image_key to it whenever a new image is deleted and send it to backend server only when user saves the editor data.
from image.
@MohitKS5 How do you detect that the image is deleted without doing a diff?
from image.
.image-tool__image-picture
Thanks for sharing your code snippet @Isaac-Svi! Just to point out a caveat, that editor.js in the future may rename the CSS classes to something else (i.e. .image-tool__image-picture
). If you're not careful to update your code, then this snippet might accidentally remove all the uploaded images which you wanted to keep.
from image.
This issue resolved here .closes #54
from image.
Thanks. This lifecycle removed method truly helped me. But now, i have another problem. I have removed method executed even when just render Custom Image component.
Events order:
- rendered
- removed
- rendered
- updated
Update:
I found an issue
Earlier, I solved another problem: fixing an annoying warning in Chrome addRange(): The given range isn't in document.
I call editor.render method after 100 ms
setTimeout(() => {
if (editor && editor.render) {
editor.render(data);
}
}, 100);
Method editor's render method calls removed method for all previous rendered components and its cam provide to deletion all images on your pages
I do not know why it happens
from image.
Related Issues (20)
- How to add parameters to the Fetch image API HOT 1
- Error: To enable read-only mode all connected tools should support it. Tools image don't support read-only mode. HOT 1
- Some incomplete code after the comment in 2.8.1 ?
- disable createFileButton being fired onload HOT 1
- Cannot assign to read only property 'caption' HOT 3
- imageUploader HOT 4
- CDN example
- SVG Icon Disappears When Using buttonContent in ImageTool Configuration
- Can’t un streatch once stretched HOT 1
- Redirected images cannot be displayed
- Option to remove caption and extra features (border, stretch, etc.) HOT 2
- Option to add more options for image upload
- Add images without backend
- Dragging an existing image duplicates it
- Copying Images from Word or Google Doc
- Warning: `appendCallback` hook is deprecated
- Add link to image (make image a clickable link) HOT 1
- The onChange function is not being triggered when the caption of image is made blank.
- Pasting a picture from the clipboard after pasting a picture URL from the clipboard HOT 1
- How to pass temporary url
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from image.