Sindbad~EG File Manager
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Upload</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon_32_32.png">
<link href="static/css/style.css" rel="stylesheet">
<style>
.user_attach_card
{
background-color:#515667 !important;
width: 100%;
}
.file-field input[type="file"]
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
left: 0;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
}
</style>
</head>
<body>
<div class="container-fluid ">
<div class="row">
<div class="col-md-4 brand justify-content-center">
<div class="row">
<div class="col-md-12 logo">
<img src="/static/images/logo_3.png" class="img-fluid rounded mx-auto d-block" alt="logo">
</div>
</div>
<div class="row">
<div class="col-md-12 wizard">
<img src="/static/images/school_student_3.png" class="img-fluid rounded mx-auto d-block" alt="logo" style="margin-top: 170px;">
</div>
</div>
</div>
<div class="col-md-8 content" style="margin-top: 0px;margin-bottom: 200px;background-image: url('/static/images/books_4.png');" >
<div class="row">
<div class="col-md-12 offset-md-2 col-sm-10 " >
{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
<div class="alert alert-success text-align-center successMessage alert-dismissible" >
<p class="close" data-dismiss="alert" aria-label="close">×</p>
<h4>{{ mesg|safe }}</h4>
</div>
{% endfor %}
{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
<div class="alert alert-danger text-align-center successMessage" id="successMessage">
<p class="close" data-dismiss="alert" aria-label="close">×</p>
<h6>{{ mesg|safe }}</h6>
</div>
{% endfor %}
<form method="POST" id="user_attachment" enctype="multipart/form-data" action="{{url_for('user.PostPaymentForm')}}">
<input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
<input type="hidden" name="enc_user_id" id="enc_user_id" value="{{ enc_user_id or '' }}">
<input type="hidden" name="email" id="email" value="{{ user_data.email or '' }}">
<div class="row ">
<div class="col-md-8 text-center">
<h4>Please use the QR Code to donate after payment success please upload the screenshot of the transaction</h4>
<img src="/static/images/qr_code.png">
<br/>
<br/>
<div class="card text-white text-center user_attach_card mb-3" >
<div class="card-header">Payment</div>
<div class="card-body">
<div id="show_img" style="display: none;">
<img src="" id="img" alt="img" width="100%" height="auto">
<iframe src="" id="iframe" alt="image" width="100%" height="auto" allow="encrypted-media" allowfullscreenstyle="max-height: 150px;" > </iframe>
</div>
<div class="btn btn-primary btn-block file-field my-2" id="file-field">
<span id="upload_btn">Upload
</span>
<input type="file" id="file" name="file" onchange="uploaduser_attachment()"/>
<br/>
<input type="hidden" id="payment_id" name="payment_id" value="{{payment_id or 0 }}" />
</div>
<input type="button" value="Delete" name="delete" style="display: none;" id="delete" onclick="deleteuser_attachment()" class="btn btn-danger btn-block form-input">
</div>
</div>
<input style="display: none;" type="text" class="form-control mb-4 mt-3" name="amount" id="amount" placeholder="Please enter amount" required>
<input style="display: none;" type="text" class="form-control mb-4 mt-3" name="utr_number" id="utr_number" placeholder="Please enter UTR or transaction number" required>
<input style="display: none;" type="submit" name="submit_btn" id="submit_btn" class="btn btn-success btn-block" value="Submit">
<input type="button" name="back_btn" id="back_btn" class="btn btn-danger btn-block" onclick="window.history.go(-1); return false;" value="BACK">
</div>
<div class="col-md-4 offset-md-4 mb-4 mt-4">
</div>
<!-- <div class="col-md-3"></div> -->
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery.min.js" charset="utf-8"></script>
<script src="/static/js/jquery.validate.js" charset="utf-8"></script>
<script src="/static/js/popper.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
var BaseUrl = document.location.origin
var oneMB = 1048576
$(document).ready(function()
{
})
$( ".file-field" ).on( "click", function() {
$(this).find('input[type="file"]')[0].click()
});
function uploaduser_attachment()
{
var user_id = $("#user_id").val();
var ext = $('#file').val().split('.').pop().toLowerCase();
if($.inArray(ext, [,'jpg','png','pdf','jpeg']) == -1)
{
clear()
alert('Invalid file type');
}
else if($('#file')[0].files[0].size > (oneMB*5))
{
alert('File Must less than 5MB');
}
else
{
var fd = new FormData();
var user_profile = $('#file')[0].files[0];
var file_name = $('#file').val().split('\\').pop();
var user_id = $("#user_id").val();
$("#show_img").show();
$("#delete").hide();
fd.append('file',user_profile);
fd.append('user_id',user_id);
$.ajax({
type: 'POST',
url: BaseUrl+"/post_file_upload",
data: fd,
contentType: false,
processData: false,
cache: false,
dataType: 'json',
}).done(function(data, textStatus, jqXHR){
status = data.status;
msg = data.msg;
var payment_id = data.payment_id;
// alert(payment_id);
alert(msg);
if (status == 1)
{
$("#submit_btn").css("display" ,"block");
$("#utr_number").css("display" ,"block");
$("#amount").css("display" ,"block");
bucketname = data.bucketname;
foldername = data.foldername;
file_name = data.file_name;
file_extension = data.file_extension;
$("#payment_id").val(payment_id);
if (file_extension != ".pdf")
{
var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
$("#img").attr('src', image_url);
$("#img").show();
$("#iframe").hide();
}
if (file_extension == '.pdf')
{
var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
$("#iframe").attr('src', image_url);
$("#iframe").show();
$("#img").hide();
}
$("#upload_btn").text("Change");
}
else
{
alert(msg);
}
}).fail(function(data){
alert('error in upload image. Please try again');
});
}
}
function deleteuser_attachment()
{
var fd = new FormData();
var user_id = $("#user_id").val();
if (confirm("Are you sure to delete?")) {
$.ajax({
type: 'POST',
url: BaseUrl+"/delete_image",
data: fd,
contentType: false,
processData: false,
cache: false,
dataType: 'json',
}).done(function(data, textStatus, jqXHR){
$("#show_img").hide();
$("#delete").hide();
$("#upload_btn").text("Upload");
clear()
}).fail(function(data){
alert('Please try again');
});
}
else {}
}
function clear() {
$('input[type=file]').each(function()
{
$(this).val('');
});
}
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists