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 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>
<div class="tab-content " id="myTabContent">
    <div class="tab-pane fade show active p-2 rounded"  role="tabpanel" >
    <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>
            <div class="row mt-2">
                <div class="col form-group">
                    <label class="font-weight-bold">Delegate number</label><br />
                    <span>{{delData.delegate_no or ''}}</span>
                </div>
                <div class="col form-group">
                    <label class="font-weight-bold">Membership number</label><br />
                    <span>{{user_info.membership_no or 'Non-Member'}}</span>
                </div>
                <div class="col form-group">
                    <label class="font-weight-bold"> Name</label><br />
                    <span>{{user_info.prefix or ''}}{{user_info.full_name or ''}}</span>
                </div>
            </div><br>
            <div class="row">
                <div class="col-6 form-group">
                    <label class="font-weight-bold">Category <span class="text-danger">*</span></label>
                </div>
            </div>
            <div class="row">
                <div class="col-6 form-group">
                    <select class="form-control" id="misc1" name="misc1" required>
                        <option id="select" value="">Select category</option>
                        <option value="Dancing" {{ 'selected' if data.misc1=='Dancing' }}>Dancing</option>
                        <option value="Drawing" {{ 'selected' if data.misc1=='Drawing' }}>Drawing</option>
                        <option value="Mimicry" {{ 'selected' if data.misc1=='Mimicry' }}>Mimicry</option>
                        <option value="Painting" {{ 'selected' if data.misc1=='Painting' }}>Painting</option>
                        <option value="Photography" {{ 'selected' if data.misc1=='Photography' }}>Photography</option>
                        <option value="Singing" {{ 'selected' if data.misc1=='Singing' }}>Singing</option>
                        <option value="Others" {{ 'selected' if data.misc1=='Mimicry' }}>Others</option>
                      </select>
                   
                </div>
            </div>
            <div class="row">
                <div class="col-12 form-group">
                    <label class="font-weight-bold">Title <span class="text-danger">*</span></label>
                </div>
                <div class="col-12 form-group">
                    <textarea type="text" name="title" id="title" class="form-control" value="" placeholder="Title">{{ data.title or '' }}</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-12 form-group">
                    <label class="font-weight-bold">Description</label>
                </div>
                <div class="col-12 form-group">
                    <textarea type="text" name="synopsis" id="synopsis" class="form-control" value="" placeholder="Description">{{ data.synopsis or '' }}</textarea>
                </div>
            </div>
            
            <div class="row ">
                <div class="col form-group">
                    <label class="font-weight-bold">Attachment <span class="text-danger">*</span></label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <h5 class="alert alert-info">
                    <span class="h4">Guidelines</span><br>
                        - Video(MP4) or Audio(MP3) duration not more than 2 mins.<br>
                        - The image should be in the format of JPG, JPEG or PNG.<br>
                        - Only individual performance (no group performance).<br><br>
                        The finalists will be performing at the Cheneye con 24 conference.<br>
                    </h5>
                </div>
            </div>
            <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 Image/Video<br />
                            [JPG , JPEG , PNG, MP3, MP4]<br>
                            
                        </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 img_hide = "none" %} 
                                {% if ".mp4" in img.file_name :%} 
                                    <video id="video_file" class="file_view" width="100%" height="auto" controls autoplay controlsList="nodownload">                                    
                                        <source id="video" src="{{ src}}" type="video/mp4">
                                    </video>
                                {% elif ".mp3" in img.file_name :%} 
                                    <audio id="audio_file" controls>
                                        <source id="audio" src="{{ src}}" type="audio/mpeg">
                                    </audio>
                                {% 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" />
                            <video id="video_file" width="100%" height="auto" controls autoplay controlsList="nodownload" style="display:none" >
                                <source id="video" src="{{ src}}" type="video/mp4">
                            </video>
                            <audio id="audio_file" controls style="display:none">
                                <source id="audio" src="{{ src}}" type="audio/mpeg">
                            </audio>
                        </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="uploadFile()" />
                        </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 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="abs_type" id="abs_type" value="{{abs_type}}" />
    <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 or 0 }}">
    <input type="hidden" name="file_name" id="file_name">
</form>
</div>
<!-- The Modal -->

{% block script %}
<script src="https://cdn.jsdelivr.net/npm/aws-sdk/dist/aws-sdk.min.js"></script>
<script type="text/javascript">
    var BaseUrl = document.location.origin;
    
    var conf_id = $("#conf_id").val();
    var conf_key = $("#conf_key").val();
    var abs_type = $("#abs_type").val();
    $(document).ready(function () {

        $( ".file-field" ).on( "click", function() 
        {

            $(this).find('input[type="file"]')[0].click()
        });
        


    })
    
    var oneMB     = 1048576 
    var file_size = 500

function uploadFile() {

    var ext = $('#file').val().split('.').pop().toLowerCase();
    var abs_id = $("#abs_id").val();
    var refilename = "{{user_info.full_name}}"
    
    const file = $('#file')[0].files[0];

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

        
        $('.file-field span').html('Uploading ....');
        
        var file_name=file.name;
        
        var refilename=refilename.replace(/\s/g,'')
        var refilename=refilename.replace('.','')
        
        var file_name = file_name.replace(file_name,refilename+'-'+abs_id+'.'+ext)
        $("#file_name").val(file_name)
        
        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
            ContentType: 'application/'+ext
        };

        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();
            upload_video_file()

            file_extension = "."+ext
            $('#upload_id').val(data.upload_id);
            if((file_extension !=".mp4"))
            {
                 // alert('img')
                 $("#img").attr('src',data.Location);
                 $("#img").show();
                 $("#video_file").hide();
                 $("#audio_file").hide();
                 
            }
            if(file_extension == ".mp4")
            {
                $("#video_file").attr("src",data.Location)
                $("#video_file").show();
                $("#img").hide();
                $("#audio_file").hide();
            }
            if(file_extension == ".mp3")
            {
                $("#audio_file").attr("src",data.Location)
                $("#audio_file").show();
                $("#img").hide();
                $("#video_file").hide();
            }
             
             
                $('#success_msg_cd').show();
                $("#success_msg_cd").html("Successfully uploaded");
                $("#file-field span").text("Change");
                $("#delete").show();
             setTimeout(function(){ 
                $("#success_msg_cd").hide()
               $("#success_msg_cd").css("background" ,"#ffffff" );
                $("#success_msg_cd").html('');
             }, 20000);
     
             // You can perform additional actions after successful upload
         }
     });
 }
}

    function upload_video_file() {
        var file_name=$("#file_name").val();
        var img_type = "attachment"
        var abs_id = $("#abs_id").val();
        $.ajax({
            type: "POST",
            url: BaseUrl +"/save_upload_details/"+abs_id+"/"+abs_type+"/"+ conf_id + "/" + "{{conf_key}}",
            data: { 'file_name': file_name,'img_type':img_type },
            dataType: "json",
            success: function (data) {
                
                $('#upload_id').val(data.max);
            },
        });
        return false;
    }
           

    $(".photo_delete").click(function() 
    {
        var upload_id = $('#upload_id').val();
        var r         = confirm("confirm to delete!");
        var abs_id = $("#abs_id").val();
        if (r == true) 
        {
            
            $.ajax({
                type: "GET",
                url: BaseUrl +"/remove_img/"+conf_id+"/"+conf_key,
                data: {
                    'upload_id' : upload_id,
                    'abs_id'    : abs_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>
{% endblock %}