210725 editing title/image and editor.js table

backstage/static/js/editor.js

@@ -7,12 +7,9 @@ aa = "";
 frontMatters = [];
 contentMatters = [];
 editorBlocks = [];
-//postData = { content: "", url: "" };
 var editor;
 axios.get(contentApiUrl).then(({ data }) => {
-  //alert(JSON.stringify(data[0]['content']));
-  aa = data[0]['content'];
-  const content = _.get(data, '0.content', '');
+  const content = data[0]['content'];
   var blockArray = [{ title: '', data: [] }];
   var blockCount = 0;
   blocks = parseMd(content);
@@ -20,24 +17,24 @@ axios.get(contentApiUrl).then(({ data }) => {
   editor_block = document.getElementById('editor_block');
   //alert(blocks[0]['text']);
 
-  ul = document.createElement('ul');
-  ul.id = "sortable";
+  //ul = document.createElement('ul');
+  //ul.id = "sortable";
   for (i = 0; i < blocks.length; i++) {
-    li = document.createElement('li');
-    odiv = document.createElement('div');
-    odiv.style.border = 'inset 1px gray';
+    //li = document.createElement('li');
+    //odiv = document.createElement('div');
+    //odiv.style.border = 'inset 1px gray';
     if (blocks[i]['type'] == "para") {
       editorBlocks.push({ type: "paragraph", data: { text: blocks[i]['text'] } });
-      tmp = document.createElement('textarea');
-      tmp.style.border = 'outset 5px pink';
-      tmp.style.width = '100%';
-      tmp.value = blocks[i]['text'];
-      odiv.appendChild(tmp);
+      //tmp = document.createElement('textarea');
+      //tmp.style.border = 'outset 5px pink';
+      //tmp.style.width = '100%';
+      //tmp.value = blocks[i]['text'];
+      //odiv.appendChild(tmp);
     }
     else if (blocks[i]['type'] == "br") {
       editorBlocks.push({ type: "paragraph", data: { text: "" } });
-      tmp = document.createElement('br');
-      odiv.appendChild(tmp);
+      //tmp = document.createElement('br');
+      //odiv.appendChild(tmp);
     }
     else if (blocks[i]['type'] == "img") {
       ampimg = blocks[i]['text'];
@@ -60,10 +57,10 @@ axios.get(contentApiUrl).then(({ data }) => {
         }
       });
       //alert(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8));
-      img = document.createElement('img');
-      img.style.width = '100%';
-      img.src = tmpsrc;
-      odiv.appendChild(img);
+      //img = document.createElement('img');
+      //img.style.width = '100%';
+      //img.src = tmpsrc;
+      //odiv.appendChild(img);
     }
     else if (blocks[i]['type'] == "youtube") {
       ampimg = blocks[i]['text'];
@@ -81,9 +78,9 @@ axios.get(contentApiUrl).then(({ data }) => {
     else if (blocks[i]['type'] == "title") {
       blocks[i]['text'] = blocks[i]['text'].replace("### **", "").replace("**", "")
       editorBlocks.push({ type: "header", data: { text: blocks[i]['text'] } });
-      tmp = document.createElement('h3');
-      tmp.innerHTML = blocks[i]['text'];
-      odiv.appendChild(tmp);
+      //tmp = document.createElement('h3');
+      //tmp.innerHTML = blocks[i]['text'];
+      //odiv.appendChild(tmp);
     }
     else if (blocks[i]['type'] == "hr") {
       //alert('yo');
@@ -93,14 +90,16 @@ axios.get(contentApiUrl).then(({ data }) => {
       //alert('yo');
       editorBlocks.push({ type: "delimiter", data: {} });
     }
-    li.appendChild(odiv);
-    ul.appendChild(li);
-
+    else if (blocks[i]['type'] == "table") {
+      //alert('yo');
+      editorBlocks.push({ type: "table", data: { content: tableTextToArray(blocks[i]['text'])} });
+    }
+    //li.appendChild(odiv);
+    //ul.appendChild(li);
   }
-  editor_block.appendChild(ul);
-  $("#sortable").sortable();
-  $("#sortable").disableSelection();
-
+  //editor_block.appendChild(ul);
+  //$("#sortable").sortable();
+  //$("#sortable").disableSelection();
   $("#editor_block").css({ "display": "none" });
 
   editor = new EditorJS({
@@ -147,7 +146,7 @@ axios.get(contentApiUrl).then(({ data }) => {
       //saveButton.click();
     },
     onChange: function (api, block) {
-      console.log('something changed', block);
+      //console.log('something changed', block);
     }
   });
 
@@ -162,7 +161,7 @@ axios.get(contentApiUrl).then(({ data }) => {
 submitButton.onclick = function () {
 
   editor.save().then((outputData) => {  
-    console.log('Article data: ', outputData);
+    //console.log('Article data: ', outputData);
 
     var mdContent = '';
     /*
@@ -215,6 +214,11 @@ submitButton.onclick = function () {
         + '"\n  height="' + block.data.height 
         + '">\n</amp-youtube>\n';
       }
+      else if (block.type == "table") {
+        //alert(tableArrayToHtml(block.data).length);
+        mdContent += '\n'+ tableArrayToHtml(block.data.content) +'\n'
+        //console.log(tableArrayToHtml(block.data.content));
+      }
     }
     //alert(mdContent);
 

backstage/static/js/yo.js

@@ -8,10 +8,11 @@ function parseMd(content) {
     var isAmpImgRange = false;
     var result = [];
 
-    var blocks = new Array();
+    var rblocks = new Array();
     lineIdx = 1;
     foundImg = false;
     foundYT = false;
+    foundTBL = false;
     crossLine = "";
 
     for (var line of content.split('\n')) {
@@ -19,19 +20,19 @@ function parseMd(content) {
         if (isNotFrontMatterCount < 2) {
             frontMatters.push(line)
             if (line.includes('title: ')) {
-                $('#ctitle').val(line.replace('title: ','').replaceAll('\"',''));
+                $('#ctitle').val(line.replace('title: ', '').replaceAll('\"', ''));
             }
             if (line.includes('date: ')) {
                 //alert(line);
-                $('#cdate').val(line.replace('date: ','').replaceAll('\"',''));
+                $('#cdate').val(line.replace('date: ', '').replaceAll('\"', ''));
             }
             if (line.includes('draft: ')) {
                 //alert(line);
-                $('#cdraft').val(line.replace('draft: ','').replaceAll('\"',''));
-                console.log($('#cdraft').val());
+                $('#cdraft').val(line.replace('draft: ', '').replaceAll('\"', ''));
+                //console.log($('#cdraft').val());
                 $('#cdraft').removeAttr('checked');
-                if($('#cdraft').val() == 'false')
-                    $('#cdraft').prop('checked',true);
+                if ($('#cdraft').val() == 'false')
+                    $('#cdraft').prop('checked', true);
                 /*
                 if($('#cdraft').val() == 'true') 
                     $('#cdraft').removeAttr('checked');
@@ -41,27 +42,27 @@ function parseMd(content) {
             }
             if (line.includes('type: ')) {
                 //alert(line);
-                $('#ctype').val(line.replace('type: ','').replaceAll('\"',''));
+                $('#ctype').val(line.replace('type: ', '').replaceAll('\"', ''));
             }
             if (line.includes('url: ')) {
                 //alert(line);
-                $('#curl').val(line.replace('url: ','').replaceAll('\"',''));
+                $('#curl').val(line.replace('url: ', '').replaceAll('\"', ''));
             }
             if (line.includes('image: ')) {
                 //alert(line);
-                $('#cimage').val(line.replace('image: ','').replaceAll('\"',''));
+                $('#cimage').val(line.replace('image: ', '').replaceAll('\"', ''));
             }
             if (line.includes('description: ')) {
                 //alert(line);
-                $('#cdescription').val(line.replace('description: ','').replaceAll('\"',''));
+                $('#cdescription').val(line.replace('description: ', '').replaceAll('\"', ''));
             }
             if (line.includes('weight: ')) {
                 //alert(line);
-                $('#cweight').val(line.replace('weight: ','').replaceAll('\"',''));
+                $('#cweight').val(line.replace('weight: ', '').replaceAll('\"', ''));
             }
             if (line.includes('tag: ')) {
                 //alert(line);
-                $('#ctag').val(line.replace('tag: ','').replaceAll('\"',''));
+                $('#ctag').val(line.replace('tag: ', '').replaceAll('\"', ''));
             }
 
             if (line.includes('---')) {
@@ -70,32 +71,31 @@ function parseMd(content) {
             continue;
         }
         contentMatters.push(line)
-/*         if (line.toString().trim() == "") {
-            blocks.push({ 'type': 'br', 'text': line });
-            continue;
-        } */
+        /*         if (line.toString().trim() == "") {
+                    rblocks.push({ 'type': 'br', 'text': line });
+                    continue;
+                } */
 
         if (line.includes('---')) {
-            blocks.push({ 'type': 'hr', 'text': line });
+            rblocks.push({ 'type': 'hr', 'text': line });
             continue;
         }
 
         if (line.includes('###')) {
-            blocks.push({ 'type': 'title', 'text': line });
+            rblocks.push({ 'type': 'title', 'text': line });
             continue;
         }
 
         if (line.includes('{{% chuz-div class=\"mt-5\" %}}')) {
-            blocks.push({ 'type': 'mt5', 'text': line });
+            rblocks.push({ 'type': 'mt5', 'text': line });
             continue;
         }
 
         if (line.includes('<amp-img') || foundImg) {
             crossLine += line;
             foundImg = true;
-            if (line.includes('</amp-img>'))
-            {
-                blocks.push({ 'type': 'img', 'text': crossLine });
+            if (line.includes('</amp-img>')) {
+                rblocks.push({ 'type': 'img', 'text': crossLine });
                 foundImg = false;
                 crossLine = "";
             }
@@ -105,19 +105,29 @@ function parseMd(content) {
         if (line.includes('<amp-youtube') || foundYT) {
             crossLine += line;
             foundYT = true;
-            if (line.includes('</amp-youtube>'))
-            {
-                blocks.push({ 'type': 'youtube', 'text': crossLine });
+            if (line.includes('</amp-youtube>')) {
+                rblocks.push({ 'type': 'youtube', 'text': crossLine });
                 foundYT = false;
                 crossLine = "";
             }
             continue;
         }
 
-        blocks.push({ 'type': 'para', 'text': line });
+        if (line.includes('<table') || foundTBL) {
+            crossLine += line;
+            foundTBL = true;
+            if (line.includes('</table>')) {
+                rblocks.push({ 'type': 'table', 'text': crossLine });
+                foundTBL = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        rblocks.push({ 'type': 'para', 'text': line });
     }
-    
-    return blocks
+
+    return rblocks
 }
 
 const parseTitle = line => {
@@ -149,15 +159,39 @@ const parseAmpImg = line => {
     }
 }
 
-class MDParser
-{
+function tableTextToArray(tableHtml) {
+    tbl = document.createElement('table');
+    tbl.innerHTML = tableHtml.replace('<table>', '').replace('</table>', '');
+    var tableInfo = Array.prototype.map.call(tbl.querySelectorAll('tr'), function (tr) {
+        return Array.prototype.map.call(tr.querySelectorAll('td'), function (td) {
+            return td.innerHTML;
+        });
+    });
+    return tableInfo;
+}
+
+function tableArrayToHtml(tableArray) {
+    tbl = document.createElement('table');
+    for (j = 0; j < tableArray.length; j++) {
+        tr = document.createElement('tr');
+        for (k = 0; k < tableArray[j].length; k++) {
+            td = document.createElement('td');
+            td.innerHTML = tableArray[j][k];
+            tr.appendChild(td);
+        }
+        tbl.appendChild(tr);
+    }
+    //alert(tbl.outerHTML.toString());
+    return tbl.outerHTML.toString();
+}
+
+class MDParser {
 
-    constructor(MDtext)
-    {
+    constructor(MDtext) {
         this.headerText = "";
         this.contentText = "";
         for (var line of MDtext.split('\n')) {
-            console.log(line);
+            //console.log(line);
         }
     }
 

backstage/templates/collections.html

@@ -8,7 +8,7 @@
         <td class="table__data">{{ collections[idx].title }}</td>
         <td class="table__data">{{ collections[idx].date }}</td>
         <!-- <td class="table__data">1</td> -->
-        <td class="table__data"><input type="checkbox" disabled {{ 'checked' if (collections[idx].draft.lower()=='false') }} /></td>
+        <td class="table__data"><input type="checkbox" {{ 'checked' if (collections[idx].draft.lower()=='false') }} onclick="toggleDraft(this,'{{ collections[idx].url }}');" /></td>
         <td>
           <div class="d-flex justify-content-center">
             <button class="btn btn_light mr-1" onclick="getHeader('{{ collections[idx].url }}');" ><b>主資訊</b> <i class="fas fa-pencil-alt"></i></button>

backstage/templates/editor.html

@@ -8,7 +8,7 @@
       <h3 class="h3 column__h3"><i class="fas fa-user-edit mr-1 mb-2"></i> 作品編輯</h3>
       <table class="table table-bordered">
         <tbody>
-          <tr>
+          <tr style='display: none;'>
             <td><h4>標題</h4></td>
             <td><input class="form-control" id="ctitle" type="text" /> <div class="mt-1 text-danger">(建議字數: 15字內)</div></td>
           </tr>

backstage/templates/tables/editor_table.html

@@ -27,29 +27,47 @@
 <div class="modal fade" id="myModal">
   <div class="modal-dialog">
     <div class="modal-content">
-    
+
       <div class="modal-header">
         <h4 class="modal-title">作品主資訊修改</h4>
         <button type="button" class="close" data-dismiss="modal">×</button>
       </div>
-      
+
       <div class="modal-body">
         <table class="table table-bordered">
           <tbody>
             <tr>
-              <td><h4>標題</h4></td>
-              <td><input class="form-control" id="ctitle" type="text" /> <div class="mt-1 text-danger">(建議字數: 15字內)</div></td>
+              <td>
+                <h4>標題</h4>
+              </td>
+              <td><input class="form-control" id="ctitle" type="text" />
+                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+              </td>
             </tr>
             <tr>
-              <td><h4>描述</h4></td>
-              <td><textarea class="form-control" rows="3" id="cdescription"></textarea> <div class="mt-1 text-danger">(建議字數: 50字內)</div></td>
+              <td>
+                <h4>圖片</h4>
+              </td>
+              <td><input class="form-control" id="cfile" type="file" /></td>
             </tr>
             <tr>
-              <td><h4>日期</h4></td>
+              <td>
+                <h4>描述</h4>
+              </td>
+              <td><textarea class="form-control" rows="3" id="cdescription"></textarea>
+                <div class="mt-1 text-danger">(建議字數: 50字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>日期</h4>
+              </td>
               <td><input class="form-control" id="cdate" type="text" /></td>
             </tr>
             <tr>
-              <td><h4>是否顯示</h4></td>
+              <td>
+                <h4>是否顯示</h4>
+              </td>
               <td><input id="cdraft" type="checkbox" checked="true" /></td>
             </tr>
           </tbody>
@@ -60,13 +78,13 @@
           <input id="cimage" type="text" /><br />
           <input id="cweight" type="text" /><br />
           <input id="ctag" type="text" /><br />
-        </div>        
+        </div>
       </div>
-      
+
       <div class="modal-footer">
         <button type="button" class="btn btn-danger" onclick="updateHeader();location.reload();">完成修改</button>
       </div>
-      
+
     </div>
   </div>
 </div>
@@ -84,51 +102,81 @@
   <button onclick="updateHeader();location.reload();">完成修改</button>
 </div> -->
 <script>
+  oTitle = "";
   editTarget = "";
   frontMatters = [];
   contentMatters = [];
   const contentApiUrl = `${PORTAL_SERVER}contents?url=`;
   function getHeader(url) {
     axios.get(contentApiUrl + url).then(({ data }) => {
+      frontMatters = [];
+      contentMatters = [];
       aa = data[0]['content'];
       const content = _.get(data, '0.content', '');
-      blocks = parseMd(content);
+      blocks = parseMd(aa);
+      oTitle = $("#ctitle").val();
       // $("#dialog-form").dialog();
       $("#myModal").modal();
       editTarget = url;
       //console.log(frontMatters);
     });
   }
+  function toggleDraft(obj, url) {
+    axios.get(contentApiUrl + url).then(({ data }) => {
+      frontMatters = [];
+      contentMatters = [];
+      aa = data[0]['content'];
+      const content = _.get(data, '0.content', '');
+      blocks = parseMd(aa);
+      editTarget = url;
+      $('#cdraft').removeAttr('checked');
+      $('#cdraft').prop('checked', obj.checked);
+      updateHeader();
+    });
+  }
   function updateHeader() {
-
     mdContent = "";
     mdContent += '---\n';
     mdContent += 'title: "' + $('#ctitle').val() + '"\n';
     mdContent += 'date: ' + $('#cdate').val() + '\n';
-    mdContent += 'draft: ' + (!$("#cdraft").is(':checked')).toString() + '\n';
+    mdContent += 'draft: ' + (!$('#cdraft').is(':checked')) + '\n';
     mdContent += 'type: "' + $('#ctype').val() + '"\n';
     mdContent += 'url: "' + $('#curl').val() + '"\n';
+    //mdContent += 'url: "' + $('#curl').val() + '"\n';
     mdContent += 'image: "' + $('#cimage').val() + '"\n';
     mdContent += 'description: "' + $('#cdescription').val() + '"\n';
-    mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val())+ '\n';
+    mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
     mdContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
     mdContent += '---\n';
     mdContent += contentMatters.join("\n");
     //console.log(contentMatters);
-    postData = {
-      content: mdContent,
-      url: editTarget
-    };
-    //console.log(mdContent);
-    axios.post(contentApiUrl + editTarget, json = postData);
-  }
-  function htmlDecode(input) {
-    var e = document.createElement('textarea');
-    e.innerHTML = input;
-    // handle case of empty input
-    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
+
+    var formData = new FormData();
+    var imagefile = document.querySelector('#cfile');
+    formData.append("image", imagefile.files[0]);
+    axios.post('/backstage/upload/title', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(({ data }) => {
+      if (data.success == "1") {
+        mdContent = mdContent.replace($('#cimage').val(), '/img/collection/' + data.file.url.substring(data.file.url.lastIndexOf('/')+1));
+        //alert(data.file.url.substring(data.file.url.lastIndexOf('/')+1));
+      }
+      if (oTitle != $('#ctitle').val() && $('#ctitle').val() != "" && oTitle != "") {
+        axios.get('/backstage/modTitle/' + oTitle + '/' + $('#ctitle').val())
+        oTitle = $('#ctitle').val();
+      }
+      postData = {
+        content: mdContent,
+        url: editTarget
+      };
+      //console.log(mdContent);
+      axios.post(contentApiUrl + editTarget, json = postData);
+    });
   }
 
+
   $(function () {
 
     $("#dialog-form").hide();

backstage/upload/routes.py

@@ -1,5 +1,6 @@
 from backstage.config import UPLOAD_PATH_MAP
 import os
+import shutil
 from flask import render_template, Blueprint, request, redirect, url_for
 import flask
 from flask_cors import CORS, cross_origin
@@ -27,64 +28,70 @@ def upload_post(filepath):
         """ if 'file' not in request.files:
             #flash('No file part')
             return redirect(request.url) """
-
-        file = request.files['image']
-
-        # If the user does not select a file, the browser submits an
-        # empty file without a filename.
-        """ if file.filename == '':
-            #flash('No selected file')
-            return redirect(request.url) """
-
-        if file:
-            #filename = secure_filename(file.filename)
-
-            #fname = str(uuid.uuid4()) + file.filename[file.filename.rfind("."):]
-            #sitepath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "/img/"
-            sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
-            oimgtype = file.filename[file.filename.rfind(".")+1:]
-            oimgtypeName = oimgtype
-            if oimgtype.lower() == 'jpg':
-                oimgtypeName = 'jpeg'
-
-            wfname = str(uuid.uuid4()) + ".webp"
-            owfname = wfname.replace('webp', oimgtype)
-            #fullpath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "\\img\\" + fname
-            #print(UPLOAD_PATH_MAP[0][1] + filepath[filepath.rfind("/")+1:] + "/img/" + fname)
-            # file.save(fullpath)
-            #image_object = Image.open(fullpath)
-            #print(request.args.get('url', type=str))
-            wpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/"
-            owpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/orig/"
-            #fullpath = wpath + fname
-            if not os.path.exists(wpath):
-                os.makedirs(wpath)
-            if not os.path.exists(owpath):
-                os.makedirs(owpath)
-            if not os.path.exists(sitepath):
-                os.makedirs(sitepath)
-            # file.save(fullpath)
-            image_object = Image.open(file)
-            image_object.save(owpath+owfname, oimgtypeName)
-            if image_object.size[0] > 1000:
-                image_object.thumbnail(size=((800, 800)))
-            image_object.save(wpath+wfname, 'webp')
-            image_object.save(sitepath+wfname, 'webp')
-            #file.save(os.getcwd()+ "/backstage/upload/img/"+ fname)
-            # return redirect(url_for('download_file', name=file.filename))
-            aa = {"success": 1, "file": {"url": "/backstage/upload/" +
-                                         filepath+"/img/" + wfname, "width": image_object.width, "height": image_object.height}}
-            # aa = {"success": 1, "file": {"url": UPLOAD_PATH_MAP[0][1] + filepath[filepath.rfind(
-            #    "/")+1:] + "/img/" + fname, "width": image_object.width, "height": image_object.height}}
+        if len(request.files) == 0:
+            aa = {"success": 0}
             return aa
-    if request.method == 'GET':
-        print('GET')
-        # print(request.files)
-        # print(request.form)
-
-    # print(requests.post("/backstage/upload"))
-    aa = {"success": 1, "file": {"url": "http://www.choozmo.com/images/logo%20%281%29.webp", }}
-    return aa
+        else:
+            file = request.files['image']
+
+            # If the user does not select a file, the browser submits an
+            # empty file without a filename.
+            """ if file.filename == '':
+                #flash('No selected file')
+                return redirect(request.url) """
+
+            if file:
+                #filename = secure_filename(file.filename)
+
+                #fname = str(uuid.uuid4()) + file.filename[file.filename.rfind("."):]
+                #sitepath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "/img/"
+                if filepath == "title":
+                    sitepath = UPLOAD_PATH_MAP[0][0] + "../static/img/collection/"
+                else:
+                    sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
+                oimgtype = file.filename[file.filename.rfind(".")+1:]
+                oimgtypeName = oimgtype
+                if oimgtype.lower() == 'jpg':
+                    oimgtypeName = 'jpeg'
+
+                wfname = str(uuid.uuid4()) + ".webp"
+                owfname = wfname.replace('webp', oimgtype)
+                #fullpath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "\\img\\" + fname
+                #print(UPLOAD_PATH_MAP[0][1] + filepath[filepath.rfind("/")+1:] + "/img/" + fname)
+                # file.save(fullpath)
+                #image_object = Image.open(fullpath)
+                #print(request.args.get('url', type=str))
+                wpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/"
+                owpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/orig/"
+                #fullpath = wpath + fname
+                if not os.path.exists(wpath):
+                    os.makedirs(wpath)
+                if not os.path.exists(owpath):
+                    os.makedirs(owpath)
+                if not os.path.exists(sitepath):
+                    os.makedirs(sitepath)
+                # file.save(fullpath)
+                image_object = Image.open(file)
+                image_object.save(owpath+owfname, oimgtypeName)
+                if image_object.size[0] > 1000:
+                    image_object.thumbnail(size=((1600, 1600)))
+                image_object.save(wpath+wfname, 'webp')
+                image_object.save(sitepath+wfname, 'webp')
+                #file.save(os.getcwd()+ "/backstage/upload/img/"+ fname)
+                # return redirect(url_for('download_file', name=file.filename))
+                aa = {"success": 1, "file": {"url": "/backstage/upload/" +
+                                             filepath+"/img/" + wfname, "width": image_object.width, "height": image_object.height}}
+                # aa = {"success": 1, "file": {"url": UPLOAD_PATH_MAP[0][1] + filepath[filepath.rfind(
+                #    "/")+1:] + "/img/" + fname, "width": image_object.width, "height": image_object.height}}
+                return aa
+        if request.method == 'GET':
+            print('GET')
+            # print(request.files)
+            # print(request.form)
+
+        # print(requests.post("/backstage/upload"))
+        aa = {"success": 1, "file": {"url": "http://www.choozmo.com/images/logo%20%281%29.webp", }}
+        return aa
 
 
 @upload_app.route('/backstage/upload/<path:filepath>', methods=['GET'])
@@ -140,3 +147,16 @@ def get_image(filepath):
     aa = {"success": 1, "file": {"url": "/backstage/upload/" +
                                  filepath+"/img/" + wfname, "width": image_object.width, "height": image_object.height}}
     return aa
+
+
+@upload_app.route('/backstage/modTitle/<path:filepath>', methods=['GET'])
+def modify_title(filepath):
+    oldPath = UPLOAD_PATH_MAP[0][0] + filepath.split('/')[0]
+    newPath = UPLOAD_PATH_MAP[0][0] + filepath.split('/')[1]
+    # os.renames(oldPath,newPath)
+    shutil.copytree(oldPath, newPath)
+    shutil.rmtree(oldPath)
+    print(oldPath)
+    print(newPath)
+
+    return {}