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" id="upload_form">
        {% 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>
        {% 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]);

    }
});
    </script>
    </form>
    {%endblock content%}