Sindbad~EG File Manager

<ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item p-2">
            <button type="button" class="nav-link active " value="1" aria-selected="true">Step 1</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="2" onclick="{% if data.cur_step >= 1 %}jump_step(2){% endif %}">Step 2</button>
        </li>
       
        
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active p-2 rounded"  role="tabpanel" >
        <form method="POST" action="{{url_for('main.Step1post',abs_id=abs_id,abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s1">
            <div class="row mt-3">
                <div class="col form-group">
                    <label class="font-weight-bold" class="font-weight-bold">Presenting Author Membership Number :</label><br />
                    <span>{{user_info.membership_no or 'Non Member'}}</span>
                    <input type="hidden" name="member_id" id="member_id" value="{{ member_id or '' }}" />
                </div>
                <div class="col form-group">
                    <label class="font-weight-bold">Presenting Author Name :</label>
                    <br />
                    <span>{{user_info.full_name or ''}}</span>
                    <input type="hidden" name="name" id="name" value="{{ name or ''}}" />
                </div>
            </div>
             <div class="row ">
                <div class="col form-group">
                    <label class=""><b>Title(not exceeding 100 characters)</b> <span class="text-danger">*</span></label>
                    <span id="chars" style="color: red;"></span><span id="chars_text" style="color: blue;"></span>
                    <textarea name="title" id="title" class="form-control" placeholder="Title" value="">{{data.title or ''}}</textarea>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col form-group">
                    <label><b>Description (not exceeding 1000 characters)</b> <span class="text-danger">*</span><span id="chars1" class="text-danger ml-1"></span><span id="chars1_text" style="color: blue;"></span>
                    </label>
                     
                    <textarea name="synopsis" id="synopsis" class="form-control" cols="100" rows="10"  value="" placeholder="Description">{{data.synopsis or ''}}</textarea>
                </div>
            </div>
            <label><b>Upload your Image</b></label>
            <div class="row ">
                <div class="col-md-4 offset-md-4 mb-4">
                    <div class="card text-white text-center user_attach_card mb-3" >
                        <div class="card-header">Image<br>[ jpeg,jpg,png,gif ]</div>
                        <div class="card-body">
                             
                            {% if img.file_name %}
                                {% set image_display = "block" %}
                            {% else %}
                                {% set image_display = "none" %}    
                            {% endif %}

                            <div id="show_img" style="display:{{ image_display }}" >
                                {% if img.file_name : %} 
                                    {% set  src= img.path|string +""+img.file_name|string +"?"+Helper.getcurrenttimestamp()|string %}
                                    {% set img_hide = "block" %}
                                {% else %}
                                    {% set  src= "" %}
                                {% endif %}
                                
                                <img src="{{ src}}" id="img" alt="Proof" width="100%" height="auto" style="max-height: 150px;display: {{ img_hide }}">                                   
                            </div>
                            <div class="btn btn-primary btn-block file-field my-2" id="file-field">
                                <span>
                                    {% if src=="" %}
                                        Upload
                                    {% else %}
                                        Change
                                    {% endif %}
                                </span> 

                                <input type="file"  id="file" name="file" id="photo_upload" onchange ="uploaduser()" />
                            </div>
                            <input type="button" value="Delete" name="delete" style="display: {{ image_display }}" id="delete"  class="btn btn-danger btn-block  photo_delete form-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col float-right py-2">
                    <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(1,1)" />
                </div>
            </div>
       
            <input type="hidden" name="abs_id" id="abs_id" value="{{Cryptography.decrypt(abs_id)}}" />
            <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
            <input type="hidden" name="abs_type" id="abs_type" value="{{abs_type}}" />
            <input type="hidden" name="step" id="step" value="1" />
            <input type="hidden" name="step" id="is_next" value="1" />
        </form>
    </div>
</div>

{% block script %}
<script type="text/javascript">
    $(document).ready(function () {
        var $title       = $("#title");
        var $synopsis     = $("#synopsis");
       
        var $chars  = $("#chars");
        var $chars1 = $("#chars1");
        

        var chars_text  = $("#chars_text");
        var chars1_text = $("#chars1_text");
        
        var x100 = 100;
        var x1000 = 1000;

        chars_text.html(" characters remaining");
        $chars.css("color","red");
        $chars.html(x100);

        $chars1.css("color","red");
        $chars1.html(x1000);
        chars1_text.html(" characters remaining");

       
        
        $title.on("keyup", countChar);
        $synopsis.on("keyup", countChar1);
        
        
        function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x100 - textLength;
            if (textRemaining < 0) {
                $chars.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars.html(textRemaining1);
                chars_text.html(" characters exceeded");
                // $chars.html(textRemaining1 + " characters exceeded");
            } else {
                $chars.attr("class", "text-danger ml-2");
                chars_text.html(" characters remaining");
                $chars.html(textRemaining);
            }
        }
        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);
                chars1_text.html(" characters exceeded");
                // $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars1.attr("class", "text-danger ml-2");
                chars1_text.html(" characters remaining");
                $chars1.html(textRemaining);
            }
        }
        
    });
    
    $( ".file-field" ).on( "click", function() 
            {

                $(this).find('input[type="file"]')[0].click()
            });
            var abs_id    = $('#abs_id').val();
            var abs_type  = $('#abs_type').val();
            var conf_id   = $("#conf_id").val();
            var conf_key  = $("#conf_key").val();
            var oneMB   = 1048576 
            
            function uploaduser() {

            var ext = $('#file').val().split('.').pop().toLowerCase();
            if($.inArray(ext, ['gif','jpg','jpeg','png']) == -1) 
            {
                clear()
                alert('Invalid file type');
               
            }
            else if($('#file')[0].files[0].size > (oneMB*3))
            {
                alert('File Must less than 3MB');
            } 
            else
            {
                
               var fd = new FormData();
               var user_profile    = $('#file')[0].files[0];
               var file_name       = $('#file').val().split('\\').pop();
               $("#show_img").show();
               $("#delete").show();
               fd.append('file', user_profile);
               ShowProgress();
               $.ajax({
                 type: 'POST',
                 url: BaseUrl +"/img_upload/"+abs_id+"/"+abs_type+"/"+conf_id+"/"+conf_key,
                 data: fd,
                 contentType: false,
                 processData: false,
                 cache: false,
                 dataType: 'json',
               }).done(function(data, jqXHR) {
                // alert(data)
                StopProgress();
                
                $("#img").attr('src',data["path"]+data["file_name"]);
                $("#img").show();
                $("#file-field span").text("Change"); 
                
               }).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();
                    $("#show_img").hide();
                    $("#delete").hide();
                    $("#file-field span").text("Upload"); 
                    clear()
                    return true;
                  },
              });
                }
                else {

                  }
            })

            $(".close_btn").click(function() {
                $('.modal').hide();
            })


            function clear() 
            {
                $('input[type=file]').each(function() 
                {
                    $(this).val('');
                }); 
            
} 
    

    
</script>
{% endblock %}