Compare commits
No commits in common. "master" and "imgpaste-0.1" have entirely different histories.
master
...
imgpaste-0
13
LICENSE
13
LICENSE
|
|
@ -1,13 +0,0 @@
|
|||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
Version 2, December 2004
|
||||
|
||||
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim or modified
|
||||
copies of this license document, and changing it is allowed as long
|
||||
as the name is changed.
|
||||
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. You just DO WHAT THE FUCK YOU WANT TO.
|
||||
|
|
@ -3,15 +3,9 @@
|
|||
// Title
|
||||
$title = "imgpaste by gideonstar";
|
||||
|
||||
// Dropzone text
|
||||
// Displayed text
|
||||
$text = "Click or drop image here...";
|
||||
|
||||
// Footer text
|
||||
$footer = '<a href="https://git.stefanritter.de/gideonstar/imgpaste.git">imgpaste</a> by gideonstar';
|
||||
|
||||
// Themes can be found in the themes directory
|
||||
$theme = "gideonstar";
|
||||
|
||||
// Writeable directory for images. Will be created if it does not exist.
|
||||
$datadir = "i";
|
||||
|
||||
|
|
|
|||
|
|
@ -13,14 +13,13 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><?php echo $title; ?></title>
|
||||
<link rel="stylesheet" href="themes/<?php echo $theme; ?>/style.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<div id="dropzone" class="inactive">
|
||||
<div id="dropzone" class="nodrop">
|
||||
<p><?php echo $text; ?></p>
|
||||
</div>
|
||||
<div id="footer"><?php echo $footer; ?></div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
37
script.js
37
script.js
|
|
@ -1,32 +1,29 @@
|
|||
dropzone = document.getElementById('dropzone');
|
||||
|
||||
filetypes = ['image/png', 'image/jpeg', 'image/gif'];
|
||||
|
||||
dropzone.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
dropzone_toggle("on");
|
||||
|
||||
this.classList.remove('nodrop');
|
||||
this.classList.add('drop');
|
||||
});
|
||||
|
||||
dropzone.addEventListener('dragleave', function(e) {
|
||||
dropzone_toggle("off");
|
||||
});
|
||||
e.preventDefault();
|
||||
|
||||
dropzone.addEventListener('mousedown', function(e) {
|
||||
dropzone_toggle("on");
|
||||
});
|
||||
|
||||
dropzone.addEventListener('mouseup', function(e) {
|
||||
dropzone_toggle("off");
|
||||
this.classList.remove('drop');
|
||||
this.classList.add('nodrop');
|
||||
});
|
||||
|
||||
dropzone.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.click();
|
||||
|
||||
input.onchange = function(e) {
|
||||
file = e.target.files[0];
|
||||
if(filetypes.includes(file.type)) {
|
||||
if( file.type == 'image/png' || file.type == 'image/jpeg' ) {
|
||||
upload(e.target.files[0]);
|
||||
}
|
||||
}
|
||||
|
|
@ -34,24 +31,16 @@ dropzone.addEventListener('click', function(e) {
|
|||
|
||||
dropzone.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
dropzone_toggle("off");
|
||||
|
||||
this.classList.remove('drop');
|
||||
this.classList.add('nodrop');
|
||||
|
||||
file = e.dataTransfer.files[0];
|
||||
if(filetypes.includes(file.type)) {
|
||||
if( file.type == 'image/png' || file.type == 'image/jpeg' ) {
|
||||
upload(e.dataTransfer.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
function dropzone_toggle(state) {
|
||||
if(state == "on") {
|
||||
dropzone.classList.remove('inactive');
|
||||
dropzone.classList.add('active');
|
||||
} else if(state == "off") {
|
||||
dropzone.classList.remove('active');
|
||||
dropzone.classList.add('inactive');
|
||||
}
|
||||
}
|
||||
|
||||
function upload(file) {
|
||||
const data = new FormData();
|
||||
data.append('upload', file)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
:root {
|
||||
--round: 20px;
|
||||
--border: 100px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -19,43 +20,28 @@ body {
|
|||
}
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#dropzone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90vw;
|
||||
height: 200px;
|
||||
max-width: 500px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#dropzone {
|
||||
width: calc(100vw - var(--border));
|
||||
height: calc(100vh - var(--border));
|
||||
border-radius: var(--round);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #ffb703;
|
||||
outline: 2px dashed #fb8500;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
.nodrop {
|
||||
background-color: #f5f5f5;
|
||||
outline: 2px dashed #d5d5d5;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 10px;
|
||||
color: white;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffb703;
|
||||
text-decoration: none;
|
||||
.drop {
|
||||
background-color: #ffb703;
|
||||
outline: 2px dashed #fb8500;
|
||||
}
|
||||
|
|
@ -10,13 +10,10 @@ if(!is_dir($datadir)) {
|
|||
mkdir($datadir);
|
||||
}
|
||||
|
||||
$extensions = ['jpg', 'jpeg', 'png', 'gif'];
|
||||
|
||||
if(isset($_FILES['upload'])) {
|
||||
$extension = pathinfo($_FILES['upload']['name'], PATHINFO_EXTENSION);
|
||||
$extension = strtolower($extension);
|
||||
|
||||
if(in_array($extension, $extensions)) {
|
||||
if($extension == 'jpg' || $extension == 'jpeg' || $extension == 'png') {
|
||||
$filename = generate_filename($length) . '.' . $extension;
|
||||
move_uploaded_file($_FILES['upload']['tmp_name'], $datadir . '/' . $filename);
|
||||
echo json_encode(['datadir' => $datadir, 'filename' => $filename]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue