firebase, firestore에 이미지 업로드

 

 

storageref를 활용하여 이미지를 firestore에 넣고

 

How to upload image to firebase storage for Editor.js?

발생된 URL을 DB에 넣어준다.

 

그리고 이미지를 불러올 땐

해당 URL을 불러와서 보여줄 수 있도록 한다.

 

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
                }
            }
        }
    }
}

```또는```

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
                            }
                        }
                    }
                }
            }               
        }
    }
});