function loaduploads() {
  $.ajax({
    type: "POST",
    async: true,
    url: $host_url + "uploaddetails",
    success: function uploaddetailsResponce(responce) {
      responce = eval("(" + responce + ")");
      let uploadtable = `<style type = "text/css">
			.table-upd tbody tr td {
				padding : 2px;
				vertical-align:middle;
				border: 1px solid #949494;
				text-align: left;
			}
			.table-upd tbody upd-file {
				display: inline !important;
			}	

			.table-upd tbody input[type="file"] {
				display: inline;
			}

			.table-upd tbody button {
				padding : 7px;
				margin: 15px;
			}
			.table-upd thead tr td {
				text-align: center;
			}
			</style>
			<table class='table table-bordered table-striped table-upd' id = "uploaddet">
					<thead>
						<tr class = "bg-cyan">
							<td style = "width :5%">Sl. No.</td>
							<td style = "width : 40%;" >Description</td>
                            <td style = "width : 30%;">Upload</td>
                            <td style = "width : 25%;">File</td>
						</tr>
					</thead>
                    <tbody>`;
      var masdoc = responce.data.masdoc;

      let z = 1;
      $.each(masdoc, function (key, value) {
        uploadtable += `<tr>
                        <td style = "text-align: center;">${z}</td>
                        <td id = "doc_upload_${value.int_code}">${value.doc_type}</td>
						<td style="
            display: flex;
            align-items: center;
            justify-content: space-around;
          " >
							<input type="file"  name="${value.int_code}"
							id="${value.FFILENAME}" class = "upd-file"
							style="width:100px;padding:5px 0px;" />
							<input type = "hidden" id = "h_${value.FFILENAME}"> 
							<button class="btn btn-success waves-effect btn-lg"  style = "padding: 5px;"
								onclick= 'UploadEmployeeDocuments("${value.FFILENAME}")'>Upload
							</button>
						</td>
                        <td id="attach_td_${value.FFILENAME}"></td>
                        </tr>`;
        z++;
      });

      $("#upddet").html(uploadtable);
    },
  });
}

function loadedituploads(degree, college, fappno) {
  var datastr =
    "&degree=" + degree + "&college=" + college + "&fappno=" + fappno;
  $.ajax({
    type: "POST",
    async: true,
    url: $host_url + "uploadeditdetails",
    data: datastr,
    success: function uploadeditdetailsResponce(responce) {
      responce = eval("(" + responce + ")");
      let uploadtable = `<style type = "text/css">
			.table-upd tbody tr td {
				padding : 2px;
				vertical-align:middle;
				border: 1px solid #949494;
				text-align: left;
			}
			.table-upd tbody upd-file {
				display: inline !important;
			}	

			.table-upd tbody input[type="file"] {
				display: inline;
			}

			.table-upd tbody button {
				padding : 7px;
				margin: 15px;
			}
			.table-upd thead tr td {
				text-align: center;
			}
			</style>
			<table class='table table-bordered table-striped table-upd' id = "uploaddet">
					<thead>
						<tr class = "bg-cyan">
							<td style = "width :5%">Sl. No.</td>
							<td style = "width : 40%;" >Description</td>
                            <td style = "width : 30%;">Upload</td>
                            <td style = "width : 25%;">File</td>
						</tr>
					</thead>
                    <tbody>`;
      var masdoc = responce.data.masdoc;

      let z = 1;
      var alist = "";
      $.each(masdoc, function (key, value) {
        alist = "";
        if (value.file_path != "") {
          alist = `<a href = "${
            $photo_url + value.file_path
          }" target = '_blank'>${value.FFILENAME}</a>`;
        }
        uploadtable += `<tr>
                <td style = "text-align: center;">${z}</td>
                <td id = "doc_upload_${value.int_code}">${value.doc_type}</td>
				<td style="
        display: flex;
        align-items: center;
        justify-content: space-around;
      ">
					<input type="file"  name="${value.int_code}"
					id="${value.FFILENAME}" class = "upd-file"
					style="width:100px;padding:5px 0px;" />
					<input type = "hidden" id = "h_${value.FFILENAME}"> 
					<button class="btn btn-success waves-effect btn-lg"  style = "padding: 5px;"
						onclick= 'UploadEmployeeDocuments("${value.FFILENAME}")'>Upload
					</button>
				</td>
                <td id="attach_td_${value.FFILENAME}">${alist}</td>
                </tr>`;
        z++;
      });
      $("#upddet").html(uploadtable);
    },
  });
}

function UploadEmployeeDocuments(file_file) {
  console.log(file_file);
  var file_name = $("#" + file_file).val();
  console.log(file_name);
  var file_size = $("#" + file_file)[0].files[0].size;
  var file_extn = file_name.split(".").pop();
  var file_extn = file_extn.toLowerCase();
  if (file_extn == "jpeg" || file_extn == "jpg" || file_extn == "pdf") {
  } else {
    alert("JPEG, JPG, PDF files are allowed!");
    return false;
  }

  if (file_size >= 1000000) {
    alert("Upload files with size less then 1MB!");
    return false;
  }

  var file_data = $("#" + file_file).prop("files")[0];
  var form_data = new FormData();
  form_data.append("file", file_data);

  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='../images/ajax-loader.gif' border='0'></h1>",
  });
  $.ajax({
    type: "POST",
    url: "upload_file.php",
    data: form_data,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
      $.unblockUI();
      $("#h_" + file_file).val(data);
      console.log(data);

      var str = `<a href = "${
        $host_url2 + "/upload/" + data
      }" target = "_blank">${file_file}</a>`;
      document.getElementById("attach_td_" + file_file).innerHTML = str;
    },
    error: function (data) {
      alert(data);
    },
  });
}