<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <style>
    </style>
</head>
<body>
    <p>Image uploader</p>
    <div class="container">
        <form method="post" action="" enctype="multipart/form-data" id="myform">
            {% csrf_token %}
            <div class='preview'>
                <img src="" id="img" width="100" height="100">
            </div>
            <div >
                <input type="file" id="file" name="file" />
                <input type="button" class="button" value="Upload" id="but_upload">
                
            </div>
        </form>
    </div>
    <p id="status"></p>
    <input type="text" id="send">
    <button onclick="AjaxGet();">Send</button>
    <p id="response"></p>
    <script>
       $(document).ready(function(){

$("#but_upload").click(function(){

    var fd = new FormData();
    var files = $('#file')[0].files;
    var token = $("[name=csrfmiddlewaretoken]").value;
    // Check file selected or not
    if(files.length > 0 ){
       fd.append('file',files[0]);
        fd.append("csrfmiddlewaretoken", "{{ csrf_token }}");   // < here 
            fd.append("state","inactive");
       $.ajax({
          url: "{% url 'upload' %}",
          type: 'post',
          data: fd,
          contentType: false,
          processData: false,
          success: function(response){
              console.log(response);
             if(response != 0){
                 {% load static %}
                $("#img").attr("src","{% static 'images/' %}"+response); 
                $(".preview img").show(); // Display image element
             }else{
                alert('file not uploaded');
             }
          },
       });
    }else{
       alert("Please select a file.");
    }
});
});
function AjaxGet(){
var text = document.getElementById("send").value;
$.ajax({
            type:'GET',
            url: "{% url 'get_test' %}",
            data: {
                'response': text,

            },
            error: function(xhr, status, error) {
                                                    alert("disconnected! \n copy token number:"+$("#token").html()+" to get again in Queue");
                                                    console.log("Confirmedddd");
                                                },
            success: function (dd){
                    document.getElementById("response").innerHTML=dd;
            },
                                
                            });
}
       
   </script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</html>