49 lines
1.9 KiB
HTML
49 lines
1.9 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">
|
|
{% csrf_token %}
|
|
<div class="side_menu">
|
|
{% if not user.is_authenticated %}
|
|
<p id="description">Please login to submit image</p>
|
|
<button onclick="location.href='{% url 'login' %}'" id='submit' method="GET" type='button'>Login</button>
|
|
{% elif img_saved is None %}
|
|
<p id="description">Choose image for analysis</p>
|
|
<input type="submit" id="submit" value="Submit">
|
|
{% else %}
|
|
<p id="description">Photo saved</p>
|
|
<button onclick="location.href='{% url 'detect' %}'" id='submit' method="GET" type='button'>Submit again</button>
|
|
{%endif%}
|
|
</div>
|
|
<div class="upload_field">
|
|
<label for="id_image", class="upload_button">
|
|
{{form.as_p}}
|
|
{% if not img_url %}
|
|
<img id="image-preview" src="{% static 'DetectionApp/images/upload_img.png' %}" alt="Image Preview" style="width:640px; height:460px;"/>
|
|
{%else%}
|
|
<img src="{%get_media_prefix%}{{img_url}}" alt="upload_image" style="width:640px; height:460px;">
|
|
{%endif%}
|
|
</label>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
document.getElementById('id_image').addEventListener('change', function() {
|
|
var input = this;
|
|
|
|
if (input.files && input.files[0]) {
|
|
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]);
|
|
}
|
|
});
|
|
</script>
|
|
</form>
|
|
{%endblock content%} |