rDrama
/
rDrama
9
10
Fork 7
Code Issues Pull Requests Packages Releases Wiki Activity

add upload progressbar in /submit

pull/116/head
Aevann 2023-02-08 09:15:37 +02:00
parent d5c0686496
commit c4394316fb
3 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
files/assets/js/submit.js
View File

@ -216,3 +216,50 @@ if (location.href == '/submit') {
const sub = document.getElementById('sub')
if (sub) sub.value = localStorage.getItem("sub")
}
const uploadfilelist = document.getElementById('upload-filelist');
const bar = document.getElementById('file-progress');
const percentIndicator = document.getElementById('progress-percent');
function handleUploadProgress(evt) {
uploadfilelist.classList.remove("d-none")
if (evt.lengthComputable) {
const progressPercent = Math.floor((evt.loaded / evt.total) * 100);
bar.setAttribute('value', progressPercent);
percentIndicator.textContent = progressPercent + '%';
}
}
function submit(form) {
const xhr = new XMLHttpRequest();
formData = new FormData(form);
formData.append("formkey", formkey());
actionPath = form.getAttribute("action");
xhr.open("POST", actionPath);
xhr.upload.onprogress = handleUploadProgress;
xhr.setRequestHeader('xhr', 'xhr');
xhr.onload = function() {
uploadfilelist.classList.add("d-none")
if (xhr.status >= 200 && xhr.status < 300) {
const post_id = JSON.parse(xhr.response)['post_id'];
location.href = "/post/" + post_id
} else {
document.getElementById('toast-post-error-text').innerText = "Error, please try again later."
try {
let data=JSON.parse(xhr.response);
bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-error')).show();
document.getElementById('toast-post-error-text').innerText = data["error"];
if (data && data["details"]) document.getElementById('toast-post-error-text').innerText = data["details"];
} catch(e) {
bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-success')).hide();
bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-error')).show();
}
}
};
xhr.send(formData);
}

9
files/routes/posts.py
View File

@ -532,10 +532,7 @@ def submit_post(v:User, sub=None):
body = sanitize_raw_body(request.values.get("body", ""), True)
def error(error):
if g.is_api_or_xhr: abort(400, error)
SUBS = [x[0] for x in g.db.query(Sub.name).order_by(Sub.name).all()]
return render_template("submit.html", SUBS=SUBS, v=v, error=error, title=title, url=url, body=body), 400
return {"error": error}, 400
if not title:
return error("Please enter a better title!")
@ -804,9 +801,7 @@ def submit_post(v:User, sub=None):
if v.client: return post.json(g.db)
else:
post.voted = 1
if post.new: sort = 'new'
else: sort = v.defaultsortingcomments
return render_template('submission.html', v=v, p=post, sort=sort, render_replies=True, offset=0, success=True, sub=post.subr)
return {"post_id": post.id}
@app.post("/delete_post/<int:pid>")
@limiter.limit(DEFAULT_RATELIMIT_SLOWER)

21
files/templates/submit.html
View File

@ -12,7 +12,7 @@
{% block content %}
{% block form %}
<div class="submit-grid-view">
<form id="submitform" action="{% if sub %}/h/{{sub}}{% endif %}/submit" method="post" enctype="multipart/form-data" style="grid-column: 2">
<form id="submitform" action="{% if sub %}/h/{{sub}}{% endif %}/submit" method="post" enctype="multipart/form-data" style="grid-column: 2" data-nonce="{{g.nonce}}" data-onsubmit="submit(this)">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col p-3 py-md-0">
@ -93,15 +93,18 @@
</div>
</div>
<div class="container">
<div class="row fixed-bottom bg-white border-top p-3" style="z-index: 100; bottom: 0px; transition: bottom 220ms cubic-bezier(0, 0, 0.2, 1) 0s;">
<div class="col">
<a href="/" class="btn btn-secondary">Cancel</a>
</div>
<div class="col text-right">
{% if error %}<span class="text-danger text-large mr-2">{{error | safe}}</span>{% endif %}
<button type="submit" class="btn btn-primary" id="create_button" type="submit" data-nonce="{{g.nonce}}" data-onclick="disable(this);remove_dialog()">Post</button>
</div>
<div class="row fixed-bottom bg-white border-top p-3" style="z-index: 100; bottom: 0px; transition: bottom 220ms cubic-bezier(0, 0, 0.2, 1) 0s;">
<div class="col">
<a href="/" class="btn btn-secondary">Cancel</a>
</div>
<div class="col text-right">
<span id="upload-filelist" class="d-none mr-2">
<progress id="file-progress" max="100"></progress>
<span id="progress-percent"></span>
</span>
<button type="submit" class="btn btn-primary" id="create_button" type="submit" data-nonce="{{g.nonce}}" data-onclick="disable(this);remove_dialog()">Post</button>
</div>
</div>
</div>
</form>
</div>