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>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active p-2 rounded" role="tabpanel">
        <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">
                    <label class=""><b>Title of the Video (not exceeding 100 characters)</b> <span class="text-danger">*</span></label>
                    <span id="chars" style="color: red;"></span><span id="chars_text" style="color: blue;"></span>
                    <textarea name="title" id="title" class="form-control" placeholder="Title of video" value="">{{data.title or ''}}</textarea>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col">
                    <label><b>Synopsis (not exceeding 1000 characters)</b> <span class="text-danger">*</span><span id="chars1" class="text-danger ml-1"></span><span id="chars1_text" style="color: blue;"></span></label>
                     
                    <textarea name="synopsis" id="synopsis" class="form-control" cols="50" rows="5" placeholder="Synopsis" value="">{{data.synopsis or ''}}</textarea>
                </div>
            </div><br>
            <div class="row " {% if not img %}   id="video_div" {% endif %}>
                <div class="col-md-6 offset-md-3 mb-4" id="video_upload">
                    <div class="card text-white text-center user_attach_card mb-3" >
                        <div class="card-header">Video<br>[Format : MP4 ]<br>Max file size: 500 MB<br>Duration: 6 mins only</div>
                        <div class="card-body">
                            {% if img : %}
                             {% set img=img[0] %}
                             {% endif %}
                            {% if img.path : %}
                                {% set image_display = "block" %}
                            {% else %}
                                {% set image_display = "none" %}    
                            {% endif %}

                            <div id="show_img" style="display:{{ image_display }}" >
                                {% if img.path : %} 
                                    {% set  src= img.path+img.file_name %}
                                    {% set img_hide = "block" %}
                                {% else %}
                                    {% set  src= "" %}
                                {% endif %}
                                
                                <video id="video_file" width="100%" height="auto" controls autoplay controlsList="nodownload">                                    
                                    <source id="video" src="{{ src}}" type="video/mp4">
                                </video>
                                    <!-- <img src="{{ src}}" id="img" alt="Proof" width="100%" height="auto" style="max-height: 150px;">                                    -->
                            </div>
                                <div class="progress" style="display:none;">
                                    <div class="progress-bar " max="100" value="0"> </div>
                                </div>
                                <button type="button" style="display:none;" class="progress_btn btn btn-danger" id="cancel_upload">Cancel Upload</button>
                            <div class="btn btn-primary btn-block file-field-video my-2 " id="file-field-video">
                                <span>
                                    {% if src=="" %}
                                      Click here to upload Video
                                    {% else %}
                                        Click here to change Video
                                    {% endif %}
                                </span> 
                                <input type="file" class="d-none" id="addVideosInput" accept=" video/*" onchange="uploadFile()">
                            </div>
                                <button type="button" value="{{img.upload_id}}" name="delete" style="display: {{ image_display }}" id="delete" class="btn btn-danger btn-block photo_delete form-input" />Delete</button>
                            <div class=" btn btn-primary file-field-vide1 btn-block" style="display:none;"></div>
                        </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="de_abs_id" id="de_abs_id" value="{{Cryptography.decrypt(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" />
            <input type="hidden" name="file_name" id="file_name" {% if img.file_name %}value="{{img.file_name}}"{% endif %} >
        </form>
    </div>
   {% block script %}
<script src="https://cdn.jsdelivr.net/npm/aws-sdk/dist/aws-sdk.min.js"></script>
   
<script type="text/javascript">
    $(document).ready(function () {
        var conf_id=$("#conf_id").val();
        var conf_key=$("#conf_key").val();
        var oneMB   = 1048576 
        var abs_id = $("#de_abs_id").val();
        var abs_type = $("#abs_type").val();

        var $title = $("#title");
        var $synopsis = $("#synopsis");
        var $chars = $("#chars");
        var $chars1 = $("#chars1");
        var x100 = 100;
        var x1000 = 1000;
        

        var chars_text  = $("#chars_text")
        var chars1_text = $("#chars1_text")
        chars_text.html(" characters remaining");
        $chars.css("color","red");
        $chars.html(x100);
        $chars1.css("color","red");
        $chars1.html(x1000);
        chars1_text.html(" characters remaining");
        
        $title.on("keyup", countChar);
        $synopsis.on("keyup", countChar5);
        
        function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x100 - 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 countChar5() {
            var textLength = $synopsis.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars1.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars1.html(textRemaining);
                chars1_text.html(" characters exceeded");
                // $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars1.attr("class", "text-danger ml-2");
                chars1_text.html(" characters remaining");
                $chars1.html(textRemaining);
            }
        }
        
        $(".photo_delete").click(function(){
            var upload_id=$(this).val();
            var path='abs_uploads'+'/'+conf_key +'/'+ abs_type +'/'+ abs_id;
            var file_name=$("#file_name").val();
            // alert(file_name)
            // return false;
            $.ajax({
                type: "POST",
                url: BaseUrl + "/delete_file",
                data: {
                    'upload_id': upload_id,
                    'path': path,
                    'file_name':file_name
                },
                // dataType: "html",
                success: function (data) {
                    $("#video_file").hide()
                    $('.file-field-vide1').html('Click here to upload Video');
                    $(".photo_delete").hide();
                },
            });
        });
            
        });

        // $("#previous").click(function () {
        //     var abs_id = $("#abs_id").val();
        //     var abs_type = $("#abs_type").val();
        //     $.ajax({
        //         type: "GET",
        //         url: BaseUrl + "/pp/step1",
        //         data: {
        //             abs_id: abs_id,
        //             abs_type: abs_type,
        //         },
        //         dataType: "html",
        //         success: function (data) {
        //             if (data == 0) {
        //             } else {
        //                 $("#content").html(" ");
        //                 $("#content").html(data);
        //             }
        //         },
        //     });
        // });
        // $("#next").click(function () {
        //     alert("in next");
        // });
    // });
     $( ".file-field-video" ).on( "click", function() 
        {
            $(this).find('input[type="file"]')[0].click()

        });
     
    function uploadFile() {
        var conf_id=$("#conf_id").val();
        var conf_key=$("#conf_key").val();
        var oneMB   = 1048576 
        var abs_id = $("#de_abs_id").val();
        var abs_type = $("#abs_type").val();
        

        // alert("calling aws sdk js ")
            // var abs_id = $("#abs_id").val();
            var conf_key = $("#conf_key").val();
            var ext = $('#addVideosInput').val().split('.').pop().toLowerCase();
            const file = $('#addVideosInput')[0].files[0];

            if (!file) {
                alert('Please select a file to upload.');
            }
            else if($('#addVideosInput')[0].files[0].size > (oneMB*500))
            {
                alert('File Must less than 500MB');
            }
            else if (($.inArray(ext, ['mp4']) == -1) ){
                alert('Invalid file type');
            }
            
            else { 

                $('.file-field-vide1').show()
               $('.file-field-video').hide()
               $(".photo_delete").hide();
               $('.file-field-vide1').html('Uploading ....');

                var filename=file.name;
                 var file_name=filename.replace(/\s/g, '_'); // code for remove name space
                // var result = $.base64.encode(filename)
                // alert(file_name)

                
                $("#file_name").val(file_name)
                // return false
                const bucketName = 'common-application';
                const key = 'abs_uploads'+'/'+conf_key +'/'+ abs_type +'/'+ abs_id+'/'+file_name; // Set the key (path) for the file in the bucket
                // alert(key)
                AWS.config.update({
                    accessKeyId: "AKIAIVJULUNYWYOTNLAQ",
                    secretAccessKey: "G9kEjx+3MfwYSPxupwRISUNDRecBAaqVhYKfFZp3",
                    region: 'ap-southeast-1', // e.g., us-east-1
                });

                const s3 = new AWS.S3();

                const params = {
                    Bucket: bucketName,
                    Key: key,
                    Body: file,
                    ACL: 'public-read', // Adjust the ACL as needed
                };

                s3.upload(params, (err, data) => {
                    if (err) {
                        alert('Error uploading file:', err)
                        console.error('Error uploading file:', err);
                    } else {
                        // console.log('https//'data.)
                        console.log('File uploaded successfully:', data.Location);
                        $("#show_img").show()
                        $("#video_file").attr("src",data.Location)
                        $('.file-field-vide1').html('Successfully Uploaded');
                        $(".progress").hide();
                       $(".progress_btn").hide();
                       $(".photo_delete").show();
                       upload_video_file()
                        setTimeout(function() {
                             $('.file-field-vide1').hide()
                       $('.file-field-video').show()
                        },3000)
                
                        // You can perform additional actions after successful upload
                    }
                });
            }
        }
        function upload_video_file() {
        var abs_id = $("#de_abs_id").val();
        var conf_id = $("#conf_id").val();
        var conf_key = $("#conf_key").val();
        var abs_type=$("#abs_type").val();
        var file_name=$("#file_name").val();
        // alert(file_name)
        $.ajax({
            type: "POST",
            url: BaseUrl +"/save_upload_details/"+abs_id+"/"+abs_type+"/"+ conf_id + "/" + conf_key,
            data: { 'file_name': file_name },
            dataType: "json",
            success: function (data) {
                $("#delete").val(data['max'])
            },
        });
        return false;
    }
</script>
{% endblock %}
</div>