gochan/gochan
1
0
Fork 0
mirror of https://github.com/Eggbertx/gochan.git synced 2025-08-02 10:56:25 -07:00
Code Releases Activity

Add clipboard uploading to the static post form

Browse source
This commit is contained in:
Eggbertx 2024-08-03 13:28:06 -07:00
parent 4770bf6cab
commit 662cca0273
3 changed files with 90 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/sass/global/_img.scss
View file

@ -74,20 +74,37 @@ table#pages td {
float: right;
}
div#new-upload-box {
div#upload-box {
background: #505050;
color: #b0b0b0;
a {
a.browse-text {
text-align: center;
padding: 20px 40px;
display: block;
}
.upload-preview {
max-width: 50px;
max-height: 50px;
.upload-x, .upload-filename {
position: relative;
bottom: 12px;
display: inline-block;
margin-left: 8px;
margin-right: 8px;
}
}
.upload-preview {
max-width: 50px;
max-height: 50px;
}
.placeholder-thumb {
width: 50px;
height: 50px;
background: #333;
border: 1px black solid;
margin: 4px;
display: inline-block;
}
.reply {
margin-bottom: 4px;
padding: 4px 8px 4px 8px;

71
frontend/ts/dom/uploaddata.ts
View file

@ -2,18 +2,12 @@ import $ from "jquery";
import { alertLightbox } from "./lightbox";
const uploadReader = new FileReader();
uploadReader.onload = onReaderLoad;
uploadReader.onerror = onReaderError;
const noop = () => {
return;
};
export function updateUploadImage($elem: JQuery<HTMLElement>, onLoad = noop) {
export function updateUploadImage($elem: JQuery<HTMLElement>, onLoad = () => {}) {
if($elem.length === 0) return;
$elem[0].onchange = function() {
const img = new Image();
img.src = URL.createObjectURL((this as any).files[0]);
img.src = URL.createObjectURL((this as HTMLInputElement).files[0]);
img.onload = onLoad;
};
}
@ -34,38 +28,69 @@ function dragAndDrop(e:JQuery.DragEnterEvent|JQuery.DragOverEvent|JQuery.DropEve
e.stopPropagation();
} else {
$browseBtn[0].files = e.originalEvent.dataTransfer.files;
uploadReader.readAsDataURL($browseBtn[0].files[0]);
addFileUpload($browseBtn[0].files[0]);
}
}
function onReaderLoad(e:ProgressEvent<FileReader>) {
function onReaderLoad(name:string, e:ProgressEvent<FileReader>) {
const base64Str = e.target.result.toString();
const isImage = base64Str.slice(5, 10) === "image";
const extPos = name.lastIndexOf(".");
const namePart = (extPos > 0)?name.substring(0, extPos):name;
const extPart = (extPos <= 0)?"":name.substring(extPos);
const maxLen = 20;
const nameShortened = namePart.substring(0, maxLen) + ((namePart.length > maxLen)?"…":"") + extPart;
const $container = ($("div#upload-box").children(".upload-preview-container").length > 0)?
$(".upload-preview-container"):
$("<div/>").addClass("upload-preview-container").appendTo("div#upload-box");
if(isImage) {
$("<img/>").attr({
$container.empty().append(
$("<a/>").attr({
"class": "upload-x",
"href": "javascript:;"
}).text("X").on("click", (e:JQuery.ClickEvent) => {
const $target = $(e.target);
const $browseBtn = $target.parents<HTMLInputElement>("#upload-box").siblings("input[name=imagefile]");
$browseBtn.each((_, el) => el.value = null);
$target.parents(".upload-preview-container").remove();
}),
isImage?$("<img/>").attr({
"class": "upload-preview",
"src": base64Str,
}).addClass("upload-preview").appendTo("div#new-upload-box");
}
}):$("<div/>").addClass("placeholder-thumb"),
$("<span/>").addClass("upload-filename").attr({title: name}).text(nameShortened)
);
}
function onReaderError(e:ProgressEvent<FileReader>) {
alertLightbox(`Unable to load file: ${e.target.error.message}`);
}
function onBrowseBtnChange(e:JQuery.ChangeEvent) {
uploadReader.readAsDataURL(e.target.files[0]);
function addFileUpload(file:File) {
const uploadReader = new FileReader();
uploadReader.onload = (e => onReaderLoad(file.name, e));
uploadReader.onerror = (e) => alertLightbox(`Unable to load file: ${e.target.error.message}`);
uploadReader.readAsDataURL(file);
}
$(() => {
const $browseBtn = $<HTMLInputElement>("input[name=imagefile]").hide();
if($browseBtn.length !== 1) return;
$browseBtn.on("change", onBrowseBtnChange);
$browseBtn.on("change", e => addFileUpload(e.target.files[0]));
$("<div/>").attr("id", "new-upload-box").append(
$("<a/>")
$("<div/>").attr("id", "upload-box").append(
$("<a/>").addClass("browse-text")
.attr("href", "javascript:;")
.text("Select/drop/paste upload here")
.on("click", () => $browseBtn.trigger("click"))
).on("dragenter dragover drop", dragAndDrop).insertBefore($browseBtn);
$("div#postbox-area form").on("paste", e => {
const clipboardData = (e.originalEvent as ClipboardEvent).clipboardData;
if(clipboardData.items.length < 1 || clipboardData.items[0].kind !== "file") {
console.log("No files in clipboard");
return;
}
const clipboardFile = clipboardData.items[0].getAsFile();
addFileUpload(clipboardFile);
$browseBtn[0].files = clipboardData.files;
});
});

23
html/css/global.css
View file

@ -74,20 +74,37 @@ table#pages td {
float: right;
}
div#new-upload-box {
div#upload-box {
background: #505050;
color: #b0b0b0;
}
div#new-upload-box a {
div#upload-box a.browse-text {
text-align: center;
padding: 20px 40px;
display: block;
}
div#new-upload-box .upload-preview {
div#upload-box .upload-x, div#upload-box .upload-filename {
position: relative;
bottom: 12px;
display: inline-block;
margin-left: 8px;
margin-right: 8px;
}
.upload-preview {
max-width: 50px;
max-height: 50px;
}
.placeholder-thumb {
width: 50px;
height: 50px;
background: #333;
border: 1px black solid;
margin: 4px;
display: inline-block;
}
.reply {
margin-bottom: 4px;
padding: 4px 8px 4px 8px;