I am trying to add image upload functionality in Editor.js by using backend file uploader endpoint. In the backend, I am uploading this file to firebase storage. But actually I am able to extract the file. I tried many ways but it didn't work
Is there any other method to add image upload functionality to editor.js.
I'm using editorjs also, thanks for the answer. Here's my solutions to the problem:
uploadByFile(file : File) {
const path = `post/${Date.now()}_${file.name}`;
const ref = that.afStorage.ref(path);
const task = that.afStorage.upload(path, file);
return new Promise((resolve, reject) => {
task.snapshotChanges()
.pipe(
finalize( () => {
ref.getDownloadURL()
.subscribe(url => {
console.log(url);
let res = {
success: 1,
file: {
url : url
}
}
resolve(res);
},error => {
console.log(error);
reject(error);
})
}))
.subscribe( url => {
if(url){
console.log(url);
}
})
})
}
Actually I found another way of doing this. Editor.js provides a way in which we can add UploadByFile method on the client side. And Firebase storage works fine on the client side. Here is the code
config: {
uploader: {
async uploadByFile(file) {
var storageRef = storage.ref();
var imagesRef = storageRef.child('EditorJS').child('images/'+ file.name);
var metadata = {
contentType: 'image/jpeg'
};
var uploadTask = await imagesRef.put(file, metadata);
console.log("Uploaded successfully!", uploadTask);
const downloadURL = await uploadTask.ref.getDownloadURL();
console.log(downloadURL);
return {
success: 1,
file: {
url: downloadURL
}
}
}
}
}
Add this config to image object within editor.js implementation.
This was exactly what I needed to get this resolved so thank you Sachin Kumar. Here is a full working example but note that you will need to fill in your Firebase settings in the image.css file or you wont connect to firebase storage. I did not take example to saving content as I did not want to be too long but this should get you started.
I was testing the embed so I included the code for embed which will allow you to copy a youtube video URL and embed a youtube video by just including the embed js and configuration. Again no save yet but pretty straightforward.
test.html:
<!DOCTYPE html>
<html >
<head>
<!-- Add editorJS via CDN -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script>
<!-- Add Firebase via CDN-->
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-storage.js"></script>
</head>
<body>
<h4>EditorJs</h4>
<div id="editorjs" style="background-color: grey;" ></div>
<!-- Add the javascript for Image component and Firebase Storage -->
<script src="image.js"></script>
</body>
</html>
Here is the image.js file (remember to update firebase config):
var firebaseConfig = {
/* Enter your firebase Config settings here or this wont work */
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
const db=firebase.firestore();
const ImageTool = window.ImageTool;
const editor = new EditorJS({
holder: 'editorjs',
placeholder: 'Enter Card Content',
tools: {
header: {
class: Header,
inlineToolbar: ['link']
},
list: {
class: List,
inlineToolbar: ['link','bold']
},
embed: {
class: Embed,
inlineToolbar: false,
config: {
services: {
youtube: true,
coub: true
}
},
},
image: {
class: ImageTool,
config: {
uploader: {
async uploadByFile(file) {
let storageRef = firebase.storage().ref();
let imagesRef = storageRef.child('EditorJS').child('images/'+ file.name);
let metadata = {
contentType: 'image/jpeg'
};
let uploadTask = await imagesRef.put(file, metadata);
const downloadURL = await uploadTask.ref.getDownloadURL();
return {
success: 1,
file: {
url: downloadURL
}
}
}
}
}
}
}
});