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 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 class="container">
      
      <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/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 = "inline" %}
                        {% else %}
                            {% set image_display = "none" %}    
                        {% endif %}
                        <label id="file_name" class="text-white">{{data2.file_name or ''}}</label><br> 
                        <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 = "none" %} 
                                {% set iframe_ppt_hide = "none" %} 
                                {% set img_hide = "none" %} 
                                
                                {% if ".pdf" in data2.file_name :%} 
                                    {% set iframe_hide = "inline" %} 
                                    <a href="{{ src }}" target="_blank" id="iframe" style="display: {{ iframe_hide }};background: orange;" class="btn text-white">Preview</a>
                                {% elif ".pptx" or ".ppt"  in data2.file_name :%} 
                                    {% set iframe_ppt_hide = "inline" %} 
                                    <a href="https://view.officeapps.live.com/op/embed.aspx?src={{ src }}"  target="_blank" style="display: {{ iframe_ppt_hide }};background: orange;" class="btn text-white">Preview</a>
                                    
                                {% else %} 
                                    {% set img_hide = "inline" %}
                                    <a href="{{ src }}" target="_blank" id="img" style="display: {{ img_hide }};background: orange;" class="btn text-white">Preview</a>
                                {% endif %} 
                            {% else %}
                                {% set  src= "" %}
                            {% endif %}
                            <img src="" id="img" alt="Proof" width="100%" height="auto" style="max-height: 150px;display:none" />
                            <iframe src=""  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 mt-3" 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 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">
              // 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) {
                            $(".progress").hide();
                          StopProgress();
                          // $("#Upload_btn_div").show();
                          $("#file_name").html('')
                          $("#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','ppt','pptx']) == -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);
         $(".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_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)
          $(".btn").attr("disabled", false);
          
            file_extension = data.file_extension;
            $("#file_name").html(data["file_name"])
            if((file_extension !=".pdf")&&(file_extension != ".pptx")&&(file_extension != ".ppt")){
            $("#img").attr('href',data["path"]+data["file_name"]);
            $("#iframe").hide();
            }
            if (file_extension ==".pdf"){
            $("#iframe").attr('href',data["path"]+data["file_name"]);
            $("#iframe").show();
            $("#img").hide();
            }
            if(file_extension == ".pptx"){
            $("#iframe").attr('href',"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('href',"https://view.officeapps.live.com/op/embed.aspx?src="+data["path"]+data["file_name"]);
            $("#iframe").show();
            $("#img").hide();
            }

            $("#file-field_"+file_type+" span").text("Change");
          
         }).fail(function(data) {
            $(".progress").hide();
         });
       }
      }
      function uploaduser_biodata(file_type) {
                  var oneMB   = 1048576 
      var ext = $('#file_biodata').val().split('.').pop().toLowerCase();
      if($.inArray(ext, ['pdf','ppt','pptx']) == -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);
         $(".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_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)
        //   $(".progress").hide();
        $(".btn").attr("disabled", false);
          
          $("#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 %}