Plankton_Detector/PlanktonDetector/templates/upload.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 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_path %}
                <img id="image-preview" src="{% static 'DetectionApp/images/upload_img.png' %}" alt="Image Preview" style="max-width:640px; max-height:640px;"/>
            {%else%}
                <img src="{%get_media_prefix %}{{img_path}}" alt="upload_image" width="640" height="640">
            {%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%}