Plankton_Detector/PlanktonDetector/templates/upload.html

{% extends 'base.html' %}
{%load static%}
{%block extracss%}
<link rel="stylesheet" href="{%static 'DetectionApp/css/upload.css' %}">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
{%endblock extracss%}
{%block content%}
    <form method="POST" enctype="multipart/form-data" id="upload_form">
        {% csrf_token %}
    <div class="side_menu">
    </div>
        <div class="upload_field">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        {% if not user.is_authenticated %}
            <p id="description">Please login to submit image</p>
        {% else %}
            <p id="description">Choose image for analysis</p>
        {%endif%}
  <div class="carousel-inner" id="car-div">
    <div class="carousel-item active">
            <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" class="rounded"/>
        </label>
    </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" id="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" id="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
        {% if not user.is_authenticated%}
        <a href="{% url 'login' %}?next={{request.path}}" id="submit" class="btn btn-primary">Login</a>
        {%else%}
        <div class="spinner-border text-primary" role="status" style="display: none" id="spinner"></div>
        <input type="submit" id="submit" value="Submit" class="btn btn-primary">
        {%endif%}

        </div>
    </form>
</form>
{%endblock content%}
{%block extrascript%}
    <script>
document.getElementById('id_image').addEventListener('change', function () {
    var input = this;
    var previewContainer = document.getElementById('car-div');


    if (input.files && input.files.length > 1) {
        var prev_cont = document.getElementById('image-preview-container')
        prev_cont.parentElement.classList.remove("carousel-item")
        prev_cont.parentElement.classList.remove("active")
        prev_cont.style.display='none'
        document.getElementById("prev").style.cssText = 'display:flex !important';
        document.getElementById("next").style.cssText = 'display:flex !important';
        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 div = document.createElement('div');
                    div.classList.add("carousel-item")
                    if (index < 1 ){
                        div.classList.add("active")
                    }
                    var img = document.createElement('img')
                    div.appendChild(img)
                    img.src = e.target.result;
                    img.id = 'image-preview'
                    img.style.display = 'block';
                    img.style.marginRight="5px"
                    img.style.opacity="100%"
                    
                    // Append the image element to the container
                    {# previewContainer.style.overflowY='hidden' #}
                    {# previewContainer.style.overflowX='scroll' #}
                    {% comment %} previewContainer.style.width='640px' {% endcomment %}
                    {% comment %} previewContainer.style.height='460px' {% endcomment %}
                    previewContainer.appendChild(div);
                };

                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';
                    document.getElementById("image-preview").style.opacity='100%';
                }
        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;
}

document.getElementById('id_image').addEventListener('change', function () {
    $("#submit").click(function(event){
        document.getElementById('image-preview-container').disabled=true;
        $("#submit").hide();
        $("#spinner").show();
        $("#description").text("Please wait ...")
});});
  $(document).ready(function() {
    // Initial width adjustment
    adjustCarouselWidth();

    // Listen for window resize events
    $(window).resize(function() {
      adjustCarouselWidth();
    });
  });

  function adjustCarouselWidth() {
    // Check if the window width is below 700 pixels and there are more than 1 images
    if ($(window).width() < 700) {
      // Set the desired width for the carousel-inner
      $('#carouselExampleControls').css('width', '330px');
    } else {
      // Reset to the default width when window width is 700 pixels or more, or only 1 image
      $('#carouselExampleControls').css('width', '640px');
    }
  }

</script>
{%endblock extrascript%}