210705 upload image / convert to webp backend

backstage/static/js/editor.js

@@ -41,7 +41,8 @@ axios.get(contentApiUrl).then(({ data }) => {
       ampimg = blocks[i]['text'];
       //alert(ampimg.indexOf("width=\"",84));
       //alert(ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5));
-      tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf(".webp") - ampimg.indexOf("src=\""));
+      tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+      //tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.lastIndexOf(".") - ampimg.indexOf("src=\"") -1);
       //tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf(".webp") - ampimg.indexOf("src=\""));
       editorBlocks.push({
         type: "image", data: {
@@ -69,6 +70,10 @@ axios.get(contentApiUrl).then(({ data }) => {
       tmp.innerHTML = blocks[i]['text'];
       odiv.appendChild(tmp);
     }
+    else if (blocks[i]['type'] == "hr") {
+      //alert('yo');
+      editorBlocks.push({ type: "paragraph", data: { text: "<hr>" } });
+    }
     else if (blocks[i]['type'] == "mt5") {
       //alert('yo');
       editorBlocks.push({ type: "delimiter", data: {} });
@@ -99,64 +104,18 @@ axios.get(contentApiUrl).then(({ data }) => {
         class: ImageTool,
         config: {
           endpoints: {
-            byFile: '/backstage/upload', // Your backend file uploader endpoint
-            byUrl: '/backstage/getimage', // Your endpoint that provides uploading by Url
+            byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url, // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url, // Your endpoint that provides uploading by Url
           }
         }
       }
       ,
+      code: CodeTool,
       delimiter: Delimiter
     }
     ,
     data: { blocks: editorBlocks }
     ,
-    /*
-    data: {
-      blocks: [
-        {
-          type: "header",
-          data: {
-            text: "Editor.js",
-            level: 2
-          }
-        },
-        {
-          type: "header",
-          data: {
-            text: "Key features",
-            level: 3
-          }
-        },
-        {
-          type: "header",
-          data: {
-            text: "What does it mean «block-styled editor»",
-            level: 3
-          }
-        },
-        {
-          type: 'paragraph',
-          data: {
-            text: `There are dozens of <a href="https://github.com/editor-js">ready-to-use Blocks</a> and the <a href="https://editorjs.io/creating-a-block-tool">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.`
-          }
-        },
-        {
-          type: 'delimiter',
-          data: {}
-        },
-        {
-          type: 'image',
-          data: {
-            url: 'http://localhost:1313/img/logo2.png',
-            caption: '',
-            stretched: false,
-            withBorder: true,
-            withBackground: false,
-          }
-        },
-      ]
-    },*/
-
     onReady: function () {
       //saveButton.click();
     },
@@ -192,9 +151,15 @@ submitButton.onclick = function () {
       else if (block.type == "paragraph") {
         mdContent += '\n' + block.data.text + '\n';
       }
+      else if (block.type == "hr") {
+        mdContent += '\n---\n';
+      }
       else if (block.type == "image") {
+        console.log(block.data.file.url);
+        console.log(JSON.parse(document.getElementById('url').textContent).url);
+        iurl = block.data.file.url.split('/');
         mdContent += '\n<amp-img\n  alt="' + block.data.caption
-          + '"\n  src="' + block.data.file.url.replace(BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/', '')
+          + '"\n  src="' + iurl[iurl.length - 2] + '/' + iurl[iurl.length - 1]
           + '"\n  height="' + block.data.file.height
           + '"\n  width="' + block.data.file.width
           + '"\n  layout="responsive">\n</amp-img>\n';
@@ -225,35 +190,35 @@ submitButton.onclick = function () {
       {
         alert(eBlock.type);
       } */
-
-  for (var idx = 0; idx < blockArray.length; idx++) {
-    if (_.get(blockArray[idx], 'title', '').includes('敘述')) {
-      mdContent += `\n<!-- ### **${_.get(blockArray[idx], 'title', '')}**-->\n`
-    } else {
-      mdContent += `\n### **${_.get(blockArray[idx], 'title', '')}**\n`
-    }
-    for (var data of _.get(blockArray[idx], 'data', [])) {
-      if (_.get(_.keys(data), 0) === 'description') {
-        if (_.get(data, 'description.text', '').includes('\n')) {
-          for (const line of _.get(data, 'description.text', '').split('\n')) {
-            mdContent += `\n${line}    `;
-          }
-        } else {
-          mdContent += `\n${_.get(data, 'description.text', '')}`;
-        }
-      } else if (_.get(_.keys(data), 0) === 'image') {
-        ampImgForm = `\n<amp-img\
+  /* 
+for (var idx = 0; idx < blockArray.length; idx++) {
+ if (_.get(blockArray[idx], 'title', '').includes('敘述')) {
+   mdContent += `\n<!-- ### **${_.get(blockArray[idx], 'title', '')}**-->\n`
+ } else {
+   mdContent += `\n### **${_.get(blockArray[idx], 'title', '')}**\n`
+ }
+ for (var data of _.get(blockArray[idx], 'data', [])) {
+   if (_.get(_.keys(data), 0) === 'description') {
+     if (_.get(data, 'description.text', '').includes('\n')) {
+       for (const line of _.get(data, 'description.text', '').split('\n')) {
+         mdContent += `\n${line}    `;
+       }
+     } else {
+       mdContent += `\n${_.get(data, 'description.text', '')}`;
+     }
+   } else if (_.get(_.keys(data), 0) === 'image') {
+     ampImgForm = `\n<amp-img\
 \n  alt="${_.get(data, 'image.alt', '小寶優居')}"\
 \n  src="${_.get(data, 'image.src', '')}"\
 \n  height="${_.get(data, 'image.height', 300)}"\
 \n  width="${_.get(data, 'image.width', 400)}"\
 \n  layout="${_.get(data, 'image.layout', 'responsive')}">\
 \n</amp-img>\n`;
-        mdContent += ampImgForm;
-      }
-    }
-  }
-
+     mdContent += ampImgForm;
+   }
+ }
+}
+*/
   /* const postData = {
     content: mdContent,
     url: (JSON.parse(document.getElementById('url').textContent)).url

backstage/static/js/yo.js

@@ -28,6 +28,11 @@ function parseMd(content) {
             continue;
         } */
 
+        if (line.includes('---')) {
+            blocks.push({ 'type': 'hr', 'text': line });
+            continue;
+        }
+
         if (line.includes('###')) {
             blocks.push({ 'type': 'title', 'text': line });
             continue;

backstage/templates/editor.html

@@ -39,6 +39,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
 
 <script type="text/javascript" src="{{url_for('static', filename='js/yo.js')}}"></script>
 <script type="text/javascript" src="{{url_for('static', filename='js/editor.js')}}"></script>

backstage/upload/routes.py

@@ -1,5 +1,7 @@
+from backstage.config import PORTAL_SERVER, BHOUSE_SERVER
 import os
 from flask import render_template, Blueprint, request, redirect, url_for
+import flask
 from flask_cors import CORS, cross_origin
 from flask.helpers import make_response, send_file, send_from_directory
 from werkzeug.wrappers import Response
@@ -8,72 +10,130 @@ from PIL import Image
 from urllib.parse import urlparse
 import uuid
 
+UPLOAD_PATH_MAP = [["C:\\Users\\yukyo\\Desktop\\bhouseWeb\\content\\規劃作品集\\",
+                    "http://localhost:1313/collection/"]]
+
 #from backstage.utils.routes import update_manage_table
-from backstage.config import PORTAL_SERVER, BHOUSE_SERVER
 
 upload_app = Blueprint('upload', __name__)
 
 
-@upload_app.route('/backstage/upload', methods=['POST','GET'])
-def upload_post():
+@upload_app.route('/backstage/upload/<path:filepath>', methods=['POST'])
+def upload_post(filepath):
     #bdata = request.stream.read()
     #aa = request.get_data()
     if request.method == 'POST':
-        
+
         # check if the post request has the file part
-        #print(request.files)
+        # print(request.full_path)
         """ if 'file' not in request.files:
             #flash('No file part')
             return redirect(request.url) """
-        
-        #print(request.get_data())
+
         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)
-            #print('1')
-            fname = str(uuid.uuid4()) + file.filename[file.filename.rfind("."):]
-            file.save(os.getcwd()+ "/backstage/upload/img/"+ fname)
-            #return redirect(url_for('download_file', name=file.filename))    
-            aa = {"success" : 1,"file": { "url" : "/backstage/upload/"+ fname, } }
+
+            #fname = str(uuid.uuid4()) + file.filename[file.filename.rfind("."):]
+            sitepath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "/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[filepath.rfind("/")+1:]+"/img/"
+            owpath = os.getcwd() + "/backstage/upload/" + filepath[filepath.rfind("/")+1:]+"/img/orig/"
+            #fullpath = wpath + fname
+            if not os.path.exists(wpath):
+                os.makedirs(wpath)
+            if not os.path.exists(owpath):
+                os.makedirs(owpath)
+            #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[filepath.rfind("/")+1:]+"/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", } }
+        # 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/<filename>', methods=['GET'])
-def upload_get(filename):
-    #print(filename)
+
+@upload_app.route('/backstage/upload/<path:filepath>', methods=['GET'])
+def upload_get(filepath):
+    # print(filepath)
+    #print(os.getcwd() + "/backstage/upload/"+filepath, filepath[filepath.rfind("/")+1:])
     #aa = {"success" : 1,"file": { "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg", } }
-    #return redirect(url_for('upload.upload_get',filename=filename), code=301)
-    return send_from_directory(os.getcwd()+ "/backstage/upload/img" , filename)
+    # return redirect(url_for('upload.upload_get',filename=filename), code=301)
+    # return send_from_directory(os.getcwd() + "/backstage/upload/"+filepath, filepath[filepath.rfind("/")+1:])
+     
+    return send_file(os.getcwd() + "/backstage/upload/"+filepath)
+
 
-@upload_app.route('/backstage/getimage', methods=['POST','GET'])
-def get_image():
+@upload_app.route('/backstage/getimage/<path:filepath>', methods=['POST', 'GET'])
+def get_image(filepath):
 
-    print(request.get_json()['url'])
-    fname = str(uuid.uuid4()) + str(request.get_json()['url'])[str(request.get_json()['url']).rfind("."):]
-    f = open(os.getcwd()+ "/backstage/upload/img/" + fname,'wb')
+    #print(request.get_json()['url'])
+    sitepath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "/img/"
+    oimgtype = str(request.get_json()['url'])[str(request.get_json()['url']).rfind(".")+1:]
+    oimgtypeName = oimgtype
+    if oimgtype.lower() == 'jpg':
+       oimgtypeName = 'jpeg'
+    #fname = str(uuid.uuid4()) + str(request.get_json()
+    #                                ['url'])[str(request.get_json()['url']).rfind("."):]
+    wfname = str(uuid.uuid4()) + ".webp"
+    owfname = wfname.replace('webp',oimgtype)
+    wpath = os.getcwd() + "/backstage/upload/" + filepath[filepath.rfind("/")+1:]+"/img/"
+    owpath = os.getcwd() + "/backstage/upload/" + filepath[filepath.rfind("/")+1:]+"/img/orig/"
+    """ fullpath = wpath + fname
+    if not os.path.exists(wpath):
+        os.makedirs(wpath)
+    f = open(fullpath, 'wb')
     f.write(requests.get(request.get_json()['url']).content)
-    f.close()
-    
-    #image_object = Image.open(os.getcwd()+ "/backstage/upload/tmp")
-    #send_file() 
+    f.close() """
+    if not os.path.exists(wpath):
+        os.makedirs(wpath)
+    if not os.path.exists(owpath):
+        os.makedirs(owpath)
+    image_object = Image.open(requests.get(request.get_json()['url'],stream=True).raw)
+    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')
+    # send_file()
     #aa = {"success" : 1,"file": { "url" : "http://localhost:9000/backstage/upload/avatar1.jpg", } }
     #resp = make_response(open(os.getcwd()+ "/backstage/upload/" + fname, 'br').read(), 301)
     #resp.content_type = "image/jpeg"
     #resp.content_encoding = "Unicode"
-    #return redirect(request.get_json()['url'], code=301)
-    aa = {"success" : 1,"file": { "url" : "/backstage/upload/"+ fname , } }
-    return aa
+    # return redirect(request.get_json()['url'], code=301)
+    aa = {"success": 1, "file": {"url": "/backstage/upload/" +
+                                 filepath[filepath.rfind("/")+1:]+"/img/" + wfname, "width": image_object.width, "height": image_object.height}}
+    return aa