Add: 파일 간편 공유 메뉴, Fix: 파일 다운로드 버그, 팝업 안 닫히는 버그

leehj050211 · Feb 28, 2022 · 4464d61 · 4464d61
1 parent 1ad9fb3
commit 4464d61
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 7 deletions.
diff --git a/public/js/drive/load.js b/public/js/drive/load.js
@@ -29,6 +29,16 @@ const fileInfoView = Vue.createApp({
         }
     }
 }).mount('#file_info_bar');
+const fileShareView = Vue.createApp({
+    data() {
+        return {
+            file: {
+                fileId: '',
+                isShare: false
+            }
+        }
+    }
+}).mount('#share_file_box');
 
 const loadDriveId = () => {
     progress(20);

diff --git a/public/js/drive/main.js b/public/js/drive/main.js
@@ -1,6 +1,7 @@
 const selectFile = fileIdx => {
     filesView.focus = filesView.files[fileIdx].fileId;
     fileInfoView.file = filesView.files[fileIdx];
+    fileShareView.file = filesView.files[fileIdx];
 }
 
 const uploadFile = (file, fileId) => {
@@ -53,7 +54,13 @@ const downloadFile = async (fileId) => {
         },
         callBack:res=>{
             showToast('다운로드 중입니다. 파일 크기에 따라 시간이 다소 소요될 수 있습니다.');
-            const filename = decodeURIComponent(res.headers["content-disposition"].split("filename*=UTF-8''")[1].replace(/"/g, ""));
+            let filename
+            if(res.headers["content-disposition"].indexOf("filename*=UTF-8''")<0){
+                filename = res.headers["content-disposition"].split("filename=")[1].replace(/"/g, "");
+            }else{
+                filename = decodeURIComponent(res.headers["content-disposition"].split("filename*=UTF-8''")[1]?.replace(/"/g, ""));
+            }
+
             const fileUrl = window.URL.createObjectURL(new Blob([res.data], {type:res.headers['content-type']}));
             const link = document.createElement('a');
             link.href = fileUrl;
@@ -85,7 +92,7 @@ const deleteFile = async (fileId) => {
     })
 }
 
-const updateFile = async (fileId, flag) => {
+const shareFile = async (fileId, flag) => {
     if(flag){
         if(!confirm('파일을 공유하시겠습니까?')){
             return;
@@ -110,6 +117,7 @@ const updateFile = async (fileId, flag) => {
                 fileId: '',
                 created: ''
             }
+            popupClose($('#share_file_box'))
             if(flag){
                 const fileUrl = `https://drive.bssm.kro.kr/share/${fileId}`;
                 navigator.clipboard.writeText(fileUrl);
@@ -119,4 +127,22 @@ const updateFile = async (fileId, flag) => {
             }
         }
     })
+}
+
+const shareFileCode = async (fileId) => {
+    if(!confirm('파일을 간편 공유 하시겠습니까?')){
+        return;
+    }
+    ajax({
+        method:'post',
+        url:`drive/code/${driveId}/${fileId}`,
+        callBack:data=>{
+            showToast("간편 공유가 완료되었습니다");
+            popupClose($('#share_file_box'))
+            const shareCode = data.shareCode;
+            navigator.clipboard.writeText(shareCode);
+            $('#share_file_code').innerText = shareCode;
+            popupOpen($('#share_file_code_box'));
+        }
+    })
 }
diff --git a/public/js/share/code.js b/public/js/share/code.js
@@ -54,7 +54,13 @@ const downloadFile = async (code) => {
         },
         callBack:res=>{
             showToast('다운로드 중입니다. 파일 크기에 따라 시간이 다소 소요될 수 있습니다.');
-            const filename = decodeURIComponent(res.headers["content-disposition"].split("filename*=UTF-8''")[1].replace(/"/g, ""));
+            let filename
+            if(res.headers["content-disposition"].indexOf("filename*=UTF-8''")<0){
+                filename = res.headers["content-disposition"].split("filename=")[1].replace(/"/g, "");
+            }else{
+                filename = decodeURIComponent(res.headers["content-disposition"].split("filename*=UTF-8''")[1]?.replace(/"/g, ""));
+            }
+
             const fileUrl = window.URL.createObjectURL(new Blob([res.data], {type:res.headers['content-type']}));
             const link = document.createElement('a');
             link.href = fileUrl;

diff --git a/public/js/share/share.js b/public/js/share/share.js
@@ -54,7 +54,13 @@ const downloadFile = async (fileId) => {
         },
         callBack:res=>{
             showToast('다운로드 중입니다. 파일 크기에 따라 시간이 다소 소요될 수 있습니다.');
-            const filename = decodeURIComponent(res.headers["content-disposition"].split("filename*=UTF-8''")[1].replace(/"/g, ""));
+            let filename
+            if(res.headers["content-disposition"].indexOf("filename*=UTF-8''")<0){
+                filename = res.headers["content-disposition"].split("filename=")[1].replace(/"/g, "");
+            }else{
+                filename = decodeURIComponent(res.headers["content-disposition"].split("filename*=UTF-8''")[1]?.replace(/"/g, ""));
+            }
+
             const fileUrl = window.URL.createObjectURL(new Blob([res.data], {type:res.headers['content-type']}));
             const link = document.createElement('a');
             link.href = fileUrl;

diff --git a/views/pages/drive.ejs b/views/pages/drive.ejs
@@ -61,8 +61,7 @@
                             업데이트
                             <input type="file" :onchange="`uploadFile(this.files[0], '${file.fileId}');this.value=''`">
                         </label>
-                        <button v-if="!file.isShare" class="button clear_button" :onclick="`updateFile('${file.fileId}', true)`">파일 공유</button>
-                        <button v-else class="button clear_button" :onclick="`updateFile('${file.fileId}', false)`">공유 해제</button>
+                        <button class="button clear_button" onclick="popupOpen($('#share_file_box'))">공유</button>
                     </div>
                 </details>
             </div>
@@ -102,8 +101,31 @@
                 <p>드라이브 생성에 성공하였습니다.</p>
             </div>
         </div>
+
+        <div id="share_file_box" class="popup main center">
+            <div class="popup_close_button x_button" onClick="popupClose(this.parentElement);$('.dim.no_popup_close').classList.remove('on');"></div>
+            <h2>파일 공유</h2>
+            <h4>일반 공유</h4><br>
+            <p>링크로 공유되며 공유를 해제할 때 까지 파일에 접근할 수 있습니다</p>
+            <button v-if="!file.isShare" class="button red_button" :onclick="`shareFile('${file.fileId}', true)`">공유 꺼짐</button>
+            <button v-else class="button green_button" :onclick="`shareFile('${file.fileId}', false)`">공유 켜짐</button>
+            <br><br><br>
+            <h4>간편 공유</h4><br>
+            <p>4자리의 코드로 2분동안 공유되며 아래의 페이지에서 코드를 입력해 파일에 접근 할 수 있습니다</p>
+            <a href="/home" target="blink">코드 입력 페이지</a><br><br>
+            <button class="button" :onclick="`shareFileCode('${file.fileId}')`">간편 공유</button>
+        </div>
+
+        <div id="share_file_code_box" class="popup main center">
+            <div class="popup_close_button x_button" onClick="popupClose(this.parentElement);$('.dim.no_popup_close').classList.remove('on');"></div>
+            <h2>간편 공유 완료</h2>
+            <p>코드가 클립보드에 복사되었습니다.</p>
+            <p>아래의 코드는 2분동안 사용가능 합니다</p>
+            <h2 id="share_file_code"></h2>
+        </div>
+
         <div id="file_url_box" class="popup main center">
-            <div class="popup_close_button x_button" onClick="popupClose(this.parentElement.parentElement);$('.dim.no_popup_close').classList.remove('on');"></div>
+            <div class="popup_close_button x_button" onClick="popupClose(this.parentElement);$('.dim.no_popup_close').classList.remove('on');"></div>
             <h2>공유 완료</h2>
             <p>링크가 클립보드에 복사되었습니다.</p>
             <details>