forked from rDrama/rDrama
add upload progressbar in /submit
parent
d5c0686496
commit
c4394316fb
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue