Sindbad~EG File Manager

<div class="container">
    <form action="{{url_for('main.StepPost_2',abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s2" method="POST">
        <div class="container" id="step1">
            <ul id="progressbar">
                <li class="active" id="account"></li>
                <li class="active" id="personal"></li>
                <li id="payment"></li>
                <li id="confirm"></li>
                <li id="fifth"></li>
            </ul>
        </div>
        <div class="row">
            <div class="col">
                <div><label ><b>Upload Image:</b> </label></div>
                <div {% if data.path %} style="display: none;" {% endif %} id="Upload_btn_div" ><button type="button" class="btn btn-link photo_upload" id="photo_upload">( Please Upload Your image )</button></div>
                <div {% if not data.path %} style="display: none;" {% endif %} class="img_div">
                    <img src="{{ data.path or '' }}{{ data.file_name }}" width="100px" id="uploaded_img">
                    <button type="button" class="btn btn-primary photo_upload" id="photo_upload">Change</button>
                    <button type="button" class="btn btn-danger photo_delete" id="photo_upload">Remove</button>
                </div>
            </div>
        </div>
        <div class="row tiles">
            <div class="col">
                <span class=""><b>Title of the Video (not exceeding 200 characters)</b> </span>
                <span id="chars" class="text-primary ml-2"></span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="title" id="title" class="form-control" placeholder="Title of the Video" value="">{{data.title or ''}}</textarea>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col">
                <span><b>Aims and Objectives (not exceeding 1000 characters) </b></span><span id="chars1" class="text-primary ml-2"></span><br><span class="text-danger">To help fair evaluation of your, please do not reveal your personal / hospital / Institution / Organisation identity.  Revealing the identity may lead to rejection of your abstract automatically.</span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="synopsis" id="synopsis" class="form-control" cols="50" rows="5" placeholder="Aims and Objectives" value="">{{data.synopsis or ''}}</textarea>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col">
                <span><b>Materials and Methods (not exceeding 1500 characters)  </b></span><span id="chars2" class="text-primary ml-2"></span><br><span class="text-danger">To help fair evaluation of your, please do not reveal your personal / hospital / Institution / Organisation identity.  Revealing the identity may lead to rejection of your abstract automatically.</span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="methods" id="methods" class="form-control" cols="50" rows="5" placeholder="Materials and Methods" value="">{{data.methods or ''}}</textarea>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col">
                <span><b>Results and Conclusions (not exceeding 1000 characters)  </b></span><span id="chars3" class="text-primary ml-2"></span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="results" id="results" class="form-control" cols="50" rows="5" placeholder="Results and conclusions" value="">{{data.results or ''}}</textarea>
            </div>
        </div>
        <div class="row py-2">
            <div class="col">
                 <input type="button" name="Previous" id="Previous" class="btn btn-primary" value="Previous" onclick="move(2,0)" />
            </div>
            <div class="col">
                 <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(2,1)" />
            </div>
        </div>
        <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" />
        <input type="hidden" name="abs_id" id="abs_id" value="{{abs_id}}" />
        <input type="hidden" name="abs_type" id="abs_type" value="{{data.abs_type}}" />
        <input type="hidden" name="step" id="step" value="2">
        <input type="hidden" name="is_next" id="is_next" value="1">
    </form>
</div>
<form id="img_form">
  <div class="modal" id="img_upload">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Video Presentation</h4>
          <button type="button" class="close close_btn" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body container">
          <div class="row">
            <div class="col">
                <label class="text-primary">Please Upload Image</label>
                <input type="file" name="file" id="file" class="form-control" required accept="Image/*">
            </div>
        </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-success upload_btn">Upload</button>
          <button type="button" class="btn btn-sm btn-danger close_btn" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</form>
{% block script %}
<script type="text/javascript">
    $(document).ready(function () {
        // img_upload functions
        var abs_id    = {{ data.abs_id }};
        var abs_type  = "{{ data.abs_type }}";
        var conf_id   = $("#conf_id").val();
        var conf_key  = $("#conf_key").val();
        $(".photo_upload").click(function() {
            $("#img_upload").show();
        })
        $(".upload_btn").click(function() {
          uploaduser()  
        })
        function uploaduser() {
           var fd = new FormData();
           var img = new FormData($("#img_form")[0]);
           fd.append('file', img);
           ShowProgress();
           $.ajax({
             type: 'POST',
             url: BaseUrl +"/img_upload/"+abs_id+"/"+abs_type+"/"+conf_id+"/"+conf_key,
             data: img,
             contentType: false,
             processData: false,
             cache: false,
             dataType: 'json',
           }).done(function(data, jqXHR) {
            // alert(data)
            $("#Upload_btn_div").hide();
            $("#img_upload").hide(); 
            $(".img_div").show();
            StopProgress(); 
            $("#uploaded_img").attr('src',data["path"]+data["file_name"])
            // $("#asset_data").val(data)
           }).fail(function(data) {StopProgress(); });
         }

         $(".photo_delete").click(function() {
            var r = confirm("confirm to delete!");
            if (r == true) {
            ShowProgress();
            $.ajax({
                type: "GET",
                url: BaseUrl +"/remove_img/"+conf_id+"/"+conf_key,
                data: {
                    'abs_id'  : abs_id,
                    'conf_id' : conf_id,
                    },
                dataType: "json",
                success: function (data) {
                StopProgress(); 
                $("#Upload_btn_div").show();
                $(".img_div").hide();
                return true;
              },
          }); 
            } 
            else {
                    
              }
        })

        $(".close_btn").click(function() {
            $('.modal').hide();
        })
        // end of img functionss
        var $title = $("#title");
        var $synopsis = $("#synopsis");
        var $methods = $("#methods");
        var $results = $("#results");
        var $chars = $("#chars");
        var $chars1 = $("#chars1");
        var $chars2 = $("#chars2");
        var $chars3 = $("#chars3");
        var x200 = 200;
        var x1000 = 1000;
        var x1500 = 1500;
        
        $chars.html (x200  + " characters remaining");
        $chars1.html(x1000 + " characters remaining");
        $chars2.html(x1500 + " characters remaining");
        $chars3.html(x1000 + " characters remaining");

        
        $title.on("keyup", countChar);
        $synopsis.on("keyup", countChar1);
        $methods.on("keyup", countChar2);
        $results.on("keyup", countChar3);
        
        countChar();
        countChar1();
        countChar2();
        countChar3();
        
        function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x200 - textLength;
            if (textRemaining < 0) {
                $chars.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars.html(textRemaining + " characters exceeded");
            } else {
                $chars.attr("class", "text-primary ml-2");
                $chars.html(textRemaining + " characters remaining");
            }
        }
        function countChar1() {
            var textLength = $synopsis.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars1.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars1.attr("class", "text-primary ml-2");
                $chars1.html(textRemaining + " characters remaining");
            }
        }
        function countChar2() {
            var textLength = $methods.val().length;
            var textRemaining = x1500 - textLength;
            if (textRemaining < 0) {
                $chars2.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars2.html(textRemaining + " characters exceeded");
            } else {
                $chars2.attr("class", "text-primary ml-2");
                $chars2.html(textRemaining + " characters remaining");
            }
        }
        function countChar3() {
            var textLength = $results.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars3.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars3.html(textRemaining + " characters exceeded");
            } else {
                $chars3.attr("class", "text-primary ml-2");
                $chars3.html(textRemaining + " characters remaining");
            }
        }
        // $("#previous").click(function () {
        //     var abs_id = $("#abs_id").val();
        //     var abs_type = $("#abs_type").val();
        //     $.ajax({
        //         type: "GET",
        //         url: BaseUrl + "/pp/step1",
        //         data: {
        //             abs_id: abs_id,
        //             abs_type: abs_type,
        //         },
        //         dataType: "html",
        //         success: function (data) {
        //             if (data == 0) {
        //             } else {
        //                 $("#content").html(" ");
        //                 $("#content").html(data);
        //             }
        //         },
        //     });
        // });
        // $("#next").click(function () {
        //     alert("in next");
        // });
    });
</script>
{% endblock %}