Sindbad~EG File Manager

<div class="container">
    <div class="row">
        <div class="col form-group">
<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 nav_btn_gray " value="3"  onclick="jump_step(3)">Step 3</button>
      </li>
      <li class="nav-item p-2">
          <button type="button" class="nav-link active" value="4">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>
    </div>
      <form action="{{url_for('main.Step4post',abs_id=abs_id,abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s4">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <table class="table table-bordered" style="text-align:center;">
              <tr>
                <td>Do the Chief/Presenting/Co-Author have any financial interest? <span class="text-danger">*</span><br><label id="misc1-error" class="error" for="misc1"></label></td>
                <td><label><input type="radio" name="misc1" id="misc1" {% if data.misc1 == "1" %}checked{% endif %} value="1">Yes</label><br>
                  <label><input type="radio" name="misc1" id="misc1" {% if data.misc1 == "0" %}checked{% endif %} value="0">No</label></td>
              </tr>
            </table>
          </div>
        </div>
        <div class="row ">
            <div class="col-md-8 offset-md-2 mb-4">
                <div class="card text-white text-center bg-secondary mb-3" >
                    <div class="card-header">Your presentation in PPT/PPTX format</div>
                    <div class="card-body">
                        {% if uploaded_data %}
                           {% set uploaded_data = uploaded_data[0] %}
                        {% endif %}
                        {% if uploaded_data %}
                            
                            {% set data2 = uploaded_data %}
                            
                        {% else %}
                            {% set data2 = [] %}
                        {% endif %}
                           
                        {% if data2.file_name %}
                            {% set image_display = "block" %}
                        {% else %}
                            {% set image_display = "none" %}    
                        {% endif %}
                        <input type="hidden" id="upload_id" value="{{data2.upload_id}}">
                        <!-- <label id="file_name" class="text-white">{{data2.file_name}}</label><br><br> -->
                        <div id="show_img" style="display:{{ image_display }}" >
                            {% if data2.file_name : %} 
                                {% set  src= data2.path|string +""+data2.file_name|string +"?"+Helper.getcurrenttimestamp()|string %}
                                {% set iframe_hide = "none" %} 
                                {% set iframe_ppt_hide = "none" %} 
                                {% set img_hide = "none" %} 
                                
                                {% if ".pdf" in data2.file_name :%} 
                                    {% set iframe_hide = "block" %} 
                                    <iframe src="{{ src }}" id="iframe" alt="Proof" width="100%" height="auto" allow="encrypted-media" allowfullscreenstyle="max-height: 150px;" style="max-height: 150px;display: {{ iframe_hide }}" frameborder="0" border="0" allowtransparency="true"> </iframe>
                                {% elif ".pptx" or ".ppt"  in data2.file_name :%} 
                                    {% set iframe_ppt_hide = "block" %} 
                                        <iframe src="https://view.officeapps.live.com/op/embed.aspx?src={{ src }}" id="iframe" alt="Proof" width="100%" height="auto" allow="encrypted-media" allowfullscreenstyle="max-height: 150px;" style="max-height: 150px;display: {{ iframe_ppt_hide }}" frameborder="0" border="0" allowtransparency="true"> </iframe>
                                {% else %} 
                                    {% set img_hide = "block" %}
                                    <img src="{{ src }}" id="img" alt="Proof" width="100%" height="auto" style="max-height: 150px;display: {{ img_hide}} " />
                                {% endif %}
                            {% else %}
                                {% set  src= "" %}
                            {% endif %}
                            <img src="" id="img" alt="Proof" width="100%" height="auto" style="max-height: 150px;display:none" />
                            <iframe src="" id="iframe" alt="Proof" width="100%" height="auto" allow="encrypted-media" allowfullscreenstyle="max-height: 150px;" style="max-height: 150px;display:none" frameborder="0" border="0" allowtransparency="true"> </iframe>
                            
                        </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"  onchange ="uploaduser('fppresentation')" />
                        </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"  name="delete" style="display: {{ image_display }}" id="delete"  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(4,0)" />
            </div>
            <div class="col">
                 <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(4,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="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
        <input type="hidden" name="step" id="step" value="4">
        <input type="hidden" name="is_next" id="is_next" value="1">
      </form>
      {% block script %}
<script type="text/javascript">
    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!");
        var upload_id = $('#upload_id').val();
        if (r == true) {
            ShowProgress();
            $.ajax({
                type: "GET",
                 url: BaseUrl +"/remove_img/"+conf_id+"/"+conf_key,
                data: {
                    'abs_id'  : abs_id,
                    'upload_id' : upload_id,
                    },
                dataType: "json",
                success: function (data) {
                $(".progress").hide();
                StopProgress();      
                $("#show_img").hide();
                $("#delete").hide();
                $("#file-field span").text("Upload"); 
                clear()
                return true;
                },
            });
        }
        else {}
    })
      
                  
      
function clear() 
{
    $('input[type=file]').each(function() 
    {
        $(this).val('');
    }); 
    $('input[name=upload_id]').each(function() 
    {
        $(this).val('');
    });   
                  
} 
              
function uploaduser(file_type) {
    
    var oneMB   = 1048576 
    var ext = $('#file').val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['ppt','pptx']) == -1) 
    {
        clear()
        alert('Invalid file type'); 
    }
    else if($('#file')[0].files[0].size > (oneMB*20))
    {
        alert('File Must less than 20MB');
    } 
    else
    {
        $("#file-field span").text("Please wait...");
         var fd = new FormData();
         var user_profile    = $('#file')[0].files[0];
         var file_name       = $('#file').val().split('\\').pop();
         
         fd.append('file', user_profile);
         fd.append('img_type',file_type)
         $(".progress").show();
         $(".btn").attr("disabled", true);
         $.ajax({
            xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                percentComplete = parseInt(percentComplete * 100);
                // console.log(percentComplete);
                $('.progress-bar').css({'width':percentComplete+'%'});
                $('.progress-bar').html(percentComplete+'%');
                if (percentComplete === 100) {
                    alert('File successfully uploaded')
                        }
                    }
                }, false);
                return xhr;
            },
           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)
          $(".btn").attr("disabled", false);
          
          
            file_extension = data.file_extension;
            
            $('#upload_id').val(data.upload_id);
            $("#show_img").show();
            $("#delete").show();
            if((file_extension !=".pdf")&&(file_extension != ".pptx")&&(file_extension != ".ppt")){
            $("#img").attr('src',data["path"]+data["file_name"]);
            $("#iframe").hide();
            // $("#iframe_pdf").hide();
            }
            if (file_extension ==".pdf"){
                // alert('---')
            $("#iframe").attr('src',data["path"]+data["file_name"]);
            $("#iframe").show();
            $("#img").hide();
            }
            if(file_extension == ".pptx"){
            $("#iframe").attr('src',"https://view.officeapps.live.com/op/embed.aspx?src="+data["path"]+data["file_name"]);
            $("#iframe").show();
            $("#img").hide();
            
            }
            if(file_extension == ".ppt"){
            // alert(data["path"]+data["file_name"])
            $("#iframe").attr('src',"https://view.officeapps.live.com/op/embed.aspx?src="+data["path"]+data["file_name"]);
            $("#iframe").show();
            $("#img").hide();
            
            }
            $("#file-field span").text("Change");
          
         }).fail(function(data) {
            $(".progress").hide();
         });
       }
      }
         
      </script>
      {% endblock %}