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 active " value="2">Step 2</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="3" onclick="{% if data.cur_step >= 2 %}jump_step(3){% endif %}">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>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="5" onclick="{% if data.cur_step >= 4 %}jump_step(5){% endif %}">Step 5</button>
        </li>
    </ul>

<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="row ">
            <div class="col-md-4 offset-md-4 mb-4">
                <div class="card text-white text-center bg-secondary mb-3" >
                    <div class="card-header">Upload your full text here in PDF format</div>
                    <div class="card-body">
                        {% if uploaded_data %}
                        {% if uploaded_data[0] and uploaded_data[0]["img_type"] == "fulltext" %}
                            {% set data2 = uploaded_data[0] %}
                        {% elif uploaded_data[1] and uploaded_data[1]["img_type"] == "fulltext" %}
                            {% set data2 = uploaded_data[1] %}
                        {% else %}
                        {% set data2 = [] %}
                        {% endif %}
                        {% else %}
                        {% set data2 = [] %}
                        {% endif %}
                         
                        {% if data2.file_name %}
                            {% set image_display = "block" %}
                        {% else %}
                            {% set image_display = "none" %}    
                        {% endif %}

                        <div id="show_img_fulltext" style="display:{{ image_display }}" >
                            {% if data2.file_name : %} 
                                {% set  src= data2.path|string +""+data2.file_name|string +"?"+Helper.getcurrenttimestamp()|string %}
                                {% set iframe_hide = "block" %}
                            {% else %}
                                {% set  src= "" %}
                            {% endif %}
                            
                            <iframe src="{{ src }}" id="iframe_fulltext" alt="iamge" width="100%" height="auto" allow="encrypted-media"
                            allowfullscreenstyle="max-height: 150px;" style="display: {{ iframe_hide }}"></iframe>                                
                        </div>
                        <div class="btn btn-primary btn-block file-field my-2" id="file-field_fulltext">
                            <span>
                                {% if src=="" %}
                                    Upload
                                {% else %}
                                    Change
                                {% endif %}
                            </span> 

                            <input type="file"  id="file" name="file" id="fulltext-upload " onchange ="uploaduser('fulltext')" />
                        </div>
                        <!-- <input type="button" value="Delete" name="delete" style="display: {{ image_display }}" id="delete"  class="btn btn-danger btn-block  photo_delete form-input"> -->
                        <button type="button" value="fulltext" name="delete" style="display: {{ image_display }}" id="delete_fulltext"  class="btn btn-danger btn-block  photo_delete form-input">Delete</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-md-4 offset-md-4 mb-4">
                <div class="card text-white text-center bg-secondary mb-3" >
                    <div class="card-header">Upload your bio-data here in PDF format</div>
                    <div class="card-body">
                        {% if uploaded_data %}
                        {% if uploaded_data[0] and uploaded_data[0]["img_type"] == "biodata" %}
                           {% set data1 = uploaded_data[0] %}
                        {% elif uploaded_data[1] and uploaded_data[1]["img_type"] == "biodata" %}
                            {% set data1 = uploaded_data[1] %}
                        {% else %}
                            {% set data1 = [] %}
                        {% endif %}
                        {% else %}
                        {% set data1 = [] %}
                        {% endif %}

                        {% if data1.file_name %}
                            {% set image_display = "block" %}
                        {% else %}
                            {% set image_display = "none" %}    
                        {% endif %}

                        <div id="show_img_biodata" style="display:{{ image_display }}" >
                            {% if data1.file_name : %} 
                                {% set  src= data1.path|string +""+data1.file_name|string +"?"+Helper.getcurrenttimestamp()|string %}
                                {% set iframe_hide = "block" %}
                            {% else %}
                                {% set  src= "" %}
                            {% endif %}
                            
                            <iframe src="{{ src}}" id="iframe_biodata" alt="iamge" width="100%" height="auto" allow="encrypted-media"
                            allowfullscreenstyle="max-height: 150px;" style="display: {{ iframe_hide }}"></iframe>                                
                        </div>
                        <div class="btn btn-primary btn-block file-field my-2" id="file-field_biodata">
                            <span>
                                {% if src=="" %}
                                    Upload
                                {% else %}
                                    Change
                                {% endif %}
                            </span> 

                            <input type="file"  id="file_biodata" name="file" id="bio_data" onchange ="uploaduser_biodata('biodata')" />
                        </div>
                        <!-- <input type="button" value="Delete" name="delete" style="display: {{ image_display }}" id="delete"  class="btn btn-danger btn-block  photo_delete form-input"> -->
                        <button type="button" value="biodata" name="delete" style="display: {{ image_display }}" id="delete_biodata"  class="btn btn-danger btn-block  photo_delete form-input">Delete</button>
                    </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(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="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
        <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">Oral 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" 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">
        // 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();
        $( ".file-field" ).on( "click", function() 
            {

                $(this).find('input[type="file"]')[0].click()
            });
            
            
            
            
            $(".photo_delete").click(function() {
                var r = confirm("confirm to delete!");
                file_type = $(this).val();
                if (r == true) {
                ShowProgress();
                $.ajax({
                    type: "GET",
                    url: BaseUrl +"/remove_img_v1/"+file_type+"/"+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_"+file_type).hide();
                    $("#delete_"+file_type).hide();
                    $("#file-field_"+file_type+" span").text("Upload"); 
                    clear()
                    return true;
                  },
              });
                }
                else {

                  }
            })

            

    function clear() 
            {
                $('input[type=file]').each(function() 
                {
                    $(this).val('');
                }); 
            
} 
        
        function uploaduser(file_type) {
            var oneMB   = 1048576 
var ext = $('#file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf']) == -1) 
{
    clear()
    alert('Invalid file type');
   
}
else if($('#file')[0].files[0].size > (oneMB*20))
{
    alert('File Must less than 20MB');
} 
else
{
    
   var fd = new FormData();
   var user_profile    = $('#file')[0].files[0];
   var file_name       = $('#file').val().split('\\').pop();
   $("#show_img_fulltext").show();
   $("#delete_fulltext").show();
   fd.append('file', user_profile);
   ShowProgress();
   $.ajax({
     type: 'POST',
     url: BaseUrl +"/img_upload_v1/"+abs_id+"/"+abs_type+"/"+file_type+"/"+conf_id+"/"+conf_key,
     data: fd,
     contentType: false,
     processData: false,
     cache: false,
     dataType: 'json',
   }).done(function(data, jqXHR) {
    // alert(data)
    StopProgress();
    
    $("#iframe_"+file_type).attr('src',data["path"]+data["file_name"]);
    $("#iframe_"+file_type).show();
    $("#file-field_"+file_type+" span").text("Change"); 
    
   }).fail(function(data) {
    StopProgress();
   });
 }
}
function uploaduser_biodata(file_type) {
            var oneMB   = 1048576 
var ext = $('#file_biodata').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf']) == -1) 
{
    clear()
    alert('Invalid file type');
   
}
else if($('#file_biodata')[0].files[0].size > (oneMB*20))
{
    alert('File Must less than 20MB');
} 
else
{
    
   var fd = new FormData();
   var user_profile    = $('#file_biodata')[0].files[0];
   var file_name       = $('#file_biodata').val().split('\\').pop();
   $("#show_img_biodata").show();
   $("#delete_biodata").show();
   fd.append('file', user_profile);
   ShowProgress();
   $.ajax({
     type: 'POST',
     url: BaseUrl +"/img_upload_v1/"+abs_id+"/"+abs_type+"/"+file_type+"/"+conf_id+"/"+conf_key,
     data: fd,
     contentType: false,
     processData: false,
     cache: false,
     dataType: 'json',
   }).done(function(data, jqXHR) {
    // alert(data)
    StopProgress();
    
    $("#iframe_"+file_type).attr('src',data["path"]+data["file_name"]);
    $("#iframe"+file_type).show();
    $("#file-field_biodata span").text("Change"); 
    
   }).fail(function(data) {
    StopProgress();
   });
 }
}
   
</script>
{% endblock %}