Add javascript to pretty version of media upload

This commit is contained in:
Jason McBrayer 2018-05-09 14:44:45 -04:00
parent 71aa4c0249
commit 0455c6d25f
1 changed files with 27 additions and 4 deletions

View File

@ -34,15 +34,27 @@
</div>
<div class="field">
<label class="label"> {{ form.media_file_1.label }}</label>
<div class="content">
{% render_field form.media_file_1 %}
<div class="file has-name">
<label class="file-label">
{% render_field form.media_file_1 class+="file-input" %}
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
{{ form.media_file_1.label }}
</span>
</span>
<span class="file-name" id="media_filename_1">
</span>
</label>
</div>
<div class="control">
{% render_field form.media_text_1 class+="input" placeholder="Describe attachment" %}
</div>
</div>
<div>
{{ form.errors }}
</div>
@ -53,4 +65,15 @@
name="toot" value="Toot">
</div>
</div>
</form>
</form>
<script type="application/javascript">
var file = document.getElementById("id_media_file_1");
file.onchange = function(){
if(file.files.length > 0)
{
document.getElementById('media_filename_1').innerHTML = file.files[0].name;
}
};
</script>