Sindbad~EG File Manager

<div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item p-2">
            <button type="button" class="nav-link active " value="1">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>
<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="container" id="step1">
        <div class="row mt-3">
            <div class="col form-group">
                <label class="font-weight-bold">Presenting Author Membership Number :</label>
                <br />
                <div>{{user_info.membership_no or 'Non Member'}}<input type="hidden" name="member_id" id="member_id" value="{{user_info.membership_no}}" /></div>
                <br />
            </div>
            <div class="col form-group">
                <label class="font-weight-bold">Presenting Author Name :</label>
                <br />
                <div>{{user_info.full_name or ''}}<input type="hidden" name="name" id="name" value="{{user_info.full_name}}" /></div>
                <br />
            </div>
        </div>
        <div class="row">
            <div class="col form-group">
                <label class="font-weight-bold">Ophthalmic Photograph to be uploaded too:</label>
                <span class="text-danger">(JPG,JPEG, PNG)</span>
            </div>

            
        </div>
        <!-- <div id="searchmodel1" class="row">
        
            <div class="col text-center mt-2" id="uploaing_img"  >
                <button type="button" class="btn  btn-danger" id="upload_btn">Upload your Ophthalmic Photography</button>
            </div> -->
            <!-- style="border: 1px solid gray;padding: 29px;" -->
            <!-- <div class="col text-center" id="img_div"  >
                <img src="{{ data.path or '' }}{{ data.file_name or '' }}" width="200px" id="uploaded_img"><button class="btn" type="button" id="delete_img" value="{{ data.upload_id or '' }}"><i class="fa fa-trash"></i></button>
            </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 Ophthalmic Photography<br>[ jpg,jpeg,png ]</div>
                    <div class="card-body">
                         
                        {% if data.file_name %}
                            {% set image_display = "block" %}
                        {% else %}
                            {% set image_display = "none" %}    
                        {% endif %}

                        <div id="show_img" style="display:{{ image_display }}" >
                            {% if data.file_name : %} 
                                {% set  src= data.path|string +""+data.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 form-group">
                <label class="font-weight-bold">Section <span class="text-danger">*</span></label>
            </div>
        </div>
        <div class="row">
            <div class="col-6 form-group">
                <select class="form-control form-control-sm" name="section" id="section" >
                    <option value="">Select</option>
                    {% if categories %}
                    {% for cat in categories %}
                    <option value="{{ cat.category_id or '' }}">{{ cat.name }}</option>
                    {% endfor %}
                    {% endif %}
                </select>
                <br>
            </div>
        </div>
        <div class="row">
            <div class="col form-group">
                <label class="font-weight-bold">Title (Not exceeding 100 characters)<span class="text-danger"> * </span> </label>
                <span id="chars" style="color: red;"></span><span id="chars_text" style="color: blue;"></span>
            </div>
        </div>
        <div class="row">
            <div class="col form-group">
                <textarea name="title" id="title" class="form-control" rows="2">{{ data.title or '' }}</textarea>
                <br>
            </div>
        </div>
        <div class="row">
            <div class="col form-group">
                <label class="font-weight-bold">A brief description of photograph: ( Not exceeding 1000 Characters )<span class="text-danger">*</span></label>
                <span id="chars1" class="text-danger ml-1"></span><span id="chars1_text" style="color: blue;"></span>
            </div>
        </div>
        <div class="row">
            <div class="col form-group">
                <textarea name="synopsis" id="synopsis" class="form-control" rows="5">{{ data.synopsis or '' }}</textarea>
            </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>
    </div>
    <div id="step2"></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="step" id="step" value="1" />
    <input type="hidden" name="step" id="is_next" value="1" />
    <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step }}">
</form>
</div>
<!-- The Modal -->
<form id="upload_form_model"  >
<div class="modal " id="upload_model">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Upload your Ophthalmic Photography</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body container">
                <div class="row">
                    <div class="col">
                        <label><b class="text-red"> Note : </b>Please upload image only in ( JPEG , JPG , PNG , TIFF ) Format and Image size Under 5MB only  </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <input type="file" name="upload_file" id="upload_file" accept="image/*"  class="form-control" required >
                    </div>
                </div>
                <div class="row">
                    <div class="col p-4">
                        <input type="button" name="upload_img" id="upload_img" class="btn btn-success" value="Click here to Submit file">
                    </div>
                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
            <div id="searchmodel"></div>
        </div>
    </div>
</div>
</form>
{% block script %}

<script type="text/javascript">
    var BaseUrl = document.location.origin;
    var oneMB = 1048576;
    var conf_id = $("#conf_id").val();
    var conf_key = $("#conf_key").val();
    var abs_type = $("#abs_type").val();
    $(document).ready(function () 
    {
        $("#section").val({{ data.category_id or '' }})
        var path = "{{ data.path }}"
        if ( path != "None" ){
         $("#uploaing_img").hide();
        }
        else{
            $("#img_div").hide();
        }

        $("#upload_btn").click(function () {
            $("#upload_model").modal("show");
        });
        $("#search_model").keypress(function(e)
        {
          if(e.which == 13)
          {
          validate_search();
            return false
          }
          return true
        });
        });
    // $("#upload_img").click(function(){    
    //         if(!$("#upload_form_model").valid())
    //             {
    //                 return false  
    //             }
    //         var ext = $('#upload_file').val().split('.').pop().toLowerCase();
    //         if($.inArray(ext, ['gif','jpg','jpeg','png','jfif','tif','tiff']) == -1) 
    //         {
    //             alert('Invalid file type');
    //         }
    //         else if($('#upload_file')[0].files[0].size > (oneMB * 5))
    //         {
    //             alert('File Must less than 5MB');
    //         }
    //         else{
    //             uploadimg();
    //         }
    // })
    var $title = $('#title');
    var $Synopsis =$('#synopsis');
    var $chars   = $('#chars');
    var $chars1   = $('#chars1');
    var textMax = 100;
    var synopismax = 1000;

    var chars_text  = $("#chars_text")
    var chars1_text = $("#chars1_text")

    $chars.html(textMax + ' characters remaining');
    $chars1.html(synopismax + ' characters remaining');
    $title.on('keyup', countChar);
    $Synopsis.on('keyup',countChar1);
    function countChar() {
        var textLength = $title.val().length;
        var textRemaining = textMax - 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 = synopismax - textLength;
        if (textRemaining < 0) {
            $chars1.attr("class", "text-danger ml-2");
            var textRemaining1 = textRemaining;
            $chars1.html(textRemaining1);
            chars1_text.html(" characters exceeded");
            // $chars.html(textRemaining1 + " 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, ['jpg','jpeg','png']) == -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").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('');
                }); 
            
} 

    // function uploadimg() {
    //        var fd     = new FormData();
    //        var img    = new FormData($("#upload_form_model")[0]);
    //        var abs_id = $("#abs_id").val(); 
    //        fd.append('file', img);
    //        $.ajax({
    //          type: 'POST',
    //          url: BaseUrl +  "/upload_img/"+abs_id+"/"+abs_type+"/"+conf_id+"/"+conf_key,
    //          data: img,
    //          contentType: false,
    //          processData: false,
    //          cache: false,
    //          dataType: 'json',
    //        }).done(function(data, jqXHR) {
    //         // $("#asset_data").val(data)
    //         // $("#preview").attr("src","data:image/jpeg;base64,"+data)
    //         // alert("hello")
    //         $("#upload_model").modal("hide");
    //         $("#img_div").show();
    //         $("#uploaded_img").attr("src",data.path+data.file_name);
    //         $("#uploaing_img").hide();
    //         $("#delete_img").val(data.upload_id)
    //        }).fail(function(data) {});
    //      }
    // $("#delete_img").click(function(){
    //     var upload_id = $(this).val();
    //      $.ajax({
    //             type: "POST",
    //             url: BaseUrl + "/delete_img/"+abs_type+"/"+conf_id+"/"+conf_key,
    //             data: {'upload_id':upload_id },
    //             dataType: "json",
    //             success: function (data) {
    //                 // alert(data);
    //                 $("#img_div").hide();
    //                 $("#uploaing_img").show();
    //                 // $("#addcoinst").modal('show');
    //             },
    //         });
    // })
</script>
{% endblock %}