Commit 652e2213 authored by BAIRE Anthony's avatar BAIRE Anthony
Browse files

squashed merge request !183

commit 08eb24e5
Merge: cc0b7eb0 2698751b
Author: LETORT Sebastien <sebastien.letort@irisa.fr>
Date:   Wed Sep 18 10:50:33 2019 +0200

    Merge branch 'django' into 336-impossible-de-choisir-plusieurs-fichiers-de-dossiers-differents

commit cc0b7eb0
Author: LETORT Sebastien <sebastien.letort@irisa.fr>
Date:   Wed Sep 18 10:41:05 2019 +0200

    no more specific css for file-chooser.
    all js code written in html template -> rm misc_allgo.js.

commit 089c4d70
Author: LETORT Sebastien <sebastien.letort@irisa.fr>
Date:   Fri Sep 6 16:59:14 2019 +0200

    make bootstrap formatted input-file has been replaced by a span group (label+input-file+input-text+clear btn), with a '+' button.
    a new js script has been added to manage this file-chooser behaviour.
    some css properties have also been added.
parent a803d6eb
......@@ -103,11 +103,17 @@
{% if user.is_authenticated %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
{{ form.files.label_tag }}
<input type="file" class="form-control-file filestyle" name="{{ form.files.name }}" id="inputGroupFile01" data-buttonBefore="true" data-badge="true" multiple>
<button type="button" class="btn btn-secondary btn-sm" onClick="add_input_file($(this).next())">+</button>
<span class="form-inline input-group">
<label for="input-file01" class="btn btn-secondary mr-sm-2" tabindex="0">Choose file</label>
<input type="file" id="input-file01" name="{{ form.files.name }}" style="display:none"
multiple onChange="list_filenames_in_next_elt(this)">
<input type="text" class="mr-sm-2 form-control" disabled >
<button type="button" class="btn btn-secondary" onClick="$(this).prev()[0].value='';">x</button>
</span>
<small class="form-text text-muted">{{ form.files.help_text }}</small>
</div>
......@@ -230,4 +236,51 @@
{{ block.super }}
<script defer src="{% static 'js/tooltip.js' %}"></script>
<script defer src="{% static 'js/copy.js' %}"></script>
<script>
function list_filenames_in_next_elt(elt)
{
let files = $.map( elt.files, function(v){ return v.name; } );
$(elt).next()[0].value = files.join(",");
}
{
/* == File chooser - to allow selection of file from different directories ==
* closure to reduce to scope of variables.
* i_btn : counter used to define ids.
*
* The file-chooser is composed of those elements :
* span
* - label, used as button to activate the input-file
* - input type file, hidden.
* - input type text, used to display the selected files.
* This seems to be quite "classical" management of input-file when style is involved.
* https://www.quirksmode.org/dom/inputfile.html
* https://buzut.net/customisez-le-input-file/
* https://www.creativejuiz.fr/blog/tutoriels/input-file-personnalise-css-js
*
* Here we clone the first span element, update ids
* and insert the new span right before the small help text line.
*/
let i_btn = 2;
function add_input_file(span_elt)
{
let new_span = $(span_elt).clone(false);
let new_id = "input-file0"+i_btn;
new_span.children('label')
.prop("for", new_id);
inputs = new_span.children('input');
inputs[0].id = new_id;
inputs[1].value = '';
++i_btn;
let last_small = $(span_elt).parent().children('small').last();
last_small.before(new_span);
}
} // == File chooser
</script>
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment