add upload progressbar in /submit
parent
d5c0686496
commit
c4394316fb
|
@ -216,3 +216,50 @@ if (location.href == '/submit') {
|
||||||
const sub = document.getElementById('sub')
|
const sub = document.getElementById('sub')
|
||||||
if (sub) sub.value = localStorage.getItem("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);
|
||||||
|
}
|
||||||
|
|
|
@ -532,10 +532,7 @@ def submit_post(v:User, sub=None):
|
||||||
body = sanitize_raw_body(request.values.get("body", ""), True)
|
body = sanitize_raw_body(request.values.get("body", ""), True)
|
||||||
|
|
||||||
def error(error):
|
def error(error):
|
||||||
if g.is_api_or_xhr: abort(400, error)
|
return {"error": error}, 400
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
if not title:
|
if not title:
|
||||||
return error("Please enter a better 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)
|
if v.client: return post.json(g.db)
|
||||||
else:
|
else:
|
||||||
post.voted = 1
|
post.voted = 1
|
||||||
if post.new: sort = 'new'
|
return {"post_id": post.id}
|
||||||
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)
|
|
||||||
|
|
||||||
@app.post("/delete_post/<int:pid>")
|
@app.post("/delete_post/<int:pid>")
|
||||||
@limiter.limit(DEFAULT_RATELIMIT_SLOWER)
|
@limiter.limit(DEFAULT_RATELIMIT_SLOWER)
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% block form %}
|
{% block form %}
|
||||||
<div class="submit-grid-view">
|
<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="container">
|
||||||
<div class="row justify-content-center mb-5">
|
<div class="row justify-content-center mb-5">
|
||||||
<div class="col p-3 py-md-0">
|
<div class="col p-3 py-md-0">
|
||||||
|
@ -93,15 +93,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<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="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">
|
<div class="col">
|
||||||
<a href="/" class="btn btn-secondary">Cancel</a>
|
<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>
|
</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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue