New uploader with cropper.

Fuck it taked my 4 hours.
2023-05-23 19:53:56 +03:00 · 2023-05-23 19:53:56 +03:00 · 14fe5d6dbb
parent 16a2504665
commit 14fe5d6dbb
6 changed files with 3665 additions and 17 deletions
--- a/README.md
+++ b/README.md
@ -70,6 +70,7 @@ Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn
 - give admin button, not is admin
 - edit user ++
 - rewrite main page, list new messages
+https://medium.com/@minhquocece/how-to-create-an-upload-avatar-feature-like-facebook-by-cropper-js-and-slider-879990fdce82

 ## Major Version History
 - V4: Caching
--- a/public/css/cropper.css
+++ b/public/css/cropper.css
@ -0,0 +1,304 @@
+/*!
+ * Cropper.js v1.5.12
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-06-12T08:00:11.623Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}
--- a/public/js/cropper.js
+++ b/public/js/cropper.js
--- a/routes/api/routes/users.js
+++ b/routes/api/routes/users.js
@ -84,6 +84,7 @@ const storage = multer.diskStorage({
        cb(null, './public/images/avatars')
    },
    filename: function (req, _file, cb) {
+        console.log(_file)
        cb(null, req.member.id + ".jpg")
    }
 })
@ -91,6 +92,7 @@ const storage = multer.diskStorage({
 const upload = multer({ storage })

 app.post("/:id/avatar", upload.single('avatar'), async (req, res) => {
+   
    const { member } = req;

    if (req.user.id !== member.id && !req.user.admin) return res.error(403, "You have not got permission for this.");
--- a/routes/register.js
+++ b/routes/register.js
@ -13,7 +13,7 @@ app.post("/", RL(24 * 60 * 60_000, 5), async (req, res) => {
    let { name, password, about, email } = req.body;

    if (!name || !password || !email) return res.error(400, "You forgot entering some values");
-    if (!email || !emailRegEx.test(email)) return res.error(400, "E-mail is not valid");
+    if (!emailRegEx.test(email)) return res.error(400, "E-mail is not valid");
    const { names } = req.app.get("limits");
    if (name.length < 3 || name.length > names) return res.error(400, "Name must be between 3 - 25 characters");
    if (password.length < 3 || password.length > names) return res.error(400, "Password must be between 3 - 25 characters");
--- a/views/avatar_upload.ejs
+++ b/views/avatar_upload.ejs
@ -4,27 +4,109 @@
 <%- include("extra/meta", {title: "Avatar Upload Panel!" }) %>

 <body style="text-align: center;">
+  <link rel="stylesheet" href="/css/cropper.css">
+  <style>
+    .container {
+      margin: 20px auto;
+      max-width: 640px;
+    }
+
+    img {
+      max-width: 100%;
+    }
+
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+
+    .cropper-view-box {
+      outline: 0;
+      box-shadow: 0 0 0 1px #39f;
+    }
+  </style>
+  <script src="/js/cropper.js"></script>
+
  <%- include("extra/navbar") %>
-  <h1>Upload avatar for <%= member.name %></h1>
-  <form>
-    <input type="file" name="avatar" /><br>
-    <input class="btn-primary" type="submit" value="Upload" />
-  </form>

+
+  <div class="container">
+    <h1>Upload avatar for <%= member.name %></h1>
+
+    <input type="file" id="file-input">
+    <img id="image" src="<%= member.avatar %>">
+    <p>
+      <button type="button" id="button">Upload</button>
+    </p>
+    <file id="cropped-image" name="avatar">
+      <form id="form"></form>
+
+  </div>
  <script>
-    const form = document.querySelector('form');
-    form.addEventListener('submit', async e => {
-      e.preventDefault();
+    function b64toBlob(b64Data, contentType = "", sliceSize = 512) {

-      const res = await fetch('/api/users/<%= member.id %>/avatar', {
-        method: 'POST',
-        body: new FormData(form)
-      })
-      if (res.error) return alert(res.error);
-      alert('Success!');
-      location.href = "/users/<%= member.id %>"
-    });
+      const byteCharacters = atob(b64Data);
+      const byteArrays = [];
+
+      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+        const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+        const byteNumbers = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++)
+          byteNumbers[i] = slice.charCodeAt(i);
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+      }
+      const blob = new Blob(byteArrays, {
+        type: contentType
+      });
+      return blob;
+    }
  </script>
+  <script>
+    const image = document.getElementById('image');
+    const button = document.getElementById('button');
+    const reader = new FileReader();
+
+    document.getElementById("file-input")
+      .addEventListener("change", function() {
+        reader.onload = () => {
+          image.src = reader.result;
+
+          let croppable = false;
+          const cropper = new Cropper(image, {
+            aspectRatio: 1,
+            viewMode: 1,
+            ready: function() {
+              croppable = true;
+            },
+          });
+
+          button.onclick = async () => {
+            if (!croppable) return;
+
+            const croppedCanvas = cropper.getCroppedCanvas();
+            const croppedImage = document.getElementById('cropped-image');
+            const body = new FormData(document.createElement('form'))
+            const block = croppedCanvas.toDataURL().split(";");
+            const contentType = block[0].split(":")[1];
+            const realData = block[1].split(",")[1];
+            body.append('avatar', b64toBlob(realData, contentType));
+
+            const res = await fetch('/api/users/<%= member.id %>/avatar', {
+              method: 'POST',
+              body
+            }).then(res => res.json());
+
+            if (res.error) return alert(res.error);
+            alert('Success!');
+            location.reload();
+          };
+        }
+        reader.readAsDataURL(event.target.files[0]);
+      });
+  </script>
+
  <%- include("extra/footer") %>

 </body>