csrtechnew.ohctech.in/image_popup_rrwhs.php

<style>
	#modal-add-indent-document {
		overflow-y: scroll;
	}
</style>
<div id="image_div">
</div>



<div class="modal fade" id="modal-add-indent-document" name="modal-add-indent-document" role="dialog" aria-hidden="true">
	<form role="form" id="indent_document_form" name="indent_document_form" enctype="multipart/form-data" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="widget-header">
					<h5 class="widget-title">Upload RRWHS Document</h5>
					<div class="widget-toolbar">
						<div class="widget-menu">
							<button type="button" class="close" data-dismiss="modal"><i class="ace-icon fa fa-times"></i>
							</button>

						</div>
					</div>
				</div>


				<div class="modal-body">
					<div class="row" style="margin-top:0px;">
						<div class="col-xs-3">

						</div>

						<div class="col-xs-6">
							<input type="text" style="width:100%; margin-top: 5px; margin-left:0px" placeholder="Enter Document Name" id="indent_doc_des" name="indent_doc_des" />
							<input type="date" style="width:100%; margin-top: 5px; margin-left:0px" id="indent_doc_date" name="indent_doc_date" />
						</div>
					</div>
					<div class="row" style="margin-top: 10px">
						<div class="form-group">
							<div class="col-xs-3">
							</div>
							<div class="col-xs-6">
								<div class="form-group">
									<input type="file" id="file_indent" name="file_indent" onchange="return fileValidation()" />
								</div>
								<input id="doc_indent_id" name="doc_indent_id" type="hidden" class='indent_id' value="<?= $_REQUEST['rrwhs_hidden_id'] ?>" />
								<input id="indent_doc_id" name="indent_doc_id" type="hidden"   />

							</div>
						</div>
					</div>
				</div>
				<div class="widget-toolbox padding-8 clearfix">
					<button type="button" id="upload" onclick="save_rrwhs_doc()" class="btn btn-info btn-sm save_button"><i class="ace-icon fa fa-floppy-o bigger-110"></i>Upload </button>
					<button type="button" class="btn btn-danger  btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times bigger-110"></i>Cancel</button>
				</div>
				
			</div>
		</div>
	</form>
</div>



<style>
	.row {
		margin-top: 40px;
		padding: 0 10px;
	}

	.clickable {
		cursor: pointer;
	}

	.panel-heading span {
		margin-top: -20px;
		font-size: 15px;
	}

	img {
		max-width: 100%;
		height: auto;
		width: auto\9;
		/* ie8 */
	}
</style>

<script>
	function open_popup_img() {

		$('#indent_document').val("");
		$('#indent_doc_des').val("");
		 
		$('#modal-add-indent-document').modal("show");
		event.preventDefault()
	}



	function image(value, title) {
		var src = value.src;
		var content = "";

		var content = '<div class="modal fade" id="modal-img" role="dialog" aria-hidden="true">'
		content += '<div class="modal-dialog modal-lg" style="width:80%;height:100%">'

		content += '<div class="modal-content" style="width:100%;height:100%">'
		content += '<div class="modal-header">'
		content += '<h5 class="modal-title" style="text-align: center">' + title
		content += '<button type="button" class="close" data-dismiss="modal"'
		content += 'aria-label="Close">'
		content += '<span aria-hidden="true">&times;</span>'
		content += '</button></h5>'
		content += '</div>'
		content += '<div class="modal-body" style="width:100%;height:100%">'
		content += '<a href=' + src + ' download><div class="form-group col-sm-12">'

		content += '</div style="width:100%;height:100%" ><img height="300" weight="300" src=' + src + ' alt="new image"/></a></div>'
		content += '</div>'
		content += '</div><div><div>'



		$("#image_div").html(content);
		$('#modal-img').modal("show");

	}

	function pdf_preview(value, title) {
		var src = value.src;
		var content = "";

		var content = '<div class="modal fade" id="modal-img" role="dialog" aria-hidden="true">'
		content += '<div class="modal-dialog modal-lg"  style="width:80%;height:100%" >'

		content += '<div class="modal-content" style="width:100%;height:100%">'
		content += '<div class="modal-header">'
		content += '<h5 class="modal-title" style="text-align: center">' + title
		content += '<button type="button" class="close" data-dismiss="modal"'
		content += 'aria-label="Close">'
		content += '<span aria-hidden="true">&times;</span>'
		content += '</button></h5>'
		content += '</div>'
		// content+='<div class="modal-body" style="width:100%;height:100%">'
		content += '<a href=' + src + ' download>'

		content += '<iframe style="width:100%;height:100%" src=' + src + '/></iframe></a>'
		// content+='</div>'
		content += '</div><div><div>'



		$("#image_div").html(content);
		$('#modal-img').modal("show");

	}

	function save_rrwhs_doc() {
		const fileInput = document.getElementById("file_indent");
    const file = fileInput.files[0];

    // Check file size again before upload
    if (file) {
        const fileSizeInMB = file.size / (1024 * 1024);
        if (fileSizeInMB > 5) {
            BootstrapDialog.alert("File size exceeds 5 MB. Please upload a smaller file.");
            return; // Stop the function if file size is too large
        }
    }
		$("#upload").disabled = true;
  
		$.ajax({
			url: "save_rrwhs_document.php",
			method: "POST",
			data: new FormData(document.getElementById("indent_document_form")),
			contentType: false,
			processData: false,
			success: function(data) {
				BootstrapDialog.alert('Document uploaded successfully ');


				getIndentDocData($('#doc_indent_id').val());
				$("#modal-add-indent-document").modal('hide');
			},
			error: function(data) {
				BootstrapDialog.alert('Error Uploading Document');
			}
		});

	}

	function fileValidation() {
		var fileInput = document.getElementById('file_indent');
		var filePath = fileInput.value;
		var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.pdf)$/i;
		if (!allowedExtensions.exec(filePath)) {
			BootstrapDialog.alert('Please upload only image and pdf file  ');
			fileInput.value = '';
			return false;
		} else {
			return;
		}
	}



	var counter = 0;

	// document.getElementById("medical_exam_document").style.display = "none";   

</script>