Firebase Storage에 이미지 업로드하려면

0:00 저번시간 숙제 

4:39 DB 저장시 성공/실패체크하려면

7:42 이미지 업로드하는 법

(변동사항) 요즘 Firebase Storage 쓰려면 미리 카드등록 후 요금제를 종량제로 업그레이드 해야합니다.

Storage 생성시 지역을 us-west1 선택하면 5GB까지 무료일텐데

근데 아무 지역이나 해도 사진 한두개 올리는건 요금은 그냥 0에 수렴합니다.

우리 사이트는 상품하나를 올릴 때 이미지도 함께 넣어야하는데 

웹개발시 일반적으로 이미지는 database에 업로드하지 않습니다.

일반 하드인 Storage라는 곳에 올리셔야합니다. 

그리고 Storage에 저장된 url을 가져와서 database에 저장합니다. 

왜 그따구인지는 밑에서 알아봅시다. 

$('#send').click(function(){
  var 저장할거 = { 
    제목 : $('#title').val(),
    가격 : $('#price').val(),
    내용 : $('#content').val(),
  }
  db.collection('product').add(저장할거)
});

DB 저장 성공시/실패시 코드를 실행하고 싶으면

$('#send').click(function(){
  var 저장할거 = { 
    제목 : $('#title').val(),
    가격 : $('#price').val(),
    내용 : $('#content').val(),
  }
  db.collection('product').add(저장할거).then((result)=>{
    성공시 실행할거~~
  }).catch((error)=>{
    실패시 실행할거~~
  })
});

.then() 그리고 .catch() 를 각각 붙이고

그 안에 함수를 ()=>{} 하나 넣습니다.

그러면 각각 성공시, 실행시 실행할 코드를 작성할 수 있습니다. 

예를 들어서 DB 저장 성공시 뭐 메인 페이지로 이동시키고 싶습니까 

$('#send').click(function(){
  var 저장할거 = { 
    제목 : $('#title').val(),
    가격 : $('#price').val(),
    내용 : $('#content').val(),
    날짜 : new Date()
  }
  db.collection('product').add(저장할거).then((result)=>{
    window.location.href = '/index.html'
  }).catch((error)=>{
    실패시 실행할거~~
  })
});

페이지 이동시키는 코드 넣으면 되는거죠 뭐 

그리고 심심해서 날짜도 저장하라고 했는데

new Date() 라고 쓰면 현재 날짜가 그 자리에 나옵니다. 

Q. 흔한 에러 : 왜 강의 따라했는데 안되는 것이죠

A1. Firebase가 위에 설치되어있어야 하단에서 Firebase 문법을 사용가능합니다.

A2. jQuery가 위에 설치되어있어야 하단에서 jQuery 문법을 사용가능합니다.  

A3. 오타임 

이미지 업로드를 할건데요 

HTML에 이런 <input>을 하나 만드십시오.

<input type="file" id="image">

근데 이미 만들어져있을듯

이게 파일업로드할 수 있는 <input>입니다. 이미지 선택하면 이미지 업로드됩니다.

근데 이미지는 Database에 저장하지 않습니다. 

원래 Database는 보통 글자/숫자만 저장하고 Firestore Database는 document당 1MB 데이터 제한이 있습니다.

1. 그래서 이미지같은건 Storage에다가 올리고 

2. 이미지의 url을 가져와서 Database에 저장하면 됩니다. 

Storage에 이미지를 업로드하고 싶으면 

const storage = firebase.storage();

var storageRef = storage.ref();
var 저장할경로 = storageRef.child('image/' + '파일명');
var 업로드작업 = 저장할경로.put(업로드한 파일 JS로 찾은거)

이렇게 작성하면 됩니다. 

그냥 Firebase 문법일 뿐이라 이해할 필요는 없고 그냥 따라칩니다. 

1. child() 여기 안에 어떤 경로로, 어떤 파일명으로 저장할지 결정해주시면 되고

2. 그 경로에다가 .put() 붙이고 그 안에 파일 넣으시면 업로드 작업이 수행됩니다.

이제 자바스크립트로 업로드할 파일 찾아서 코드에 집어넣어보십시오.

JS로 파일 찾으라는걸 못하겠다면 이번만 봐드림

const storage = firebase.storage();

var file = document.querySelector('#image').files[0];
var storageRef = storage.ref();
var 저장할경로 = storageRef.child('image/' + '파일명');
var 업로드작업 = 저장할경로.put(file)

자바스크립트 셀렉터로 <input>요소를 찾은 다음 .files[0] 이러면 파일 나옴 

근데 버튼 눌러도 업로드 안되는데여 

크롬 콘솔창에 Permission이 없다는 어쩌구 에러가 뜬다면 

그건 역시 Storage에 접근규칙 설정을 안해놔서 그렇습니다.

Firebase 콘솔로 들어가서 Storage 규칙 설정해주십시오. 

▲ 누구나 Storage에 읽고 쓸 수 있다고 설정하는 부분입니다. 

나중에 로그인기능 만들면 로그인된 사람들만 쓸 수 있게 만들 수도 있습니다.