반응형
<upload.html>
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
업로드
<div class="container mt-3">
<input type="text" class="form-control mt-2" id="title" placeholder="title">
<textarea class="form-control mt-2" id="content">content</textarea>
<input type="text" class="form-control mt-2" id="price" placeholder="price">
<input class="form-control mt-2" type="file" id="image">
<button class="btn btn-danger mt-3" id="send">올리기</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-storage.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnowLA3wkZzoSX9kFHdq615-ZhUvdNj60",
authDomain: "wjdb-647dc.firebaseapp.com",
databaseURL: "https://wjdb-647dc-default-rtdb.firebaseio.com",
projectId: "wjdb-647dc",
storageBucket: "wjdb-647dc.appspot.com",
messagingSenderId: "241186966612",
appId: "1:241186966612:web:9843c62bd2c76613ae71c1",
measurementId: "G-8HX4QXCKBQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- <script src="app.js"></script> -->
<script>
const db = firebase.firestore();
const storage = firebase.storage();
// 쓰기
// db.collection('product').doc('상품3').set({ 제목: '변기'})
// db.collection('product').add({제목: '변기'})
$('#send').click(function() {
var file = document.querySelector('#image').files[0];
var storageRef = storage.ref();
var file_path = storageRef.child('image/' + file.name);
var 업로드작업 = file_path.put(file);
업로드작업.on(
'state_changed',
null,
(error)=>{
console.err('실패사유는',error);
},
() => {
업로드작업.snapshot.ref.getDownloadURL().then((url) => {
console.log('업로드된 경로는', url);
var upload = {
제목: $('#title').val(),
내용: $('#content').val(),
가격: parseInt($('#price').val()),
날짜: new Date(),
이미지: url
}
db.collection('product').add(upload).then((res) =>{
console.log(res);
// window.location.href="/index.html";
}).catch((err) => {
console.log(err);
})
})
}
)
})
</script>
</body>
</html>반응형
'ETC' 카테고리의 다른 글
| 프로그래밍 언어 랭킹 사이트 - 2022년 2월 (4) | 2022.02.24 |
|---|---|
| NSSM을 이용하여 Windows 에 Node 서비스 추가하기 (0) | 2021.08.10 |
| Firebase 데이터 저장하기 (0) | 2021.07.30 |
| Firebase 구글 인증하기 (0) | 2021.07.29 |
| Firebase API 만들기 (0) | 2021.07.27 |
