mirror of
https://github.com/Akif9748/akf-forum.git
synced 2024-11-22 12:00:41 +03:00
New uploader with cropper.
Fuck it taked my 4 hours.
This commit is contained in:
parent
16a2504665
commit
14fe5d6dbb
6 changed files with 3665 additions and 17 deletions
|
|
@ -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
|
||||
|
|
|
|||
304
public/css/cropper.css
Normal file
304
public/css/cropper.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
3259
public/js/cropper.js
Normal file
3259
public/js/cropper.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -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.");
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue