Skip to content

Commit

Permalink
Added Upload File Support
Browse files Browse the repository at this point in the history
  • Loading branch information
@viperadnan-git
viperadnan-git committed May 10, 2021
1 parent b38a023 commit 5a4309d
Show file tree
Hide file tree
Showing 7 changed files with 292 additions and 937 deletions.
95 changes: 60 additions & 35 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,68 @@
var post_options = {
"url": "/api",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json"
}
"url": "/api",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json"
}
};
$("#save").click(function() {
$("#save").html(`<div class="spinner-border text-light spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>`);
post_options.data = JSON.stringify({
"heading": $("#heading").text(),
"content": $("#inputext").val(),
"code": $("#is-code").is(":checked") ? true: false,
"raw": $("#is-raw").is(":checked") ? true: false,
"footer": $("#is-footer").is(":checked") ? true: false
});
$.ajax(post_options).done(function (response) {
window.location.href = response;
}).fail(function(request, status, error) {
alert(`${request.status} ${status} - ${error}`);
$("#save").html(`<img width="24" src="assets/images/save.png">`);
});
$("#save").html(`<div class="spinner-border text-light spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>`);
post_options.data = JSON.stringify({
"heading": $("#heading").text(),
"content": $("#inputext").val(),
"code": $("#is-code").is(":checked") ? true: false,
"raw": $("#is-raw").is(":checked") ? true: false,
"footer": $("#is-footer").is(":checked") ? true: false
});
$.ajax(post_options).done(function (response) {
window.location.href = response;
}).fail(function(request, status, error) {
alert(`${request.status} ${status} - ${error}`);
$("#save").html(`<img width="24" src="assets/images/save.png">`);
});
});
$("#inputext").keyup(function() {
if (!$("#content").hasClass("d-none")) {
if ($("#is-code").is(":checked")) {
$("#content").html("<pre><xmp id='code'></xmp></pre>");
$("#code").text($(this).val());
} else {
$("#content").html(marked($(this).val()));
if (!$("#content").hasClass("d-none")) {
if ($("#is-code").is(":checked")) {
$("#content").html("<pre><xmp id='code'></xmp></pre>");
$("#code").text($(this).val());
} else {
$("#content").html(marked($(this).val()));
}
}
}
});
$("#live-output").click(function() {
if ($(this).is(":checked")) {
$("#inputext").css("height", (screen.height / 1.6) + "px");
$("#content").addClass("d-none");
} else {
$("#inputext").css("height", "180px");
$("#content").removeClass("d-none");
}
});
if ($(this).is(":checked")) {
$("#inputext").css("height", (screen.height / 1.6) + "px");
$("#content").addClass("d-none");
} else {
$("#inputext").css("height", "180px");
$("#content").removeClass("d-none");
}
});

$('#upload-file').change((event) => {
const input = event.target;
if ('files' in input && input.files.length > 0) {
readFileContent(input.files[0]).then(content => {
$("#inputext").val(content);
}).catch(error => alert(error));
}
});
function readFileContent(file) {
const reader = new FileReader();
if (file.type.includes("image")) {
return new Promise((resolve, reject) => {
reader.onload = event => resolve("<img src=\""+event.target.result+"\" alt=\"image\" class=\"w-100\"/>");
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
});
} else {
return new Promise((resolve, reject) => {
reader.onload = event => resolve(event.target.result);
reader.onerror = error => reject(error);
reader.readAsText(file);
});
}
}
185 changes: 103 additions & 82 deletions assets/main.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>pasting.codes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/images/favicons/site.webmanifest">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<style>
textarea {
width: 100%;
height: 180px;
white-space: nowrap;
overflow: auto;
overflow-x: scroll;
overflow-y: scroll;
}
.bg-black {
background-color: #333;
}
.navbar {
padding: 2px;
}
.navbar-brand {
font-size: 32px;
}
:focus {
outline: 0;
outline-color: transparent;
outline-style: none;
}
.badge {
font-weight: normal;
font-size: 8px;
padding: 3px 5px 3px 5px;
}
.badge-left {
border-radius: 3px 0 0 3px;
}
.badge-right {
border-radius: 0 3px 3px 0;
background-color: #ededed;
}
#content {
word-wrap: break-word;
}
</style>
<title>pasting.codes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/images/favicons/site.webmanifest">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<style>
textarea {
width: 100%;
height: 180px;
overflow: auto;
overflow-x: scroll;
overflow-y: scroll;
}
.bg-black {
background-color: #333;
color: #fff;
}
.navbar {
padding: 2px;
}
.navbar-brand {
font-size: 32px;
}
:focus {
outline: 0;
outline-color: transparent;
outline-style: none;
}
.badge {
font-weight: normal;
font-size: 8px;
padding: 3px 5px;
}
.badge-left {
border-radius: 3px 0 0 3px;
}
.badge-right {
border-radius: 0 3px 3px 0;
background-color: #ededed;
}
.btn-file {
position: relative;
overflow: hidden;
font-size: 12px;
padding: 1px 6px;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-black">
<div class="container-fluid">
<span contenteditable="true" id="heading" class="navbar-brand mb-0 fw-bolder p-0">pasting.codes</span>
<button id="save" class="btn btn-dark">
<img width="24" src="assets/images/save.png">
</button>
<nav class="navbar navbar-dark bg-black">
<div class="container-fluid">
<span contenteditable="true" id="heading" class="navbar-brand mb-0 fw-bolder p-0">pasting.codes</span>
<button id="save" class="btn btn-dark">
<img width="24" src="assets/images/save.png">
</button>
</div>
</nav>
<div class="container my-2">
<div class="justify-content-start">
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="is-code">
<label class="form-check-label" for="is-code">Code</label>
</div>
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="is-raw" checked>
<label class="form-check-label" for="is-raw">Raw</label>
</div>
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="is-footer" checked>
<label class="form-check-label" for="is-footer">Watermark</label>
</div>
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="live-output">
<label class="form-check-label" for="live-output">Expand</label>
</div>
<div class="d-inline-block btn btn-file btn-dark bg-black ms-2">
Upload File
<input type="file" id="upload-file" />
</div>
</div>
<textarea id="inputext" class="form-control text-nowrap my-2" placeholder="Type something..."></textarea>
<div class="text-break" id="content"></div>
</div>
</nav>
<div class="container my-2">
<div class="justify-content-start">
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="is-code">
<label class="form-check-label" for="is-code">Code</label>
</div>
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="is-raw" checked>
<label class="form-check-label" for="is-raw">Raw</label>
</div>
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="is-footer" checked>
<label class="form-check-label" for="is-footer">Watermark</label>
</div>
<div class="d-inline-block form-check form-switch ms-2">
<input class="form-check-input" type="checkbox" id="live-output">
<label class="form-check-label" for="live-output">Expand</label>
</div>
</div>
<textarea id="inputext" class="form-control my-2" placeholder="Type something..."></textarea>
<div id="content"></div>
</div>
<footer class="d-flex justify-content-center mb-2">
<a href="https://viperadnan-git.github.io"><span class="badge bg-black badge-left">viperadnan</span><span class="badge text-dark badge-right">&lt;&sol;&gt;</span></a>
</footer>
<script src="/assets/js/main.js"></script>
<footer class="d-flex justify-content-center mb-2">
<a href="https://viperadnan-git.github.io"><span class="badge bg-black badge-left">viperadnan</span><span class="badge text-dark badge-right">&lt;&sol;&gt;</span></a>
</footer>
<script src="/assets/js/main.js"></script>
</body>
</html>
Loading

0 comments on commit 5a4309d

Please sign in to comment.