Sindbad~EG File Manager

<div class="row">
    <div class="col form-group">
        <label class="font-weight-bold">Upload File:</label>
    </div>
</div>
<div class="alert alert-success alert-dismissible fade show" id="success_msg_cd" role="alert">
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
{% set upload_details = abstract[0] %}
<input type="hidden" name="attach_extension" id="attach_extension" value="{{upload_details.upload_ext_type or ''}}">
<input type="hidden" name="file_size" id="file_size" value="{{upload_details.upload_file_size or ''}}">
<input type="hidden" name="upload_image_type" id="upload_image_type" value="{{upload_details.upload_image_type or ''}}">

<div class="row">
    <div class="col-md-4 offset-md-4 mb-4">
        <div class="card text-center user_attach_card mb-3">
            <div class="card-header text-white">
                Upload your {{upload_details.upload_image_type or ''}}<br />
                [{{upload_details.upload_ext_type|upper or ''}}]
            </div>
            <div class="card-body">
                {% if img %}
               {% set img = img[0] %}
               {% endif %}
                {% if img.file_name %} 
                    {% set image_display = "block" %} 
                {% else %} 
                    {% set image_display = "none" %} 
                {% endif %} 
                <input type="hidden" name="upload_id" id="upload_id" value="{{img.upload_id}}">
                <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 iframe_hide = "none" %} 
                        {% set iframe_ppt_hide = "none" %} 
                        {% set img_hide = "none" %} 
                        {% set video_hide = "none" %} 
                        {% if ".pdf" in img.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 ".MP4" or ".mp4" in img.file_name :%}
                            {% set video_hide = "block" %} 
                                <video id="video_file"  width="100%" height="auto" controls autoplay controlsList="nodownload" style="display: {{ video_hide }}">                                    
                                    <source id="video" src="{{ src}}" type="video/mp4">
                                </video>
                        {% elif ".pptx" or ".ppt"  in img.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 %}
                    <video id="video_file" width="100%" height="auto" controls autoplay controlsList="nodownload" style="display:none" >
                                <source id="video" src="" type="video/mp4">
                    </video>
                    <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()" />
                </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>
<script type="text/javascript">
    $("#success_msg_cd").hide();
    // img_upload functions
    $( ".file-field" ).on( "click", function() 
    {

        $(this).find('input[type="file"]')[0].click()
    });
    var abs_id    = "{{abs_id}}";
    var abs_type  = $("#abs_type").val();
    var conf_id   = $("#conf_id").val();
    var conf_key  = $("#conf_key").val();
    var oneMB     = 1048576 
    var file_size = $('#file_size').val();
            
    function uploaduser() {
        var ext = $('#file').val().split('.').pop().toLowerCase();
         var attach_extension = $('#attach_extension').val();

        if($.inArray(ext,attach_extension.split(',')) == -1) 
        {
            clear()
            alert('Invalid file type');
           
        }
        else if($('#file')[0].files[0].size > (oneMB*file_size))
        {
            alert('File Must less than '+file_size+' MB');
        } 
        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();
           var img_type = $('#upload_image_type').val();
           
           
           fd.append('file', user_profile);
           fd.append('img_type',img_type)
           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) {
            StopProgress();
            file_extension = data.file_extension;
            // alert(data.upload_id)
            $('#upload_id').val(data.upload_id);
            $("#show_img").show();
            $("#delete").show();
            if((file_extension !=".pdf")&&(file_extension != ".pptx")&&(file_extension != ".ppt")&&(file_extension != ".mp4")){
            $("#img").attr('src',data["path"]+data["file_name"]);
            $("#img").show();
            $("#iframe").hide();
            $("#video_file").hide();
            }
            if (file_extension ==".pdf"){
            $("#iframe").attr('src',data["path"]+data["file_name"]);
            $("#iframe").show();
            $("#img").hide();
            $("#video_file").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();
            $("#video_file").hide();
            }
            if(file_extension == ".ppt"){
            $("#iframe").attr('src',"https://view.officeapps.live.com/op/embed.aspx?src="+data["path"]+data["file_name"]);
            $("#iframe").show();
            $("#img").hide();
            $("#video_file").hide();
            }
            if(file_extension == ".mp4"){
            $("#video_file").attr('src',data["path"]+data["file_name"]);
            $("#video_file").show()
            $("#iframe").hide();
            $("#img").hide();
            }
            $('#success_msg_cd').show();
            $("#success_msg_cd").html("Successfully uploaded");
            $("#file-field span").text("Change");
            setTimeout(function(){ 
               $("#success_msg_cd").hide()
              $("#success_msg_cd").css("background" ,"#ffffff" );
               $("#success_msg_cd").html('');
            }, 20000);
           }).fail(function(data) {
            StopProgress();
           });
         }
     }
    $(".photo_delete").click(function() 
    {
        var upload_id = $('#upload_id').val();
        var r         = confirm("confirm to delete!");
        if (r == true) 
        {
            ShowProgress();
            $("#success_msg_cd").hide()
            $.ajax({
                type: "GET",
                url: BaseUrl +"/remove_img/"+conf_id+"/"+conf_key,
                data: {
                    'upload_id' : upload_id,
                    'abs_id'    : abs_id,
                    'conf_id'   : conf_id,
                    },
                dataType: "json",
                success: function (data) {
                StopProgress();
                // $("#Upload_btn_div").show();
                $("#show_img").hide();
                $("#delete").hide();
                $('#upload_id').val('');
                $("#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('');
        });     
    }
</script>