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" aria-selected="true">Step 1</button>
</li>
<li class="nav-item p-2">
<button type="button" class="nav-link nav_btn_gray" value="2" >Step 2</button>
</li>
<!-- <li class="nav-item p-2">
<button type="button" class="nav-link nav_btn_gray" value="3" >Step 3</button>
</li>
<li class="nav-item p-2">
<button type="button" class="nav-link nav_btn_gray" value="4">Step 4</button>
</li>
<li class="nav-item p-2">
<button type="button" class="nav-link nav_btn_gray" value="5">Step 5</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,society_id=society_id)}}" id="form_s1">
<div class="row">
<div class="col form-group">
<label >Author Membership Number :</label><br>
<span>{{user_info.membership_no or 'Non Member'}}</span>
<input type="hidden" name="member_id" id="member_id" value="{{ member_id or '' }}" />
</div>
<div class="col form-group">
<label >Author Name :</label><br>
<span>{{user_info.full_name or ''}}</span>
<input type="hidden" name="name" id="name" value="{{ name or ''}}" />
</div>
</div>
<!-- <div class="row">
<div class="col">
<label >Presenting Author <span class="text-danger">*</span> :</label>
</div>
</div> -->
<!-- <div class="mobile-responsive" id="searchmodel1">
</div>
<div class="row">
<div class="col form-group">
<div id="searchdiv">
<input type="radio" class="mr-2" name="presentingauhtor" id="iampresentingauhtor" onclick="select_pa_Author({{ user_info.user_id }})"><label for="iampresentingauhtor"> I am the Presenting Author</label> <br>
<input type="radio" class="mr-2" name="presentingauhtor" id="iamnotpresentingauhtor" onclick="show_pa_model()"><label for="iamnotpresentingauhtor"> I am not the Presenting Author <span class="text-primary">Click Here To Add An Alternative Presenting Author</span></label>
<label id="presentingauhtor-error" class="error" for="presentingauhtor"></label>
</div>
</div>
</div> -->
<!--<div class="row">-->
<!-- <div class="col-lg-12 col-md-12 col-sm-12 form-group">-->
<!-- <label>Section<span class="text-danger">*</span></label>-->
<!-- <select class="form-control categories" id="category" required name="category">-->
<!-- <option value="" >--Select---</option>-->
<!-- {% if categories %} {% for item in categories %} -->
<!-- {% if data.category_id == item.category_id %}-->
<!-- <option value="{{item.category_id}}" selected>{{item.display_name}}</option>-->
<!-- {% else %}-->
<!-- <option value="{{item.category_id}}">{{item.display_name}}</option>-->
<!-- {% endif %} {% endfor %} {% endif %}-->
<!-- </select>-->
<!-- </div>-->
<!--</div>-->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<label>Section<span class="text-danger">*</span></label>
<select class="form-control categories" id="category" required name="category">
<option value="" >--Select---</option>
{% for i in categories %}
<optgroup label="{{i}}">
{% for j in categories[i] %}
{% if i == j.parent_category %}
{% if data.category_id == j.category_id %}
<option value="{{j.category_id}}" selected>{{j.name}}</option>
{% else %}
<option value="{{j.category_id}}" >{{j.name}}</option>
{% endif %}
{% endif %}
{% endfor %}
</optgroup>
{% endfor %}
</select>
</div>
</div>
<div class="row ">
<div class="col form-group">
<label class="">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>
<textarea name="title" id="title" class="form-control" placeholder="Title" value="">{{data.title or ''}}</textarea>
</div>
</div>
<br />
<div class="row">
<div class="col form-group">
<label>Abstract (not exceeding 1000 characters) <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="100" rows="10" value="" placeholder="synopsis">{{data.synopsis or ''}}</textarea>
</div>
</div>
{% if not img %}
<!-- <label><b>Upload your Image / Video</b></label> -->
<div class="row" id="video_submit_div">
<div class="col text-center">
<button type="button" class="btn btn-primary" id="video_submit">Click here to Proceed</button>
</div>
</div>
{% endif %}
<!-- <label><b>Upload your Image / Video</b></label> -->
<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></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" class="btn btn-danger form-control" {% if src == "" %} style="display: none;" {% endif %} id="delete_file" name="delete_file">Delete</button>
<div class=" btn btn-primary file-field-vide1 btn-block" style="display:none;"></div>
</div>
</div>
</div>
</div>
<div class="row" {% if not img %} id="next_btn" {% endif %}>
<div class="col float-right form-group">
<input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(1,1)" />
</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="{{Cryptography.decrypt(abs_id)}}" />
<input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
<input type="hidden" name="user_id" id="user_id" value="{{ user_info.user_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="file_name" id="file_name">
</form>
</div>
</div>
<!-- The Modal -->
<form id="search_model">
<div class="modal" id="searchcoinst">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="display: table;">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Search Presenting Author</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body container">
<div class="row">
<div class="col">
<label >Type Membership No or Name or Email to search</label><br />
<div class="input-group">
<input type="text" name="searchtext" id="searchtext" class="form-control" required placeholder="Enter to search" />
<div class="input-group-append">
<button class="btn btn-secondary" name="searchbtn" id="searchbtn" type="button">
Search
</button>
</div>
</div>
<br />
<label id="searchtext-error" class="error" for="searchtext"></label>
</div>
</div>
<div id="searchtable"></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>
<!-- end of model -->
{% block script %}
<script src="https://cdn.jsdelivr.net/npm/aws-sdk/dist/aws-sdk.min.js"></script>
<script type="text/javascript">
var policy = '';
var signature = '';
var AWSAccessKeyId = '';
var AWSSecretKey = '';
// getS3Policy()
$("#video_div").hide()
$("#next_btn").hide()
var $title = $("#title");
var $synopsis = $("#synopsis");
// var $purpose = $("#purpose");
// var $method = $("#method");
// var $results = $("#results");
// var $conclusion = $("#conclusion");
var $case_report = $("#case_report");
var $chars = $("#chars");
var $chars1 = $("#chars1");
// var $chars2 = $("#chars2");
// var $chars3 = $("#chars3");
// var $chars4 = $("#chars4");
// var $chars5 = $("#chars5");
var $chars6 = $("#chars6");
var x150 = 100;
var x1000 = 1000;
var x250 = 250;
var x300 = 300;
var chars_text = $("#chars_text")
var chars1_text = $("#chars1_text")
// var chars2_text = $("#chars2_text")
// var chars3_text = $("#chars3_text")
// var chars4_text = $("#chars4_text")
// var chars5_text = $("#chars5_text")
var chars6_text = $("#chars6_text")
chars_text.html(" characters remaining");
$chars.css("color","red");
$chars.html(x150);
$chars1.css("color","red");
$chars1.html(x1000);
chars1_text.html(" characters remaining");
// $chars2.css("color","red");
// $chars2.html(x250);
// chars2_text.html(" characters remaining");
// $chars3.css("color","red");
// $chars3.html(x250);
// chars3_text.html(" characters remaining");
// $chars4.css("color","red");
// $chars4.html(x250);
// chars4_text.html(" characters remaining");
// $chars5.css("color","red");
// $chars5.html(x250);
// chars5_text.html(" characters remaining");
$chars6.css("color","red");
$chars6.html(x300);
chars6_text.html(" characters remaining");
$title.on("keyup", countChar);
$synopsis.on("keyup", countChar1);
// $method.on("keyup", countChar2);
// $results.on("keyup", countChar3);
// $conclusion.on("keyup", countChar4);
// $synopsis.on("keyup", countChar5);
// $case_report.on("keyup", countChar6);
function countChar() {
var textLength = $title.val().length;
var textRemaining = x150 - 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 = 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);
}
}
var abs_type = $("#abs_type").val();
$("#searchmodel1").hide();
// get_presenting_author();
$("#searchcoins").click(function () {
$("#searchcoinst").modal('show');
});
$("#searchcoins1").click(function () {
$("#searchcoinst").modal('show');
});
function show_pa_model() {
$("#searchcoinst").modal("show");
};
$("#search_model").keypress(function (e) {
if (e.which == 13) {
validate_search();
return false;
}
return true;
});
$("#searchbtn").click(validate_search);
function validate_search() {
$("#search_model").validate({
rules: {
searchtext: {
normalizer: function (value) {
return $.trim(value);
},
required: true,
minlength: 3,
},
},
messages: {
searchtext: {
required: "Please enter membership number,name,email",
minlength: "Please enter more than three",
},
},
});
if ($("#search_model").valid()) {
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
var searchtext = $("#searchtext").val();
$.ajax({
type: "GET",
url: BaseUrl +"/searchauthor/"+abs_type+"/"+ conf_id + "/" + conf_key,
data: {
searchtext: searchtext,
abs_type: "FP",
btn_val: "0",
},
dataType: "html",
success: function (data) {
// alert("success")
// alert(data)
$("#searchtable").html(data);
return true;
},
});
}
}
function select_pa_Author(user_id) {
var abs_id = $("#abs_id").val();
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
if (user_id == 0){
var user_id = $("#user_id").val();
}
$.ajax({
type: "GET",
url: BaseUrl +"/add_presenting_author/"+abs_type+"/"+ conf_id + "/" + conf_key,
data: {
user_id: user_id,
abs_type: "FP",
abs_id: abs_id,
role_id: 35,
},
dataType: "html",
success: function (data) {
$("#searchcoinst").modal('hide');
$("#searchtext").val("");
$("#searchtable").html("");
$("#searchmodel1").show();
$("#searchmodel1").html(data);
$("#searchdiv").hide();
},
});
return false;
}
function get_presenting_author() {
var abs_id = $("#abs_id").val();
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
$.ajax({
type: "GET",
url: BaseUrl +"/ppstep1getauthor/"+abs_type+"/"+ conf_id + "/" + conf_key,
data: { abs_id: abs_id },
dataType: "html",
success: function (data) {
if (data == 0) {
} else {
$("#searchmodel1").show();
$("#searchmodel1").html(data);
$("#searchdiv").hide();
}
},
});
return false;
}
$( ".file-field-video" ).on( "click", function()
{
$(this).find('input[type="file"]')[0].click()
});
var conf_id=$("#conf_id").val();
var conf_key=$("#conf_key").val();
var oneMB = 1048576
var abs_id = $("#abs_id").val();
// var user_id=$("#user_id").val();
// alert(abs_id)
function uploaduservideo() {
// alert($('#addVideosInput').val())
var ext = $('#addVideosInput').val().split('.').pop().toLowerCase();
// alert(ext)
if($.inArray(ext, ['mp4','mov']) == -1)
{
alert('Invalid file type');
}
else
{
// alert("koooo")
var fd = new FormData();
var user_profile = $('#addVideosInput')[0].files[0];
var file_name = $('#addVideosInput').val().split('\\').pop();
fd.append('file',user_profile);
fd.append('key','abs_uploads'+ 'aioc24' + abs_type + abs_id)
fd.append('AWSAccessKeyId',AWSAccessKeyId);
fd.append('acl','public-read');
fd.append('policy',policy);
fd.append('signature',signature);
console.log(fd)
var description=$("#description").val();
var title=$("#title").val();
$("#show_img").show();
$("#delete").show();
$(".progress").show();
$(".progress_btn").show();
$('.file-field-vide1').show()
$('.file-field-video').hide()
$('.file-field-vide1').html('Uploading ....');
// ShowProgress();
ajaxcall = $.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) {
// $('.progress-bar').html('');
$("#cancel_upload").hide();
$('.file-field-vide1').html('Please Wait <i class="fa-solid fa-ellipsis fa-beat-fade"></i>');
}
}
}, false);
return xhr;
},
type: 'POST',
// url: BaseUrl +"/img_upload/"+abs_id+"/"+abs_type+"/"+conf_id+"/"+conf_key,
url:'https://aios-app.s3-ap-southeast-1.amazonaws.com/',
data: fd,
contentType: false,
processData: false,
cache: false,
dataType: 'json',
}).done(function(data, jqXHR) {
console.log("respose")
console.log(data)
$("#video_file").attr("src",data["path"]+data["file_name"])
$('.file-field-vide1').html('Successfully Uploaded');
$(".progress").hide();
$(".progress_btn").hide();
setTimeout(function() {
$('.file-field-vide1').hide()
$('.file-field-video').show()
},3000)
}).fail(function(data) {
// StopProgress();
$(".progress_btn").hide();
$(".progress").hide();
});
}
}
$("#video_submit").click(function(){
var society_id = $("#society_id").val();
var title=$("#title").val();
var synopsis=$("#synopsis").val();
var user_id=$("#user_id").val();
var abs_id=$("#abs_id").val();
var category_id = $("#category").val();
$.ajax({
type:'POST',
url:BaseUrl+"/abstract_ajax_insert/"+society_id,
data:{'user_id':user_id,'abs_id':abs_id,'title':title,'synopsis':synopsis,'category':category_id},
success:function(reposnse){
var data_1=JSON.parse(reposnse);
var msg = data_1.msg;
if (msg=='success'){
$("#video_submit_div").hide();
$("#video_div").show();
$("#next_btn").show();
}
}
});
});
// function getS3Policy()
// {
// $.getJSON("/static/json/s3policy.json", function (data) {
// console.log(data)
// policy = data.policy
// signature = data.signature
// AWSAccessKeyId = data.AWSAccessKeyId
// AWSSecretKey = data.AWSSecretKey
// });
// }
function uploadFile() {
// alert("calling aws sdk js ")
var abs_id = $("#abs_id").val();
var conf_key = $("#conf_key").val();
const file = $('#addVideosInput')[0].files[0];
if (!file) {
alert('Please select a file to upload.');
}
else {
$('.file-field-vide1').show()
$('.file-field-video').hide()
$('.file-field-vide1').html('Uploading ....');
var file_name=file.name;
// alert(file_name)
$("#file_name").val(file_name)
// return false
const bucketName = 'aios-app';
const key = 'abs_uploads'+'/aioc24/'+ 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();
$("#delete_file").show()
$(".progress_btn").hide();
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 = $("#abs_id").val();
var society_id = $("#society_id").val()
var abs_type=$("#abs_type").val();
var file_name=$("#file_name").val();
$.ajax({
type: "POST",
url: BaseUrl +"/save_upload_details/"+abs_id+"/"+abs_type+"/"+society_id,
data: { 'file_name': file_name },
dataType: "json",
success: function (data) {
},
});
return false;
}
$("#delete_file").click(function(){
var abs_id = $("#abs_id").val();
var society_id = $("#society_id").val();
var r = confirm("Are you sure to delete the file ?");
if (r == true){
$.ajax({
type: "POST",
url: BaseUrl +"/remove_img_v1/None/"+ society_id ,
data: { 'abs_id': abs_id },
dataType: "json",
success: function (data) {
$("#show_img").hide()
$("#video_file").attr("src","")
$("#delete_file").hide()
},
});
}
return false;
})
</script>
{% endblock %}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists