Support multi-image posting.

The javascript could be refactored a little cleaner, I think.
This commit is contained in:
Jason McBrayer 2018-05-18 08:00:12 -04:00
parent 3434914241
commit ad334315dc
1 changed files with 81 additions and 5 deletions

View File

@ -52,6 +52,62 @@
</div>
</div>
<div class="field has-addons">
<div class="file">
<label class="file-label">
{% render_field form.media_file_2 class+="file-input" %}
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label" id="media_filename_2">
{{ form.media_file_2.label }}
</span>
</span>
</label>
</div>
<div class="control is-expanded">
{% render_field form.media_text_2 class+="input" placeholder="Describe attachment" %}
</div>
</div>
<div class="field has-addons">
<div class="file">
<label class="file-label">
{% render_field form.media_file_3 class+="file-input" %}
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label" id="media_filename_3">
{{ form.media_file_3.label }}
</span>
</span>
</label>
</div>
<div class="control is-expanded">
{% render_field form.media_text_3 class+="input" placeholder="Describe attachment" %}
</div>
</div>
<div class="field has-addons">
<div class="file">
<label class="file-label">
{% render_field form.media_file_4 class+="file-input" %}
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label" id="media_filename_4">
{{ form.media_file_4.label }}
</span>
</span>
</label>
</div>
<div class="control is-expanded">
{% render_field form.media_text_4 class+="input" placeholder="Describe attachment" %}
</div>
</div>
<div>
{{ form.errors }}
@ -67,13 +123,33 @@
{% if not fullbrutalism %}
<script type="application/javascript">
var file = document.getElementById("id_media_file_1");
file.onchange = function(){
if(file.files.length > 0)
var file1 = document.getElementById("id_media_file_1");
file1.onchange = function(){
if (file1.files.length > 0)
{
document.getElementById('media_filename_1').innerHTML = file.files[0].name;
document.getElementById('media_filename_1').innerHTML = file1.files[0].name;
}
};
var file2 = document.getElementById("id_media_file_2");
file2.onchange = function(){
if (file2.files.length > 0)
{
document.getElementById('media_filename_2').innerHTML = file2.files[0].name;
}
};
var file3 = document.getElementById("id_media_file_3");
file3.onchange = function(){
if (file3.files.length > 0)
{
document.getElementById('media_filename_3').innerHTML = file3.files[0].name;
}
};
var file4 = document.getElementById("id_media_file_4");
file4.onchange = function(){
if (file4.files.length > 0)
{
document.getElementById('media_filename_4').innerHTML = file4.files[0].name;
}
};
</script>
{% endif %}