Блог

У меня возникли проблемы с подключением к Firebase с помощью VisualStudiocode (сохраняйте мои сообщения в блоге). Я получаю эти сообщения, когда пытаюсь сохранить сообщение в блоге на своем локальном сервере.

Любая помощь приветствуется!

Вот мой код для editor.html .

 <script defer src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js"></script>

   
    <script src="js/firebase.js"></script>
    <script src="js/editor.js"></script>


 

Вот мой код для editor.js .

 const blogTitleField = document.querySelector('.title');
const articleField = document.querySelector('.article');

// banner

const bannerImage = document.querySelector('#banner-upload');
const banner = document.querySelector(".banner");
let bannerPath;

const publishBtn = document.querySelector('.publish-btn');
const uploadInput = document.querySelector('#image-upload');

bannerImage.addEventListener('change', () => {
    uploadImage(bannerImage, "banner");
})

uploadInput.addEventListener('change', () => {
    uploadImage(uploadInput, "image");
})

const uploadImage = (uploadFile, uploadType) => {
    const [file] = uploadFile.files;
  
    if(file amp;amp; file.type.includes("image")){
        const formdata = new FormData();
       
        formdata.append('image', file);
        
        fetch('/upload', {
            method: 'post',
            body: formdata

        }).then(res => res.json())
        .then(data => {
            if(uploadType == "image"){
                addImage(data, file.name);
                }else{
                bannerPath = `${location.origin}/${data}`;
            banner.style.backgroundImage = `url("${bannerPath}")`;

            }
        })
    } else{
        alert("upload Image only");
    }
}

const addImage = (imagepath, alt) => {
    let curPos = articleField.selectionStart;
    let textToInsert = `r![${alt}](${imagepath})r`;
    articleField.value = articleField.value.slice(0, curPos)   textToInsert   articleField.value.slice(curPos);
}

let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

publishBtn.addEventListener('click',() => {
    if(articleField.value.length amp;amp; blogTitleField.value.length){

        let letters = 'abcdefghijklmnopqrstuvwxyz';
        let blogTitle = blogTitleField.value.split(" ").join("-");
        let id = '';
        for(let i = 0; i < 4; i  ){
            id  = letters[Math.floor(Math.random() * letters.length)];
        }

        let docName = `${blogTitle}-${id}`;
        let date = new Date(); //for published at info
     
        db.collection("blogs").doc(docName).set({
            title: blogTitleField.value,
            article: articleField.value,
            bannerImage: bannerPath,
            publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
        })
        
        .then(() => {
            console.log('date entered');
        })
        .catch((err) => {
            console.log.error(err);
        })
    }
})


 

Вот мой код для firebase.js .

 
const firebaseConfig = {
    apiKey: "AI....",
    authDomain: "blogging-website.....",
    projectId: "blogging-website-b2f07",
    storageBucket: "blogging-website......",
    messagingSenderId: "2......",
    appId: "1:2........"
};


 const app = initializeApp(firebaseConfig);
// firebase.initializeApp(firebaseConfig);


let db = firebase.firestore();

 

Firebase JavaScript SDK версии v9 и выше использует модульный синтаксис с функциями верхнего уровня для доступа к большинству функций.

Firebase JavaScript SDK версии v8 и более ранних версий использует объектную модель, с большинством функций, доступных через firebase.someproduct() объекты верхнего уровня.

Ваш код смешивает эти две модели SDK, которые не будут работать, если вы не будете очень внимательны. Я рекомендую использовать либо традиционный синтаксис объекта, либо новый модульный синтаксис, а не оба.

Ваш последний фрагмент в синтаксисе v9 / modular будет:

 const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
 

Все это довольно хорошо описано в документации Firebase по началу работы с Firestore и в руководстве по обновлению, поэтому я рекомендую потратить некоторое время на их изучение.