Sindbad~EG File Manager
<div class="container">
<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>
<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 class="row mt-3">
<div class="col form-group">
<label class="font-weight-bold">Presenting Author Membership Number :</label>
<br />
<div>{{user_info.membership_no or 'Non Member'}}<input type="hidden" name="member_id" id="member_id" value="{{user_info.membership_no}}" /></div>
<br />
</div>
<div class="col form-group">
<label class="font-weight-bold">Presenting Author Name :</label>
<br />
<div>{{user_info.full_name or ''}}<input type="hidden" name="name" id="name" value="{{user_info.full_name}}" /></div>
<br />
</div>
</div>
<div class="row">
<div class="col form-group">
<label class="font-weight-bold">Ophthalmic Photograph to be uploaded too:</label>
<span class="text-danger">(JPG,JPEG, PNG)</span>
</div>
</div>
<!-- <div id="searchmodel1" class="row">
<div class="col text-center mt-2" id="uploaing_img" >
<button type="button" class="btn btn-danger" id="upload_btn">Upload your Ophthalmic Photography</button>
</div> -->
<!-- style="border: 1px solid gray;padding: 29px;" -->
<!-- <div class="col text-center" id="img_div" >
<img src="{{ data.path or '' }}{{ data.file_name or '' }}" width="200px" id="uploaded_img"><button class="btn" type="button" id="delete_img" value="{{ data.upload_id or '' }}"><i class="fa fa-trash"></i></button>
</div>
</div> -->
<div class="row ">
<div class="col-md-4 offset-md-4 mb-4">
<div class="card text-white text-center bg-secondary mb-3" >
<div class="card-header">Upload your Ophthalmic Photography<br>[ jpg,jpeg,png ]</div>
<div class="card-body">
{% if data.file_name %}
{% set image_display = "block" %}
{% else %}
{% set image_display = "none" %}
{% endif %}
<div id="show_img" style="display:{{ image_display }}" >
{% if data.file_name : %}
{% set src= data.path|string +""+data.file_name|string +"?"+Helper.getcurrenttimestamp()|string %}
{% set img_hide = "block" %}
{% else %}
{% set src= "" %}
{% endif %}
<img src="{{ src}}" id="img" alt="Proof" width="100%" height="auto" style="max-height: 150px;display: {{ img_hide }}">
</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" id="photo_upload" 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 class="row">
<div class="col form-group">
<label class="font-weight-bold">Section <span class="text-danger">*</span></label>
</div>
</div>
<div class="row">
<div class="col-6 form-group">
<select class="form-control form-control-sm" name="section" id="section" >
<option value="">Select</option>
{% if categories %}
{% for cat in categories %}
<option value="{{ cat.category_id or '' }}">{{ cat.name }}</option>
{% endfor %}
{% endif %}
</select>
<br>
</div>
</div>
<div class="row">
<div class="col form-group">
<label class="font-weight-bold">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>
</div>
</div>
<div class="row">
<div class="col form-group">
<textarea name="title" id="title" class="form-control" rows="2">{{ data.title or '' }}</textarea>
<br>
</div>
</div>
<div class="row">
<div class="col form-group">
<label class="font-weight-bold">A brief description of photograph: ( Not exceeding 1000 Characters )<span class="text-danger">*</span></label>
<span id="chars1" class="text-danger ml-1"></span><span id="chars1_text" style="color: blue;"></span>
</div>
</div>
<div class="row">
<div class="col form-group">
<textarea name="synopsis" id="synopsis" class="form-control" rows="5">{{ data.synopsis or '' }}</textarea>
</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="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 }}">
</form>
</div>
<!-- The Modal -->
<form id="upload_form_model" >
<div class="modal " id="upload_model">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Upload your Ophthalmic Photography</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><b class="text-red"> Note : </b>Please upload image only in ( JPEG , JPG , PNG , TIFF ) Format and Image size Under 5MB only </label>
</div>
</div>
<div class="row">
<div class="col">
<input type="file" name="upload_file" id="upload_file" accept="image/*" class="form-control" required >
</div>
</div>
<div class="row">
<div class="col p-4">
<input type="button" name="upload_img" id="upload_img" class="btn btn-success" value="Click here to Submit file">
</div>
</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>
{% block script %}
<script type="text/javascript">
var BaseUrl = document.location.origin;
var oneMB = 1048576;
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
var abs_type = $("#abs_type").val();
$(document).ready(function ()
{
$("#section").val({{ data.category_id or '' }})
var path = "{{ data.path }}"
if ( path != "None" ){
$("#uploaing_img").hide();
}
else{
$("#img_div").hide();
}
$("#upload_btn").click(function () {
$("#upload_model").modal("show");
});
$("#search_model").keypress(function(e)
{
if(e.which == 13)
{
validate_search();
return false
}
return true
});
});
// $("#upload_img").click(function(){
// if(!$("#upload_form_model").valid())
// {
// return false
// }
// var ext = $('#upload_file').val().split('.').pop().toLowerCase();
// if($.inArray(ext, ['gif','jpg','jpeg','png','jfif','tif','tiff']) == -1)
// {
// alert('Invalid file type');
// }
// else if($('#upload_file')[0].files[0].size > (oneMB * 5))
// {
// alert('File Must less than 5MB');
// }
// else{
// uploadimg();
// }
// })
var $title = $('#title');
var $Synopsis =$('#synopsis');
var $chars = $('#chars');
var $chars1 = $('#chars1');
var textMax = 100;
var synopismax = 1000;
var chars_text = $("#chars_text")
var chars1_text = $("#chars1_text")
$chars.html(textMax + ' characters remaining');
$chars1.html(synopismax + ' characters remaining');
$title.on('keyup', countChar);
$Synopsis.on('keyup',countChar1);
function countChar() {
var textLength = $title.val().length;
var textRemaining = textMax - 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 = synopismax - textLength;
if (textRemaining < 0) {
$chars1.attr("class", "text-danger ml-2");
var textRemaining1 = textRemaining;
$chars1.html(textRemaining1);
chars1_text.html(" characters exceeded");
// $chars.html(textRemaining1 + " characters exceeded");
} else {
$chars1.attr("class", "text-danger ml-2");
chars1_text.html(" characters remaining");
$chars1.html(textRemaining);
}
}
$( ".file-field" ).on( "click", function()
{
$(this).find('input[type="file"]')[0].click()
});
var abs_id = $('#abs_id').val();
var abs_type = $('#abs_type').val();
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
var oneMB = 1048576
function uploaduser() {
var ext = $('#file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['jpg','jpeg','png']) == -1)
{
clear()
alert('Invalid file type');
}
else if($('#file')[0].files[0].size > (oneMB*20))
{
alert('File Must less than 20MB');
}
else
{
var fd = new FormData();
var user_profile = $('#file')[0].files[0];
var file_name = $('#file').val().split('\\').pop();
$("#show_img").show();
$("#delete").show();
fd.append('file', user_profile);
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) {
// alert(data)
StopProgress();
$("#img").attr('src',data["path"]+data["file_name"]);
$("#img").show();
$("#file-field span").text("Change");
}).fail(function(data) {
StopProgress();
});
}
}
$(".photo_delete").click(function() {
var r = confirm("confirm to delete!");
if (r == true) {
ShowProgress();
$.ajax({
type: "GET",
url: BaseUrl +"/remove_img/"+conf_id+"/"+conf_key,
data: {
'abs_id' : abs_id,
'conf_id' : conf_id,
},
dataType: "json",
success: function (data) {
StopProgress();
// $("#Upload_btn_div").show();
$("#show_img").hide();
$("#delete").hide();
$("#file-field span").text("Upload");
clear()
return true;
},
});
}
else {
}
})
$(".close_btn").click(function() {
$('.modal').hide();
})
function clear()
{
$('input[type=file]').each(function()
{
$(this).val('');
});
}
// function uploadimg() {
// var fd = new FormData();
// var img = new FormData($("#upload_form_model")[0]);
// var abs_id = $("#abs_id").val();
// fd.append('file', img);
// $.ajax({
// type: 'POST',
// url: BaseUrl + "/upload_img/"+abs_id+"/"+abs_type+"/"+conf_id+"/"+conf_key,
// data: img,
// contentType: false,
// processData: false,
// cache: false,
// dataType: 'json',
// }).done(function(data, jqXHR) {
// // $("#asset_data").val(data)
// // $("#preview").attr("src","data:image/jpeg;base64,"+data)
// // alert("hello")
// $("#upload_model").modal("hide");
// $("#img_div").show();
// $("#uploaded_img").attr("src",data.path+data.file_name);
// $("#uploaing_img").hide();
// $("#delete_img").val(data.upload_id)
// }).fail(function(data) {});
// }
// $("#delete_img").click(function(){
// var upload_id = $(this).val();
// $.ajax({
// type: "POST",
// url: BaseUrl + "/delete_img/"+abs_type+"/"+conf_id+"/"+conf_key,
// data: {'upload_id':upload_id },
// dataType: "json",
// success: function (data) {
// // alert(data);
// $("#img_div").hide();
// $("#uploaing_img").show();
// // $("#addcoinst").modal('show');
// },
// });
// })
</script>
{% endblock %}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists