Forráskód Böngészése

update 2024-05-03

junggilpark 1 éve
szülő
commit
73e6f4d5cb
4 módosított fájl, 695 hozzáadás és 239 törlés
  1. 47 31
      src/app.js
  2. BIN
      src/static/images/folder-icon.png
  3. 228 5
      src/static/styles/custom.css
  4. 420 203
      src/views/hello.html

+ 47 - 31
src/app.js

@@ -285,7 +285,6 @@ serverApp.post('/uploadItems', upload.array('file'),
       folder: { },
       '@microsoft.graph.conflictBehavior': 'rename'
     }
-
     const files = req.files;
     let {siteId, path, folder} = req.body;
 
@@ -339,14 +338,14 @@ serverApp.post('/uploadItems', upload.array('file'),
           let beforeUri = '';
           let beforeItemId = '';
           for (let file of files) {
-            const fileName = file.originalname.substring(0, file.originalname.lastIndexOf('.'));
+            // const fileName = file.originalname.substring(0, file.originalname.lastIndexOf('.'));
+            const fileName = file.originalname;
             let filePath = req.body[ fileName + "_path"];
             file.originalname = Buffer.from(file.originalname, 'ascii').toString('utf8');
 
             try { 
               let formatPath = '';
               if (filePath) {
-                console.log(filePath);
                 if (Array.isArray(filePath) && filePath.length > 0) {
                   formatPath = ":" + filePath[0];
                   if (filePath.length > 1) {
@@ -373,14 +372,6 @@ serverApp.post('/uploadItems', upload.array('file'),
                 Authorization: `Bearer ${req.session.accessToken}`,
                 "Content-Type" : file.mimeType
               }}
-              // promiseArray.push(
-              //   {
-              //     url : uploadUri, 
-              //     mimeType: file.mimetype,
-              //     file : file.buffer,
-              //   }
-              // );
-              // console.log(promiseArray);
               await axios.put(endPoint + "/sites/"+ siteId +"/drive/items/"+itemId+':/'+file.originalname+':/content', file.buffer, fileOptions);
             }
             catch(error) {
@@ -395,30 +386,11 @@ serverApp.post('/uploadItems', upload.array('file'),
               return res.json({success:'F', message: '요청하신파일 업로드 중 오류가 발생하였습니다.', error : error});
             }
           }
-
-          // Promise.all(promiseArray.map(obj=>{
-          //   console.log(obj);
-          //   return fetch(obj.url, {
-          //     method : 'PUT',
-          //     headers: {
-          //       Authorization: `Bearer ${req.session.accessToken}`,
-          //       "Content-Type" : obj.mimeType
-          //     }, 
-          //     data : obj.file,
-          //   })
-          // })).then((json)=>{
-          //   // console.log(json);
-          // }).catch((error)=> {
-          //   console.log(error);
-          //   return res.json({success:'F', message: '요청하신파일 업로드 중 오류가 발생하였습니다.', error : error});
-          // });
         }
         const endTime = new Date();
         console.log('시작 시간 :', startTime, '종료 시간 :', endTime);
         res.json({success:'S', message: '요청하신 파일 업로드가 정상적으로 처리 되었습니다.'});
       }
-
-    // }
 })
 serverApp.post('/api/download',
   isAuthenticated,
@@ -623,7 +595,7 @@ serverApp.post('/deleteItems',
               console.log(error.response.data.error); 
               
               resultObj.success = 'F';
-              resultObj.message = '선택하신 파일 정보 삭제중 오류가 발생하였습니다.\n' + error.response.data.error.message;
+              resultObj.message = '선택하신 파일 정보 삭제중 오류가 발생하였습니다.<br>' + error.response.data.error.message;
               return res.json(resultObj);
             }
           }
@@ -639,3 +611,47 @@ serverApp.post('/deleteItems',
       }
     }
   })
+
+serverApp.post('/api/update-name', 
+  isAuthenticated,
+  (req, res, next)=>{
+    if (!req.session.accessToken) {
+      return authProvider.acquireToken({
+        scopes: ['.default'],
+        redirectUri: 'https://localhost:53000/redirect',
+        successRedirect: '/api/update-name'
+      })(req, res, next);
+    }
+    next();
+  },
+  async (req, res, next)=>{
+    if (req.body) {
+      const {siteId, itemId, name} = req.body;
+      const resultObj = {success: '', message:''};
+      if (siteId && itemId && name) {
+          const options = {
+            headers: {
+              Authorization: `Bearer ${req.session.accessToken}`,
+            },
+          };
+          try{
+            await axios.patch(endPoint + "/sites/"+ siteId + "/drive/items/" + itemId, {name : name}, options);
+          }
+          catch(error) {
+            console.log(error.response.data.error); 
+            
+            resultObj.success = 'F';
+            resultObj.message = '선택하신 파일의 이름 변경 중 오류가 발생하였습니다.<br>' + error.response.data.error.message;
+            return res.json(resultObj);
+          }
+          resultObj.success = 'S';
+          resultObj.message = '선택하신 파일의 이름이 변경되었습니다.';
+          return res.json(resultObj);
+        }
+      }
+      else {
+        resultObj.success = 'F';
+        resultObj.message = '파라미터 정보를 확인해주세요.';
+        return res.json(resultObj);
+      }
+  })

BIN
src/static/images/folder-icon.png


+ 228 - 5
src/static/styles/custom.css

@@ -334,8 +334,8 @@ li {
   line-height: normal;
 }
 .modal .modal-box .modal-content {
-  padding: 0 50px;
-  height: calc(100% - 92px);
+  padding: 0 30px;
+  height: calc(100% - 102px);
   gap: 10px;
   display: flex;
   flex-direction: column;
@@ -345,7 +345,15 @@ li {
   width: 100%;
   height: 30px;
   padding: 5px;
+}
+
+.modal .modal-move-box {
+  
+}
 
+.modal .modal-box .modal-content input:focus{
+  border-color: #5b5fc7;
+  outline-color: #5b5fc7;
 }
 
 .modal .modal-box .button-box{
@@ -356,12 +364,13 @@ li {
   box-sizing: border-box;
   gap: 10px;
   height: 40px;
+  margin-bottom: 10px;
 }
 .modal .modal-box .button-box > div {
   padding: 5px 10px;
   border-radius: 5px;
-  border: 1px solid #b5b0b0;
-  background-color: #b5b0b0;
+  border: 1px solid #5b5fc7;
+  background-color: #5b5fc7;
   color: white;
   font-weight: bold;
 }
@@ -416,7 +425,7 @@ li {
   gap: 10px;
 }
 .panel-item.on {
-  cursor: text;
+  cursor: default;
   font-weight: bold;
 }
 
@@ -457,4 +466,218 @@ li {
   top: 50%;
   left: 50%;
   z-index: 100;
+}
+
+*{
+  margin: 0;
+  padding : 0;
+}
+html, body {
+  width: 100%;
+  height: 100%;
+}
+.modal.move {
+  display: flex;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(248, 246, 246, 0.4);;
+  align-items: center;
+  justify-content: center;
+  display: none;
+}
+.modal .modal-move-box {
+  width: 1080px;
+  height: 680px;
+  max-width: 100%;
+  max-height: 100%;
+  background-color: white;
+  display: flex;
+  border: 1px solid #eeeeee;
+  z-index: 88;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 16px 18px -4px;
+}
+.modal .modal-move-box .left-box .access-box{
+  width: 100%;
+  height: calc(100% - 86px);
+  padding-top : 16px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.modal .modal-move-box .left-box .my-file.on::before,
+.modal .modal-move-box .left-box .access-box .on::before{ 
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 28px;
+  border-radius: 4px;
+  background-color: #3d3e66;
+  margin-right: 10px;
+}
+.modal .modal-move-box .left-box .access-box .on {
+  font-weight: bold;
+}
+.modal .modal-move-box .left-box .access-box > div:hover { 
+  background-color: #eeeeee;
+}
+.modal .modal-move-box .left-box .access-box > div {
+  padding : 10px 0;
+  
+}
+.modal .modal-move-box .left-box .access-box > div:not(.access) {
+  cursor: pointer;
+}
+.modal .modal-move-box .left-box .access-box div > div {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.modal .modal-move-box .left-box .access-box div img {
+  margin-right: 10px;
+  margin-left: 15px;
+}
+.modal .modal-move-box .left-box .access{ 
+  height: 36px;
+  line-height: 32px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 14px;
+  padding: 0 16px 0 16px;
+  color: #616161;
+  font-weight: 600;
+}
+.modal .modal-move-box .left-box{
+  width: 25%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  border-right: 1px solid #eeeeee;
+  user-select: none;
+}
+
+.modal .modal-move-box .right-top-box{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  border-right: 1px solid #eeeeee;
+}
+.modal .modal-move-box .my-file {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.modal .modal-move-box .move_row {
+  display:  flex;
+  align-items: center;
+  border-bottom: 1px solid #eeeeee;
+  padding: 5 0;
+}
+.modal .modal-move-box .my-file:hover{
+  background-color: #eeeeee;
+}
+.modal .modal-move-box .my-file img {
+  margin-left: 10px;
+}
+.modal .modal-move-box .button-box {
+  padding: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.modal .modal-move-box .button-box > div {
+  min-width: 96px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  user-select: none;
+}
+.modal .modal-move-box .button-box > div:nth-child(1).off {
+  opacity: 0.5;
+  cursor: default;
+}
+.modal .modal-move-box .button-box > div:nth-child(1) {
+  background-color: #5b5fc7;
+  color: white;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px -0.75px;
+  cursor: pointer;
+}
+.modal .modal-move-box .button-box > div:nth-child(2) {
+  border: 1px solid rgb(209, 209, 209);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px -0.75px
+}
+.modal .modal-move-box .right-box {
+  width: 75%;
+  height: 100%;
+  user-select: none;
+}
+.modal .modal-move-box .right-box .content .list{
+  width: 100%;
+  height: calc(100% - 40px);
+}
+.modal .modal-move-box .right-box .content .header{
+  display:flex; 
+  width:100%; 
+  height: 40px; 
+  align-items:center;
+  border-bottom: 1px solid #eeeeee;
+}
+.modal .modal-move-box .right-box .content .header > div:nth-child(2) {
+  box-sizing: border-box;
+  width: 300px;
+  padding: 0 10px;
+}
+
+.modal .modal-move-box .right-box .content .header > div:nth-child(3) {
+  box-sizing: border-box;
+  width: 150px;
+  padding: 0 10px;
+}
+
+.modal .modal-move-box .right-box .content .header > div:nth-child(4) {
+  box-sizing: border-box;
+  width: 150px;
+  padding: 0 10px;
+}
+
+.modal .modal-move-box .right-box .content .header > div:nth-child(1) {
+  width: 40px;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+.modal .modal-move-box .right-box .content .header > div:not(:first-child) {
+  cursor: pointer;
+}
+.modal .modal-move-box .right-box .content .header > div:not(:first-child):after {
+  content: '';
+  background-image: url('/static/images/chevrondown.png');
+  width: 15px;
+  height: 15px;
+  margin-left: 5px;
+  display: inline-block;
+  background-size: 15px 15px;
+}
+.modal .modal-move-box .right-box .content{
+  width: 100%;
+  height: calc(100% - 141px);
+  border-bottom: 1px solid #eeeeee;
+  background-color: white;
+  padding: 0 10px;
+  box-sizing: border-box;
+  overflow: auto;
+  flex-direction: column;
+}
+.modal .modal-move-box .right-box .panel{
+  width: 100%;
+  height: 59px;
+  border-bottom: 1px solid #eeeeee;
+  align-items: center;
 }

+ 420 - 203
src/views/hello.html

@@ -84,10 +84,11 @@
     }).ajaxStop(()=>{
       $('#load').remove();
   });
+
   $(()=>{
     microsoftTeams.appInitialization.notifySuccess();
     getGroupList();
-
+    moveItem();
     window.oncontextmenu = function () {
         return false;
     };
@@ -95,107 +96,81 @@
       $('.click-menu').css('display', 'none');
     })
     
-
+    $('.file-content').on('click', function(event){
+      if (event.originalEvent.target === $('.file-content')[0]) {
+        $('.file-content input[type="checkbox"]').prop('checked', false);
+        $('.file-content > div.on').removeClass('on');
+      }
+    })
   });
   function openFolder(event) {
-    if (!$('.panel-item.on')[0]) return;
+    $('.upload-items').css('display', 'none');
+    if (!$('.panel-item.on')[0]) return alertMessage('폴더 업로드', '업로드할 그룹을 선택해 주세요.');
     $('#folder-upload').click();
   }
 
   function openFile(event) {
-    if (!$('.panel-item.on')[0]) return;
+    $('.upload-items').css('display', 'none');
+    if (!$('.panel-item.on')[0]) return alertMessage('파일 업로드', '업로드할 그룹을 선택해 주세요.');
     $('#file-upload').click();
   }
   function allSelect(event) {
     const isChecked = $(event.target).is(':checked');
     $('.file-content input[type="checkbox"]').prop('checked', isChecked);
+    let method = 'addClass';
+    if (!isChecked) {
+      method = 'removeClass';
+    }
+    $('.file-content > div')[method]('on');
   }
 
   function uploadFiles(event) {
     const files = event.target.files;
+    if (files.length === 0) return;
     const alertTitle = '파일 업로드';
-    _formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
-    if (files && files.length > 100) {
-      return alertMessage(alertTitle, '업로드 파일은 최대 100개 까지 가능합니다.<br>업로드 파일 수 : '+ files.length, null);
-    }
-    
-    let siteId = getSitesId();
-    
-    if (siteId === null) {
-      return alertMessage(alertTitle, '선택된 그룹 정보를 찾을 수 없습니다. 생성할 그룹을 선택해주세요.', null);
-    }
-          
-    const groupIndex = _listData.joinedTeams.teams.findIndex(obj => obj.sharePoint.siteId === siteId);
-    const pathArr = $('.panel').children();
-
-    if (groupIndex >= 0 && $('.panel').children().length === 1) {
-      return alertMessage(alertTitle,'채널에는 업로드 할 수 없습니다. 채널 리스트를 먼저 선택해 주세요.');
-    }
-
-    let sitePath = '/drive/root';
-    let filePath = '';
-    if (pathArr.length > 1) {
-      sitePath += ':';
-      for (let ii = 0; ii < pathArr.length; ii++) {
-        const path = pathArr.eq(ii).text();
-        if (ii !== 0 && path !== " > ") {
-          sitePath += "/" + path; 
-          filePath += "/" +path;
-        }
-      }
-    }
-    
+    const formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
     for (let file of files) {
-
       let fileName = file.name;
-      if (file.name.indexOf('.') > 0) {
-          fileName = file.name.substring(0, file.name.lastIndexOf('.'));
-      }
-      
-      _formData.append('file', file);
-      _formData.append(fileName + '_path', filePath);
+      formData.append('file', file);
     }
 
-    _formData.append('siteId', siteId);
-    _formData.append('path', sitePath);
-          // _formData.getAll()
-    // $('body').append(`<div id="load">
-    //   <img src="/static/images/Settings.gif" alt="loading">
-    // </div>`);
-
-    $.ajax({
-      method: 'post',
-      processData : false,
-      contentType : false,
-      data : _formData,
-      url : '/uploadItems',
-      success: (res) => {
-        // $('#load').remove();
-        let str = res.message;
-        
-        if (res.error) {
-          str += '<br>오류 : ' + res.error;
-        }
-
-        alertMessage(alertTitle, str, null);
-        const selectDrive = $('.panel-item.on');
-        selectDrive.removeClass('on');
-        selectDrive.click();
-        
-      },
-      error: (error) => {
-        // $('#load').remove();
-        alertMessage(alertTitle, error, null);
-        // console.log('==============error=============\n');
-        // console.log(error);
-      },
-      
-    });
-
+    upload(formData);
   }
+
   function uploadFolders(event) {
-    console.log(event);
-    event.file;
+    const srcEl = event.srcElement;
+    if (srcEl && srcEl.files) {
+      const files = srcEl.files;
+      if (files.length > 100) {
+        return alertMessage('폴더 업로드', '업로드 파일은 최대 100개 까지 가능합니다.<br>업로드 파일 수 : '+ files.length);
+      }
+      let folders = {};
+      const siteId = getSitesId();
+      let formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
+      for (let file of files) {
+        let path = file.webkitRelativePath;
+        path = path.substring(0, path.lastIndexOf('/'));
+        formData.append('file', file);
+        let filePath = path;
+        if (filePath.substring(0,1) !== '/' ) {
+          filePath = '/'+filePath;
+        }
+        formData.append(file.name + '_path', filePath);
+        if (!folders[path]) {
+          let name = path
+          if (name.lastIndexOf('/') > -1) {
+            name = name.substring(0, name.lastIndexOf('/'));
+          }
+          let folderPath = name;
+          if (folderPath === path) {
+            folderPath = "";
+          }
+          formData.append('folder', JSON.stringify({name : name, path : folderPath}));
+          folders[path] = true;
+        }
+      }
+      upload(formData);
+    }
   }
 
   function menuOpen(event, className) {
@@ -218,12 +193,12 @@
       $oneDriveBtn.text(text+'에서 열기');
       $oneDriveBtn.off('click');
       
+      if (parentData && parentData.webUrl) {
+        $oneDriveBtn.on('click', ()=>{
+          window.open(parentData.webUrl);
+        });
+      };
       if (jsonData && jsonData.value && jsonData.value.length > 0) {
-        if (jsonData.value[0].webUrl) {
-          $oneDriveBtn.on('click', ()=>{
-            window.open(jsonData.value[0].webUrl);
-          });
-        };
         _selectedData = jsonData;
         const selectedPref = _selectedData.value[0].parentReference;
         if (selectedPref && selectedPref.path) {
@@ -233,83 +208,14 @@
         let str = "";
           jsonData.value.forEach((obj, idx)=>{
             dragAndDrop();
-            let images = "/static/images/";
-            let imageName = "";
 
             let modifyName = "";
             if (obj.lastModifiedBy && obj.lastModifiedBy.user) {
               modifyName = obj.lastModifiedBy.user.displayName;
             }
-            if (obj.folder || obj.driveType) {
-              images += "folder.png";
-              imageName = "폴더 이미지";
-            }
-            else if (obj.file && obj.name) {
-              imageName = "파일 이미지";
-              let ext = obj.name.substring(obj.name.lastIndexOf('.') + 1);
-              let imageExt = ".svg";
-              //photo 
-              // if (obj.file.mimeType && obj.file.mimeType.includes('image')){
-              if (['psd', 'bmp', 'rle', 'dib', 'jpeg', 'jpg', 'gif', 'png', 'tiff', 'raw', 'ico'].includes(ext)){
-                ext = 'photo';
-              }
-              else if (['ai', 'eps', 'svg'].includes(ext)) {
-                ext = 'vector';
-              }
-              else if (['txt', 'properties'].includes(ext)) {
-                ext = 'txt';
-              }
-              else if (['pptx', 'ppt', 'pptm'].includes(ext)) {
-                ext = 'pptx';
-              }
-              else if (['xlsx', 'xlsm', 'xlsb', 'xltx'].includes(ext)) {
-                ext = 'xlsx';
-              }
-              else if (['pdf'].includes(ext)) {
-                ext = 'pdf';
-              }
-              else if (['doc', 'docx'].includes(ext)) {
-                ext = 'docx';
-              }
-              else if (['one', 'onetoc'].includes(ext)) {
-                ext = 'onetoc';
-              }
-              else if (['vsd', 'vdx', 'vdw', 'vstx', 'vstm', 'vst', 'vtx', 'vsdx'].includes(ext)) {
-                ext = 'vsdx';
-              }
-              else if (['zip', 'apk', 'rar', '7z', 'tar'].includes(ext)) {
-                ext = 'zip';
-              }
-              else if (['jsp', 'js', 'css', 'php', 'config', 'ini', 'yml', 'json'].includes(ext)) {
-                ext = 'code';
-              }
-              else if (['html'].includes(ext)) {
-                ext = 'html';
-              }
-              else if (['exe', 'msi'].includes(ext)) {
-                ext = 'exe';
-              }
-              else if (['jar', 'war', 'cab', 'dll', ].includes(ext)) {
-                ext = 'sysfile';
-              }
-              else if (['mp4', 'mov', 'Webm', 'mp3','wav', 'Ogg'].includes(ext)) {
-                ext = 'clipchamp';
-              }
-              else if (['bdf', 'chr', 'dfont', 'eot','etx', 'fnt', 'gdr', 'gf', 'mcf', 'xft', 'ttf', 'woff2',
-              'mf', 'otf', 'pfa', 'pfb', 'pfr', 'sfd', 'suit', 'tfm', 'ttc', 'vlw', 'woff', 'xfn'].includes(ext)) {
-                ext = 'font';
-              }
-              else if (['xml'].includes(ext)) {
-                ext = 'xml';
-              }
-              else {
-                ext = 'genericfile';
-              }
-              images += ext + imageExt;
-            }
-            else {
-              images += "genericfile.svg";
-            }
+            const imageData = getFileImage(obj);
+            const images = imageData[0];
+            const imageName = imageData[1];
             let amount = '0 Bytes';
             if (obj.size) {
               amount = getVolume(obj.size);
@@ -374,7 +280,7 @@
                   <div>탭으로 설정</div>
                   <div onclick="download()">다운로드</div>
                   <div onclick="deleteItem()">삭제</div>
-                  <div>이동</div>
+                  <div onclick="moveItem()">이동</div>
                   <div>복사</div>
                   <div onclick="nameChange()">이름 바꾸기</div>`;
               if (array && array.length > 0) {
@@ -427,6 +333,299 @@
         panel.html(panelStr);
     }
 
+    function getFileImage(obj) {
+      let images = "/static/images/";
+      let imageName = "";
+
+      if (obj.folder || obj.driveType) {
+        images += "folder.png";
+        imageName = "폴더 이미지";
+      }
+      else if (obj.file && obj.name) {
+        imageName = "파일 이미지";
+        let ext = obj.name.substring(obj.name.lastIndexOf('.') + 1);
+        let imageExt = ".svg";
+        //photo 
+        // if (obj.file.mimeType && obj.file.mimeType.includes('image')){
+        if (['psd', 'bmp', 'rle', 'dib', 'jpeg', 'jpg', 'gif', 'png', 'tiff', 'raw', 'ico'].includes(ext)){
+          ext = 'photo';
+        }
+        else if (['ai', 'eps', 'svg'].includes(ext)) {
+          ext = 'vector';
+        }
+        else if (['txt', 'properties'].includes(ext)) {
+          ext = 'txt';
+        }
+        else if (['pptx', 'ppt', 'pptm'].includes(ext)) {
+          ext = 'pptx';
+        }
+        else if (['xlsx', 'xlsm', 'xlsb', 'xltx'].includes(ext)) {
+          ext = 'xlsx';
+        }
+        else if (['pdf'].includes(ext)) {
+          ext = 'pdf';
+        }
+        else if (['doc', 'docx'].includes(ext)) {
+          ext = 'docx';
+        }
+        else if (['one', 'onetoc'].includes(ext)) {
+          ext = 'onetoc';
+        }
+        else if (['vsd', 'vdx', 'vdw', 'vstx', 'vstm', 'vst', 'vtx', 'vsdx'].includes(ext)) {
+          ext = 'vsdx';
+        }
+        else if (['zip', 'apk', 'rar', '7z', 'tar'].includes(ext)) {
+          ext = 'zip';
+        }
+        else if (['jsp', 'js', 'css', 'php', 'ini', 'yml', 'json', 'java', 'c', 'cpp', 'h', 'm', 'mm', 
+                  'pl', 'o', 'class', 'as', 'asp', 'cs', 'md'].includes(ext)) {
+          ext = 'code';
+        }
+        else if (['html'].includes(ext)) {
+          ext = 'html';
+        }
+        else if (['exe', 'msi'].includes(ext)) {
+          ext = 'exe';
+        }
+        else if (['jar', 'war', 'cab', 'dll', ].includes(ext)) {
+          ext = 'sysfile';
+        }
+        else if (['mp4', 'mov', 'Webm', 'mp3','wav', 'Ogg'].includes(ext)) {
+          ext = 'clipchamp';
+        }
+        else if (['bdf', 'chr', 'dfont', 'eot','etx', 'fnt', 'gdr', 'gf', 'mcf', 'xft', 'ttf', 'woff2',
+        'mf', 'otf', 'pfa', 'pfb', 'pfr', 'sfd', 'suit', 'tfm', 'ttc', 'vlw', 'woff', 'xfn'].includes(ext)) {
+          ext = 'font';
+        }
+        else if (['xml'].includes(ext)) {
+          ext = 'xml';
+        }
+        else {
+          ext = 'genericfile';
+        }
+        images += ext + imageExt;
+      }
+      else {
+        imageName = "파일 이미지";
+        images += 'genericfile.svg';
+      }
+
+      return [images, imageName];
+    }
+
+    function moveItem() {
+      const moveArr = $('.file-content div.on input[type="checkbox"]');
+      $.ajax({
+          method: 'post',
+          url : "/getGroupList",
+          success: (res)=> {
+            // drawList(res);
+            let oneDriveId = "";
+            if (res.oneDrive) {
+              oneDriveId = res.oneDrive.teams.sharePoint.siteId;
+            }
+            let str = `<div class="modal move" style="display: flex;">
+                          <div class="modal-move-box">
+                              <div class="left-box">
+                                  <h3 style="padding: 10px;">${moveArr.length}개 항목 이동</h3>
+                                  <div id="move_${oneDriveId}" class="my-file" onclick="setContent('${oneDriveId}', event)"><img src="/static/images/folder-icon.png" alt="폴더 이미지">&nbsp;&nbsp;내 파일</div>
+                                  <div class="">
+                                      <div></div>
+                                  </div>
+                                  <div class="access-box">
+                                      <div class="access">빠른 엑세스</div>`;
+                                      if (res) {
+                                        const {joinedTeams, oneDrive, sites} = res;
+                                        const groupImageUrl = '/_api/siteiconmanager/getsitelogo?type=1';
+                                        
+                                        if (joinedTeams.teams.length > 0) {
+                                          const jTeam = joinedTeams.teams;
+                                          jTeam.forEach((obj, idx)=>{
+                                            const share = obj.sharePoint;
+                                            let classNm = '';
+                                            if (idx === 0) {
+                                              classNm = 'on';
+                                            }
+                                            str += `<div id="move_${share.siteId}" class="${classNm}" onclick="setContent('${share.siteId}', event)">
+                                                      <div>
+                                                        <img width="25" height="25" src="${share.siteUrl}${groupImageUrl}" alt="아이콘">
+                                                        <div>${obj.displayName}</div>
+                                                      </div>
+                                                    </div>` 
+                                          });
+                                        }
+                                        
+                                        if (sites.teams) {
+                                            const sTeam = sites.teams;
+                                            const share = sTeam.sharePoint;
+                                            str += `<div id="move_${share.siteId}" onclick="setContent('${share.siteId}', event)">
+                                                      <div>
+                                                        <img width="25" height="25" src="${share.siteUrl + groupImageUrl}" alt="아이콘">
+                                                        <div>${sTeam.displayName}</div>
+                                                      </div>
+                                                    </div>` 
+                                        }
+                                      }
+                                      str +=`<div>
+                                          <div style="color: rgb(91, 95, 199); margin-left: 15px;">더 많은 장소...</div>
+                                      </div>
+                                  </div>
+                              </div>
+                              <div class="right-box">
+                                  <div class="panel"></div>
+                                  <div class="content">
+                                    <div class="header">
+                                      <div><img src="/static/images/file.png" width="20" alt="파일"></div>
+                                      <div>이름</div>
+                                      <div>수정된 날짜</div>
+                                      <div>수정한 사람</div>
+                                    </div>
+                                    <div class="list">
+                                    </div>
+                                  </div>
+                                  <div class="button-box">
+                                      <div id="move-btn" onclick="moveUpdate()">여기로 이동</div>
+                                      <div onclick="$('.modal').remove()">취소</div>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>`;
+            $('body').append($(str));
+            $('.access-box div.on').click();
+          },
+          error: (error)=> {
+            console.log(error);
+          }
+      })
+    }
+
+    function moveUpdate() {
+
+    }
+
+    function setContent(siteId, event) {
+      const selectEl = $('#move_' + siteId);
+      if (selectEl === $('.access-box .on')) {
+        return;
+      }
+
+      $('.access-box .on').removeClass('on');
+      selectEl.addClass('on');
+
+      callApi('get', '/sites/' + siteId +'/drive/root/children', (jsonData)=>{
+        const panel = $('.modal-move-box .right-box .panel');
+        const content = $('.modal-move .right-box .content');
+        const imgSrc = $('#move_' + siteId+ ' img').attr('src');
+        const text = $('#move_' + siteId).text().trim();
+        
+        let str = `<div class="panel-item on">`
+          if (text !== '내 파일') {
+            str +=`<img width="24" height="24" src="${imgSrc}" alt="아이콘">&nbsp;&nbsp;`
+          }
+            str +=`${text}</div>`;
+        const $list = $('.modal-move-box .right-box .content .list');
+        panel.html(str);
+        $list.empty();
+        //하위 파일들이 있는지 먼저 체크
+        if (jsonData && jsonData.value && jsonData.value.length > 0) {
+          const itemArray = jsonData.value;
+          if (itemArray.length > 0) {
+            let listStr = '';
+            itemArray.forEach((obj, idx)=>{
+              let isFolder = obj.folder;
+              let className = '';
+              let date = '-';
+              let name = '-';
+              let modifyName = '-';
+              if (!isFolder) {
+                className = 'off';
+              }
+
+              if (obj.name) {
+                name = obj.name;
+              }
+
+              if (obj.lastModifiedBy && obj.lastModifiedBy.user && obj.lastModifiedBy.user.displayName) {
+                modifyName = obj.lastModifiedBy.user.displayName;
+              }
+
+              if (obj.lastModifiedDateTime) {
+                date = obj.lastModifiedDateTime.substring(0, obj.lastModifiedDateTime.indexOf('T'));
+              }
+              console.log(date);
+
+              const imgData = getFileImage(obj);
+              listStr += `<div class="move_row row_${idx} ${className}">
+                            <div><img src="${imgData[0]}" alt="${imgData[1]}" width="25" height="25"></div>
+                            <div>${name}</div>
+                            <div>${date}</div>
+                            <div>${modifyName}</div>
+                          </div>`;
+              })
+              $list.html(listStr);
+          }
+          else {
+            $list.html(`<div class="empty-box">
+                          <img src="/static/images/empty_folder_v2.svg" alt="이미지">
+                          <div>이 폴더는 비어 있습니다.</div>
+                        </div>`);
+          }
+          // let firstFolder = "";
+
+          // //하위 파일들 중 첫번째 폴더 선택
+          // for (let item of itemArray) {
+          //   if (item.folder) {
+          //     firstFolder = item;
+          //     break;
+          //   }
+          // }
+
+          // if (firstFolder && firstFolder.folder.childCount) {
+          //     const id = firstFolder.id;
+          //     const name = firstFolder.name;
+          //     const parentPath = firstFolder.parentReference.path;
+          //     const path = parentPath + '/' + name;
+          //     str+= `<div> > </div><div class="panel-item on">${name}</div>`
+          //     panel.html(str);
+          //     drawMoveItems(siteId, path, id, itemArray);
+          // }
+          // else { // 없는 경우 빈폴더를 보여준다.
+          //   panel.html(str);  
+          //   const panelItem = panel.find('.panel-item');
+          //   panelItem.addClass('on');
+          //   panelItem.attr('onclick', '').unbind('click');
+          //   $list.html(`<div class="empty-box">
+          //                 <img src="/static/images/empty_folder_v2.svg" alt="이미지">
+          //                 <div>이 폴더는 비어 있습니다.</div>
+          //               </div>`);
+          // }
+        }
+        else {
+        
+          $list.html(`<div class="empty-box">
+                        <img src="/static/images/empty_folder_v2.svg" alt="이미지">
+                        <div>이 폴더는 비어 있습니다.</div>
+                      </div>`);
+        }
+      });
+    }
+
+    function drawMoveItems(siteId, path, id) {
+      callApi('get', '/sites/' +siteId +'/drive/items/' + id + '/children', (childrenData)=>{
+          const items = childrenData.value;
+          const $list = $('.modal-move-box .right-box .content .list');
+          console.log(items);
+          if (items && items.length > 0) {
+
+          }
+          else {
+            $list.html(`<div class="empty-box">
+                          <img src="/static/images/empty_folder_v2.svg" alt="이미지">
+                          <div>이 폴더는 비어 있습니다.</div>
+                        </div>`)
+          }
+      })
+    }
     //새로고침 이벤트
     function refreshDrive() {
         const selectedDrive = $('.panel-item.on');
@@ -436,6 +635,7 @@
         }
     }
 
+    //체크에 따른 css 적용
     function checkState(event){
       const $target = $(event.target);
       const $row = $('#'+$target.attr('name'));
@@ -501,8 +701,9 @@
       }
     }
 
+
+    //
     function getDrivePath() {
-      console.log($('.panel-item'));
       let path = '/drive/root';
       if ($('.panel-item').length > 1) {
         path += ':';
@@ -550,10 +751,9 @@
             else {
               let message = res.message;
               if (res.error) {
-                console.log(res.error);
                 message += '<br>' + res.error;
               }
-              alertMessage('다운로드',message);
+              alertMessage('다운로드', message);
             }
           },
           error : (error) => {
@@ -641,12 +841,18 @@
           const items = transfer.items;
           _formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
           await getFilesDataTransferItems(items);
-          const folders = _formData.getAll('folder');
-          const files = _formData.getAll('folder');
+          
+          upload(_formData);
+      });
+    }
+
+    function upload(formData) {
+          const folders = formData.getAll('folder');
+          const files = formData.getAll('file');
           const alertTitle = '파일 업로드';
+          if (folders.length === 0 && files.length === 0) return;
           if (folders && folders.length > 100) {
             return alertMessage(alertTitle, '업로드 폴더는 최대 100개 까지 가능합니다.<br>업로드 폴더 수 : '+ folders.length, null);
-            // return alert('업로드 폴더는 최대 100개 까지 가능합니다.\n업로드 폴더 수 : '+ folders.length);
           }
 
           if (files && files.length > 100) {
@@ -664,56 +870,35 @@
             return alertMessage(alertTitle,'채널에는 업로드 할 수 없습니다. 채널 리스트를 먼저 선택해 주세요.');
           }
 
-          let sitePath = '/drive/root';
-          if (pathArr.length > 1) {
-            sitePath += ':';
-            for (let ii = 0; ii < pathArr.length; ii++) {
-              const path = pathArr.eq(ii).text();
-              if (ii !== 0 && path !== " > ") {
-                sitePath += "/" + path; 
-              }
-            }
-          }
+          let sitePath = getDrivePath();
+
+          formData.append('siteId', siteId);
+          formData.append('path', sitePath);
 
-          _formData.append('siteId', siteId);
-          _formData.append('path', sitePath);
-          // $('body').append(`<div id="load">
-          //   <img src="/static/images/Settings.gif" alt="loading">
-          // </div>`)
           $.ajax({
             method: 'post',
             processData : false,
             contentType : false,
-            data : _formData,
+            data : formData,
             url : '/uploadItems',
             success: (res) => {
-              // $('#load').remove();
               let str = res.message;
+              console.log(res.error);
               if (res.error) {
-                str += '<br>오류 : ' + res.error;
+                str += '<br>오류 : ' + res.error.message;
               }
               alertMessage(alertTitle, str, null);
-              // alert(res.message);
-              // console.log(res.error);
               const selectDrive = $('.panel-item.on');
               selectDrive.removeClass('on');
               selectDrive.click();
               
             },
             error: (error) => {
-              // $('#load').remove();
+              console.log(error);
               alertMessage(alertTitle, error, null);
-              // console.log('==============error=============\n');
-              // console.log(error);
             },
             
           });
-            // const file = e.originalEvent.dataTransfer.files[0];
-            // encryptFile(file, driveId); 
-            // if (file && file.type.startsWith("image")) {
-            //     displayImage(file);  
-            // }
-      });
     }
 
     function alertMessage(title, message, color) {
@@ -795,9 +980,9 @@
           if (item.isFile) {
             item.file(file => {
               let fileName = file.name;
-              if (file.name.indexOf('.') > 0) {
-                fileName = file.name.substring(0, file.name.lastIndexOf('.'));
-              }
+              // if (file.name.indexOf('.') > 0) {
+              //   fileName = file.name.substring(0, file.name.lastIndexOf('.'));
+              // }
               let path = item.fullPath.substring(0, item.fullPath.lastIndexOf('/'));
               if (!path) {
                 path = '';
@@ -873,7 +1058,6 @@
           return;
         }
 
-        uploadFiles(driveId)
       }
     }
 
@@ -1067,7 +1251,6 @@
                 let siteId = team.sharePoint.siteId;
                 let path;
                 let imageUrl;
-                console.log(team.displayName);
                   str += `
                         <div id="${siteId}_li" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${team.displayName}', '${siteId}', event)">
                           <img width="24" height="24" src="${team.sharePoint.siteUrl}${groupImageUrl}" alt="그룹 이미지">&nbsp;${team.displayName}
@@ -1176,6 +1359,8 @@
     })
   }
 
+
+  //새폴더 생성
   function mkdir() {
     const modalContainer = $(
       `<div class="modal" style="display: flex;">
@@ -1227,9 +1412,9 @@
       ext = name.substring(name.lastIndexOf("."));
       width = 'calc(100% - 35px)';
     }
-    callApi('get', "/sites/"+ siteId + "/drive/items/" + itemId, (jsonData)=>{
-      console.log(jsonData);
-    })
+    // callApi('get', "/sites/"+ siteId + "/drive/items/" + itemId, (jsonData)=>{
+    //   console.log(jsonData);
+    // })
   
     const modalContainer = $(
       `<div class="modal" style="display: flex;">
@@ -1243,11 +1428,11 @@
               <div class="modal-content">
                 <div>이름</div>
                 <div style="display:flex; align-items:flex-end;">
-                  <input type="text" style="width:${width};" name="change_name" id="${itemId}" value="${inputVal}">&nbsp;${ext}
+                  <input type="text" style="width:${width};" name="change_name" id="${itemId}_input" value="${inputVal}">&nbsp;${ext}
                 </div>
               </div>
               <div class="button-box">
-                  <div class="name-btn">이름 바꾸기</div>
+                  <div class="name-btn" onclick="updateDriveItems('${siteId}','${itemId}')">이름 바꾸기</div>
                   <div class="cancel-btn" onclick="$('.modal').remove()">취소</div>
               </div>
           </div>
@@ -1255,4 +1440,36 @@
       $('body').append(modalContainer);
   }
 
+  function updateDriveItems(siteId, itemId) {
+    const input = $('#' + itemId + '_input');
+    console.log($('#' + itemId + '_input').val() , $('#' + itemId + '_input').parent().text().trim());
+    let name = input.val();
+    const ext = input.parent().text().trim();
+    if (ext) {
+      name += ext; 
+    }
+    
+    $.ajax({
+      method: 'post',
+      url : '/api/update-name',
+      data : {
+        siteId : siteId,
+        itemId : itemId,
+        name   : name,
+      },
+      success : (res)=> {
+          if (res.success === 'S') {
+            const selectDrive = $('.panel-item.on');
+            selectDrive.removeClass('on');
+            selectDrive.click();
+          }
+          alertMessage('이름 변경',res.message);
+      },
+      error : (error) => {
+          alertMessage('이름 변경','오류가 발생하였습니다.<br>'+ error);
+      }
+    })
+  }
+
+
 </script>