80 lines
3.0 KiB
HTML
80 lines
3.0 KiB
HTML
{% extends 'base.html' %}
|
|
{%load static%}
|
|
{%block extracss%}
|
|
<link rel="stylesheet" href="{%static 'DetectionApp/css/upload.css' %}">
|
|
{%endblock extracss%}
|
|
{%block content%}
|
|
<form method="POST" enctype="multipart/form-data" id="upload_form">
|
|
{% csrf_token %}
|
|
<div class="side_menu">
|
|
{% if not user.is_authenticated %}
|
|
<p id="description">Please login to submit image</p>
|
|
<a href="{% url 'login' %}?next={{request.path}}" id="submit">Login</a>
|
|
{% else %}
|
|
<p id="description">Choose image for analysis</p>
|
|
<input type="submit" id="submit" value="Submit">
|
|
{%endif%}
|
|
</div>
|
|
<div id="progress"></div>
|
|
<div class="upload_field">
|
|
<label for="id_image", class="upload_button" id="image-preview-container">
|
|
{{form.as_p}}
|
|
<img id="image-preview" src="{% static 'DetectionApp/images/upload_img.png' %}" alt="Image Preview" style="width:640px; height:460px;"/>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
document.getElementById('id_image').addEventListener('change', function () {
|
|
var input = this;
|
|
var previewContainer = document.getElementById('image-preview-container');
|
|
|
|
|
|
if (input.files && input.files.length > 1) {
|
|
document.getElementById('image-preview').style.display='none'
|
|
for (var i = 0; i < input.files.length; i++) {
|
|
(function (index) {
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function (e) {
|
|
// Create a new image element for each preview
|
|
var img = document.createElement('img');
|
|
img.src = e.target.result;
|
|
img.id = 'image-preview'
|
|
img.style.display = 'block';
|
|
img.style.width='640px'
|
|
img.style.height='460px'
|
|
img.style.marginRight="5px"
|
|
|
|
// Append the image element to the container
|
|
previewContainer.style.overflowY='hidden'
|
|
previewContainer.style.overflowX='scroll'
|
|
previewContainer.style.width='640px'
|
|
previewContainer.style.height='460px'
|
|
previewContainer.appendChild(img);
|
|
};
|
|
|
|
reader.readAsDataURL(input.files[index]);
|
|
})(i);
|
|
}
|
|
}else{
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
document.getElementById('image-preview').src = e.target.result;
|
|
document.getElementById('image-preview').style.display = 'block';
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
|
|
}
|
|
});
|
|
|
|
var user = `{{user.is_authenticated}}`
|
|
var upload = document.getElementById("id_image")
|
|
if (user.toLowerCase()=="false"){
|
|
upload.disabled=true;
|
|
}else if (user.toLowerCase()=="true"){
|
|
upload.disabled=false;
|
|
}
|
|
</script>
|
|
</form>
|
|
{%endblock content%} |