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 nav_btn_gray" value="1" onclick="jump_step(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="jump_step(2)">Step 2</button>
    </li>
    <li class="nav-item p-2">
        <button type="button" class="nav-link active" value="3">Step 3</button>
    </li>
    <li class="nav-item p-2">
        <button type="button" class="nav-link nav_btn_gray" value="4" onclick="{% if data.cur_step >= 3 %} jump_step(4) {% endif %}">Step 4</button>
    </li>
    
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active p-2 rounded" role="tabpanel">
        <form id="form_s3" class="form_s3" action="{{url_for('main.Step3post',abs_id=abs_id,abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" method="POST">
            <div class="row">
                <div class="col text-center"></div>
            </div>
            <div class="row">
                <div class="col mt-2">
                    <label>Applicants must have passed MS/MD/DNB at the time of submission. Proof of passing must be uploaded here</label>
                </div>
            </div>
        <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">Proof<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 py-2">
                <div class="col">
                    <input type="button" name="Previous" id="Previous" class="btn btn-primary" value="Previous" onclick="move(3,0)" />
                </div>
                <div class="col">
                    <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(3,1)" />
                </div>
                <input type="hidden" name="abs" id="abs_id" value="{{abs_id}}" />
                <input type="hidden" name="abs_type" id="abs_type" value="{{abs_type}}" />
                <input type="hidden" name="step" id="step" value="3" />
                <input type="hidden" name="is_next" id="is_next" value="1" />
                <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}" />
            </div>
        </form>
    </div>
</div>


{% block script %}
<script type="text/javascript">
            // img_upload functions
            $( ".file-field" ).on( "click", function() 
            {

                $(this).find('input[type="file"]')[0].click()
            });
            var abs_id    = "{{ data.abs_id }}";
            var abs_type  = "{{ data.abs_type }}";
            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();
                
               }).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 %}