파이어베이스에 글과 이미지 업로드 하기 - Firebase Storage

오늘은 파이어베이스에 글과 이미지를 업로드 해보겠습니다.

 

파이어베이스에 글 / 이미지 업로드 하기

 

1. 먼저 글을 업로드 해보겠습니다.

텍스트입력을 받을 html 을 작성합니다.

 

<form class="blog">       <input class="blog__title" type="text" />       <input class="blog__content" type="text" />       <input class="blog__submit" type="button" value="저장" /> </form>

 

그 다음에는 html에 담겨진 정보를 javascript로 읽고,

파이어베이스 함수 add에 담아주면 됩니다.

document.querySelector('.blog__submit').addEventListener('click', function () {         //querySelector를 이용해서 blog__submit을 가져오고         //addEventListener를 걸어줍니다.         //즉 버튼을 클릭시 function 안을 실행하라는 의미입니다.         const blogContent = {           title: document.querySelector('.blog__title').value,           content: document.querySelector('.blog__content').value,         };         db.collection('blog').add(blogContent);       });

만약에 글이 업로드가 되지 않는다면, 규칙에 들어가서

allow read, write : if true; 로 설정하면 읽기와 쓰기가 가능해집니다.

 

 

직접 실행을 해보면 파이어스토어 blog 컬렉션에

내가 입력한 정보가 잘 있는 것을 볼 수 있습니다.

 

정리를 해보자면 아래와 같습니다.

//파이어스토어 db 선언하기   const db = firebase.firestore();       //원하는 버튼을 클릭시 function을 실행하기 document.querySelector('.원하는버튼').addEventListener('click', function () {         const 업로드할것 = {       // 내가 원하는 정보 }; db.collection('원하는 컬렉션')       .add(업로드할것) // add를 사용하면 게시를 할 수 있다.       .then((result) => {             // 성공시 실행할 무언가...            window.location.href = '/index.html'  // >> 특정 페이지로 가게 하기       })       .catch((error) => {             // 실패시 실행할 무언가...       });  });

 

 

 

2. 이제 이미지 업로드를 해보겠습니다. 기본적인 동작 과정은

이미지 저장은 파어이스토어에 하지 않고 스토리지에 저장합니다.

그래서 스토리지의 url를 가져오게 되고, 이 url 주소를 파이어스토어에 저장하게 하면 됩니다.

//버큰 클릭시 실행하기 const storage = firebase.storage();   // 파이어베이스 스토리지 기능을 가져오는 것 const imgFile = document.querySelector('.image_button').files[0];   // files[0]은 querySelector로 선택된 파일에 접근할 수 있도록 해준다. const storageRef = storage.ref(); const imgLocation = storageRef.child('image/' + imgFile.name);   // child 기능으로 이미지의 저장 경로와 이름을 지정할 수 있다.   // 스토리지 기능에 ref로 끌어와서 미리 선언을 해야한다. const uploadStart = imgLocation.put(imgFile);   // put에 querySelector로 끌어온 파일저장이 가능하다. uploadStart.on('state_changed',   function(){}, //변화가 있을때 동작하는 함수   function(){}, //에러가 있을때 동작하는 함수   function(){}  //성공했을때 동작하는 함수   )

이와 같은 방법으로 파일의 업로드가 가능해지게 됩니다.

특별히 성공했을때 다른 텍스트 파일들도 저장하게 만들면 됩니다.

그리고 방금 저장한 이미지는 url만 입력하게 합니다.

 

 

이것을 자세하게 구현하면 아래와 같습니다.

 

 

일단 이미지를 업로드 할 수 있는 html 파일을 만들어 줍니다.

 

<!-- 파일 업로드 기능 만들기 -->     <div class="image">       <label for="image">이미지 업로드</label>       <input class="image__input" type="file" id="image" />       <button class="image__button" id="send">올리기</button>     </div>

 

 

자 이제 그럼 자바스크립트 코드를 짜야겠죠??

const db = firebase.firestore(); const storage = firebase.storage(); // 버튼이 클릭이 되면 function이 실행이 되도록 합니다. document.querySelector('.image__button').addEventListener('click', function () {   // 파일 업로드 관련   const imgFile = document.querySelector('.image__input').files[0];   const storageRef = storage.ref();   const imgLocation = storageRef.child('image/' + imgFile.name);   const uploadStart = imgLocation.put(imgFile);   uploadStart.on(     'state_changed',     null,     (error) => {       console.error('실패사유는 :', error);     },     // 성공시 동작하는 함수    function () {       uploadStart.snapshot.ref.getDownloadURL().then((url) => {         //snapshot.ref.getDownloadURL() 은 통상적으로 주어지는 기능         //url을 가져오기 위해서 사용된다.         const toSave = {           date: new Date(),           image: url,  //업로드에 성공한 이미지 url을 담아줍니다.         };         db.collection('blog')           .add(toSave)           .then(() => {             window.location.href = '/index.html';           })           .catch((err) => {             console.log(err);           });       });     }   ); });

이렇게 코드를 치고 진행하면,

스토리지에 이미지는 지정한 경로대로 잘 들어가며

 

데이터베이스 blog 컬렉션에 새로운 문서가 생기면서

url 경로가 잘 입력이 되는 것을 볼 수 있습니다.