파일 전송

index.html

<script>
          /**
           * 초기 필드 변수 할당
           */
          FirebaseChat.prototype.init = function(){
              //...생략
              this.iBtnAttach = document.getElementById('iBtnAttach');
              this.attachFile = document.getElementById('attachFile');
          }



          /**
           * 초기 이벤트 바인딩
           */
          FirebaseChat.prototype.initEvent = function(){
              //...생략
              this.iBtnAttach.addEventListener('click', this.onBtnAttachClick.bind(this));
              this.attachFile.addEventListener('change', this.onAttachFile.bind(this));
          }

          /**
           *  첨부파일 버튼 클릭
           */
          FirebaseChat.prototype.onBtnAttachClick = function(){
              this.attachFile.click();
          }

          /**
           * 첨부파일 전송
           */
          FirebaseChat.prototype.onAttachFile = function(event){

              $('#dnModal').modal('open');
              var files = event.target.files;
              var filesLength = files.length;
              var progressBar = document.getElementById('dvProgressBar');
              var fileName = files[0].name;
              var path = FirebaseChat.yyyyMMddHHmmsss().substr(0, 8) +'/'+this.roomId + '/' + this.auth.currentUser.uid + '/' + fileName;
              var uploadTask = firebase.storage().ref().child(path).put(files[0]);

              var cbProgress = function(snapshot){ // 진행 과정
                  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                  progressBar.style.width = progress+'%';
              }

              var cbError = function(error) { // 에러발생
                  console.log(error);
                  $('#dnModal').modal('close');
                  alert('업로드 중 에러가 발생하였습니다.');
              }
              var cbComplete = function() { // 완료
                  //프로그레스바 닫기
                  $('#dnModal').modal('close');

                  //완료 다운로드 링크 메세지 보내기
                  this.saveMessages(null, uploadTask.snapshot.downloadURL, fileName);

                  //files 리셋
                  event.target.value='';
              }
              //프로그레스바
              uploadTask.on('state_changed', cbProgress.bind(this) , cbError.bind(this), cbComplete.bind(this));
          }

          /**
           * 메세지 전송
           */
          FirebaseChat.prototype.saveMessages = function(inviteMessage, downloadURL, fileName){
              var user = this.auth.currentUser;
              var msg = this.dvInputChat.innerHTML.trim();
              //초대메세지
              if(inviteMessage && inviteMessage.length > 0){
                  msg = inviteMessage;
              }
              //파일전송 메세지
              if(downloadURL && fileName){
                  msg = "<a class='waves-effect waves-light btn blue' download='"+fileName+"' href='"+ downloadURL +"'>다운로드</a></br><span class=''>파일명 : "+ fileName +"</span>";
              }


              if(msg.length > 0){
                  this.dvInputChat.focus();
                  this.dvInputChat.innerHTML = '';
                  var multiUpdates = {};
                  var messageRefKey = this.messageRef.push().key; // 메세지 키값 구하기
                  var convertMsg = downloadURL ? msg : FirebaseChat.convertMsg(msg); //다운로드 URL일 경우 convert하지 않음


                  //...생략
                          

                  //유저별 룸리스트 저장
                  var roomUserListLength = this.roomUserlist.length;
                  if(this.roomUserlist && roomUserListLength > 0){
                      for(var i = 0; i < roomUserListLength ; i++){
                          multiUpdates['UserRooms/'+ this.roomUserlist[i] +'/'+ this.roomId] = {
                              roomId : this.roomId,
                              roomUserName : this.roomUserName.join(this.SPLIT_CHAR),
                              roomUserlist : this.roomUserlist.join(this.SPLIT_CHAR),
                              roomType : roomUserListLength > 2 ? this.MULTI : this.ONE_VS_ONE,
                              roomOneVSOneTarget : roomUserListLength == 2 && i == 0 ? this.roomUserlist[1] :  // 1대 1 대화이고 i 값이 0 이면
                                  roomUserListLength == 2 && i == 1 ? this.roomUserlist[0]   // 1대 1 대화 이고 i값이 1이면
                                      : '', // 나머지
                              lastMessage : downloadURL ? '다운로드' : convertMsg,
                              profileImg : user.photoURL ? user.photoURL : '',
                              timestamp: firebase.database.ServerValue.TIMESTAMP

                          };
                      }
                  }
                  this.database.ref().update(multiUpdates);
              }
          }