{% load i18n static %}
<div class="row justify-content-center">
	<div class="col-6 col-md-4">
		<img id="{{ widget.attrs.id }}_preview" {% if current_image %}src="{{ current_image.url }}"{% endif %} class="img-fluid" />
	</div>
</div>
<br>
<p>
	{% include "django/forms/widgets/file.html" %}
</p>

<script>
	(function(){

		var fileInput = document.getElementById('{{ widget.attrs.id }}');
		var imagePreview = document.getElementById('{{ widget.attrs.id }}_preview');

		function loadImage(event){

			var reader = new FileReader();

			reader.onloadend = function(event) {

				imagePreview.src = this.result;

			};

			let file = fileInput.files[0];
			reader.readAsDataURL(file);
		}

		fileInput.addEventListener("change", loadImage);

	})()
</script>