Change nopaque upload forms. Add corpus file form has an upload progress bar now.

This commit is contained in:
Patrick Jentsch 2020-04-16 09:40:38 +02:00
parent 4992ac73a8
commit fede774196
7 changed files with 39 additions and 43 deletions

View File

@ -30,10 +30,10 @@ class AddCorpusFileForm(FlaskForm):
if not field.data.filename.lower().endswith('.vrt'): if not field.data.filename.lower().endswith('.vrt'):
raise ValidationError('File does not have an approved extension: ' raise ValidationError('File does not have an approved extension: '
'.vrt') '.vrt')
filename = secure_filename(field.data.filename) field.data.filename = secure_filename(field.data.filename)
for corpus_file in self.corpus.files: for corpus_file in self.corpus.files:
if filename == corpus_file.filename: if field.data.filename == corpus_file.filename:
raise ValidationError('File already registered to this corpus.') raise ValidationError('File already registered to corpus.')
class EditCorpusFileForm(FlaskForm): class EditCorpusFileForm(FlaskForm):

View File

@ -93,30 +93,32 @@ def add_corpus_file(corpus_id):
corpus = Corpus.query.get_or_404(corpus_id) corpus = Corpus.query.get_or_404(corpus_id)
if not (corpus.creator == current_user or current_user.is_administrator()): if not (corpus.creator == current_user or current_user.is_administrator()):
abort(403) abort(403)
add_corpus_file_form = AddCorpusFileForm(corpus, prefix='add-job-form') add_corpus_file_form = AddCorpusFileForm(corpus,
prefix='add-corpus-file-form')
if add_corpus_file_form.is_submitted(): if add_corpus_file_form.is_submitted():
if not add_corpus_file_form.validate(): if not add_corpus_file_form.validate():
logger.warning(add_corpus_file_form.errors)
return make_response(add_corpus_file_form.errors, 400) return make_response(add_corpus_file_form.errors, 400)
file = add_corpus_file_form.file.data
filename = secure_filename(file.filename)
# Save the file # Save the file
dir = os.path.join(str(corpus.user_id), 'corpora', str(corpus.id)) dir = os.path.join(str(corpus.user_id), 'corpora', str(corpus.id))
file.save(os.path.join(current_app.config['NOPAQUE_STORAGE'], add_corpus_file_form.file.data.save(
dir, filename)) os.path.join(current_app.config['NOPAQUE_STORAGE'], dir,
ids = [field.id for field in add_corpus_file_form if not add_corpus_file_form.file.data.filename))
(field.id == 'submit' corpus_file = CorpusFile(
or field.id == "csrf_token" address=add_corpus_file_form.address.data,
or field.id == "file")] author=add_corpus_file_form.author.data,
data = [field.data for field in add_corpus_file_form if not booktitle=add_corpus_file_form.booktitle.data,
(field.id == 'submit' chapter=add_corpus_file_form.chapter.data,
or field.id == "csrf_token"
or field.id == "file")]
field_dict = dict(zip(ids, data))
corpus_file = CorpusFile(**field_dict,
corpus=corpus, corpus=corpus,
dir=dir, dir=dir,
filename=filename) editor=add_corpus_file_form.editor.data,
filename=add_corpus_file_form.file.data.filename,
institution=add_corpus_file_form.institution.data,
journal=add_corpus_file_form.journal.data,
pages=add_corpus_file_form.pages.data,
publisher=add_corpus_file_form.publisher.data,
publishing_year=add_corpus_file_form.publishing_year.data,
school=add_corpus_file_form.school.data,
title=add_corpus_file_form.title.data)
db.session.add(corpus_file) db.session.add(corpus_file)
db.session.commit() db.session.commit()
thread = Thread(target=edit_corpus_file_, thread = Thread(target=edit_corpus_file_,

View File

@ -87,7 +87,7 @@ nopaque.Forms.init = function() {
var abortRequestElement, parentElement, progressElement, progressModal, var abortRequestElement, parentElement, progressElement, progressModal,
progressModalElement, request, submitElement; progressModalElement, request, submitElement;
for (let form of document.querySelectorAll(".nopaque-job-form")) { for (let form of document.querySelectorAll(".nopaque-submit-form")) {
submitElement = form.querySelector('button[type="submit"]'); submitElement = form.querySelector('button[type="submit"]');
submitElement.addEventListener("click", function() { submitElement.addEventListener("click", function() {
for (let selectElement of form.querySelectorAll('select')) { for (let selectElement of form.querySelectorAll('select')) {
@ -119,7 +119,12 @@ nopaque.Forms.init = function() {
// Initialize progress modal // Initialize progress modal
if (progressModalElement) { if (progressModalElement) {
progressModalTitleElement = progressModalElement.querySelector(".title"); progressModalTitleElement = progressModalElement.querySelector(".title");
progressModalTitleElement.innerText = formData.get("title"); for(let entry of formData.entries()) {
if (entry[0].endsWith("title")) {
progressModalTitleElement.innerText = entry[1];
break;
}
}
progressElement.style.width = "0%"; progressElement.style.width = "0%";
progressModal.open(); progressModal.open();
} }
@ -135,7 +140,7 @@ nopaque.Forms.init = function() {
if (request.status === 400) { if (request.status === 400) {
console.log(request); console.log(request);
for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) { for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
fieldElement = form.querySelector(`input[name="add-job-form-${field}"]`).closest(".input-field"); fieldElement = form.querySelector(`input[name$="${field}"]`).closest(".input-field");
for (let error of errors) { for (let error of errors) {
fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`); fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
} }

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="col s12 m8"> <div class="col s12 m8">
<form class="nopaque-job-form" data-progress-modal="progress-modal"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
{{ add_corpus_file_form.hidden_tag() }} {{ add_corpus_file_form.hidden_tag() }}
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
@ -69,21 +69,10 @@
<li> <li>
<div class="collapsible-header"><i class="material-icons">add</i>Add additional metadata</div> <div class="collapsible-header"><i class="material-icons">add</i>Add additional metadata</div>
<div class="collapsible-body"> <div class="collapsible-body">
<span> {% for field in add_corpus_file_form if not (field.name.endswith(('author', 'csrf_token', 'file', 'publishing_year', 'submit', 'title'))) %}
<div class="row">
<div class="col s12">
{% for field in add_corpus_file_form if not (field.name == "file"
or field.name == "author"
or field.name == "submit"
or field.name == "csrf_token"
or field.name == "title"
or field.name == "publishing_year") %}
{{ macros.render_field(field)}} {{ macros.render_field(field)}}
{% endfor %} {% endfor %}
</div> </div>
</div>
</span>
</div>
</li> </li>
</ul> </ul>
<br> <br>

View File

@ -25,7 +25,7 @@
<div class="col s12"> <div class="col s12">
<h3>Submit a job</h3> <h3>Submit a job</h3>
<div class="card"> <div class="card">
<form class="nopaque-job-form" data-progress-modal="progress-modal"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
{{ add_job_form.hidden_tag() }} {{ add_job_form.hidden_tag() }}
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">

View File

@ -43,7 +43,7 @@
<div class="col s12"> <div class="col s12">
<h3>Submit a job</h3> <h3>Submit a job</h3>
<div class="card"> <div class="card">
<form class="nopaque-job-form" data-progress-modal="progress-modal"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
{{ add_job_form.hidden_tag() }} {{ add_job_form.hidden_tag() }}
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">

View File

@ -25,7 +25,7 @@
<div class="col s12"> <div class="col s12">
<h3>Submit a job</h3> <h3>Submit a job</h3>
<div class="card"> <div class="card">
<form class="nopaque-job-form" data-progress-modal="progress-modal"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
{{ add_job_form.hidden_tag() }} {{ add_job_form.hidden_tag() }}
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">