시작하면서
앞선 글에서, Firebase에 사진 파일들을 등록하는 방법과, 이렇게 Firebase에 등록된 자료들을 읽어와 표시하는 방법을 소개한 바 있었다.
자료를 등록하는 방법 https://blog.naver.com/mythee1/223493076303
자료를 가져오는 방법 https://blog.naver.com/mythee1/223493415455
그리고 이렇게 자료를 읽어올 때 특정 필드 기준으로 정렬하는 방법도 별도의 글에서 소개한 바 있었다.
하나의 DB 레코드(=document)에 여러 개의 사진 파일을 업로드하기
그런데, 이전의 방법들은 각각의 문서에 하나씩의 파일을 저장했다가 표시하는 형식이었기에, 표시할 수 있는 사진은 한 개뿐인 점이 아쉬웠다. 단 한 장의 사진만으로는 정보 전달이 부족한 경우가 많기 때문에, 여러 개의 사진 파일을 저장할 수도 있는 방식으로 바꾸는 게 필요하다는 생각이 들었다.
기존의 파일 처리 방식은 다음과 같은 방식의 HTML 코드로 등록할 파일을 입력받고,
<input type="file" id="pimage" name="pimage" class="form-control mb-3">
해당 파일이 입력되는 버튼 동작을 토대로, 다음과 같은 방식의 스크립트로 파이어 베이스에 파일을 저장하고, 저장 위치에 대한 URL 정보를 DB에 등록하는 방식을 취했었다. 또한 파일 이름은 중복된 이름이 사용되었을 경우 발생하는 문제(예: 실수로 삭제 등)를 방지하기 위해 유일성을 확보할 수 있도록 timestamp를 이용하여 이름을 변경하여 등록해 주었다.
var pimage = $('#pimage').get(0).files[0];
var timestamp = new Date().getTime();
var fileName = 'image_' + timestamp + '.jpg';
var storageRef = firebase.storage().ref('products/' + fileName);
var uploadTask = storageRef.put(pimage);
uploadTask.on('state_changed', function(snapshot){
}, function(error) {
console.error("Error uploading image: ", error);
}, function() {
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
이러했던 기존의 코드를 10개까지의 사진 파일을 등록 가능하도록 변경해 보기로 했다.
우선 파일을 입력받는 부분을 개선했다.
기존에 1개밖에 없던 파일 입력 부분을 10개의 파일을 각각 지정하도록 다음과 같이 변경했다.
<div class="container"> <form id="productForm" class="m-3"> <input type="file" id="pimage1" name="pimage1" class="form-control mb-3"> <input type="file" id="pimage2" name="pimage2" class="form-control mb-3"> <input type="file" id="pimage3" name="pimage3" class="form-control mb-3"> <input type="file" id="pimage4" name="pimage4" class="form-control mb-3"> <input type="file" id="pimage5" name="pimage5" class="form-control mb-3"> <input type="file" id="pimage6" name="pimage6" class="form-control mb-3"> <input type="file" id="pimage7" name="pimage7" class="form-control mb-3"> <input type="file" id="pimage8" name="pimage8" class="form-control mb-3"> <input type="file" id="pimage9" name="pimage9" class="form-control mb-3"> <input type="file" id="pimage10" name="pimage10" class="form-control mb-3"> <input type="submit" value="업로드" class="btn btn-primary" style="background-color: orange;"> </form> <!-- <div id="uploadProgress" style="margin-left: 100px;"></div> --> </div>
그리고 파일을 저장하는 부분을 다음과 같이 배열의 형태로 만들고, 각 파일이 저장된 URL을 저장할 변수도 배열 형태로 처리했다.
그리고 실제 파일을 기존과 유사한 방법으로 하나씩 업로드하도록 구성했다.
이 과정에서 각 파일의 등록 진행 상황을 표시하기 위해 미리 다음과 같은 HTML을 하나 만들어주었다.
그런데, 업로드가 시작되기 전에는 아무런 표시도 되지 않아야 하므로, 이 HTML의 초깃값에는 아무런 글자도 할당하지 않는 방법을 사용했고
실제 업로드가 진행되는 과정에서 다음 코드를 이용해 파일 등록 progress를 표시했다.
이렇게 하면, 입력받은 최대 10개의 파일을 차례대로 업로드하게 되는데, 이러한 루프의 중간부에 다음과 같이 잔여 파일 수를 체크하는 방식으로 업로드 완성 여부를 확인하고, 더 이상 업로드할 파일이 없는 경우에 다운로드된 URL 정보와 나머지 필드 값을 컬렉션에 해당 문서를 등록하도록 했다.
이렇게 만들어준 코드의 실제 화면 표시 형태는 다음과 같고
실제 여러 개의 파일들이 등록되는 모습은 다음과 같다.
참고로, 내가 여러 개의 사진 파일을 등록하기 위해 사용한 전체 소스 코드는 다음에 첨부해둔다.
또한 현재의 10개보다 더 많은 수의 사진 파일을 등록하기를 원한다면,
우선 다음의 파일 입력받는 부분을 원하는 개수만큼 늘려주고, (id와 name도 맞추어 이름을 조정해 주고)
파일을 저장하는 다음 배열의 요소를 원하는 만큼 늘려주면 된다.
