SharePoint: Add file with properties in SharePoint document library using HTML single Forms with bootstrap

HTML CODE:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="/sites/iconnect/Style Library/Homepage/js/jquery.min.js"></script>
<script src="/sites/iconnect/Style Library/Homepage/js/jquery.SPServices.js"></script>
<script src="/sites/iconnect/Style Library/Homepage/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/sites/iconnect/Style Library/Homepage/css/bootstrap.min.css">
<link rel="stylesheet" href="/sites/iconnect/Style Library/Homepage/css/Launchpadupload.css">
<script>
$(document).ready(function () {
var currenturl = window.location.href;
Postiontitle = currenturl.split("Position=")[1];
var refid = currenturl.split("JCode=")[1];
newrefid = refid.split("&")[0];
$("#labrefid").text(newrefid);
$("#labpositiontitle").text(unescape(Postiontitle));
});
$(function () {
$('#docuploadresume').change(
function () {
var fileExtension = ['doc', 'docx', 'pdf', 'jpeg', 'jpg', 'png', 'ppt', 'xls', 'xlsx', 'rtf' ];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1)
{
alert("Only doc, docx, pdf, rtf, jpeg, jpg, png, ppt, xls and xlsx formats are allowed.");
$("#docuploadresume").val('');
return false;
}
})
})
var postiontitle = "";
var newrefid = "";
var itemid = "";
var txtmsg = '';
function checkfilename()
{
var checkfilename = document.getElementById("docuploadresume").files[0].name;
checkfilename = $("#labrefid").text() + "_" + checkfilename;

$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/getfilebyserverrelativeurl('/sites/iconnect/DocLib_Resumes/" + checkfilename+"')/Exists",
type: "GET",
headers:
{
"Accept": "application/json;odata=verbose",
},
async: false,
success: function (data)
{
if (data.d.Exists==true)
txtmsg = data.d.Exists;
},
error: function (data)
{
txtmsg = false;
}

})
}
function aplicantsave() {

var filenamevalid = document.getElementById("docuploadresume").value;
var filectrl = document.getElementById("docuploadresume").files[0];
var maxfilesize = '';
if ($.trim($("#labrefid").text()) == "" || $.trim($("#labrefid").text()) == null || $("#labrefid").text() == "undefined") {
alert("Reference Code of the Position should not be empty")
return false;
}
else if ($.trim($("#labpositiontitle").text()) == "" || $.trim($("#labpositiontitle").text()) == null || $("#labpositiontitle").text() == "undefined") {
alert("Position Title should not be empty")
return false;
}
else if ($.trim($("#txtempcode").val()) == "" || $.trim($("#txtempcode").val()) == null) {
alert("Please enter Employee Code")
document.getElementById("txtempcode").focus();
return false;
}
else if ($.trim($("#txtempname").val()) == "" || $.trim($("#txtempname").val()) == null) {
alert("Please enter Employee Name")
document.getElementById("txtempname").focus();
return false;
}
else if ($.trim($("#txtcurfunction").val()) == "" || $.trim($("#txtcurfunction").val()) == null) {
alert("Please enter Current Function")
document.getElementById("txtcurfunction").focus();
return false;
}
else if ($.trim($("#txtcurconcept").val()) == "" || $.trim($("#txtcurconcept").val()) == null) {
alert("Please enter Current Concept")
document.getElementById("txtcurconcept").focus();
return false;
}
else if ($.trim($("#txtcurgrade").val()) == "" || $.trim($("#txtcurgrade").val()) == null) {
alert("Please enter Current Grade")
document.getElementById("txtcurgrade").focus();
return false;
}
else if ($.trim($("#txtregion").val()) == "" || $.trim($("#txtregion").val()) == null) {
alert("Please enter Region")
document.getElementById("txtregion").focus();
return false;
}
else if ($.trim($("#txtworklocation").val()) == "" || $.trim($("#txtworklocation").val()) == null) {
alert("Please enter Current Work Location")
document.getElementById("txtworklocation").focus();
return false;
}
else if ($.trim($("#txtbusinessunit").val()) == "" || $.trim($("#txtbusinessunit").val()) == null) {
alert("Please enter Business Unit/OU")
document.getElementById("txtbusinessunit").focus();
return false;
}
else if ($("#docuploadresume").val() == "" || $("#docuploadresume").val() == null) {
alert("Please select a file")
document.getElementById("docuploadresume").focus();
return false;
}
else if ($("#docuploadresume").val() != "" || $("#docuploadresume").val() != null) {
maxfilesize = document.getElementById("docuploadresume").files[0].size;
maxfilesize = parseInt(maxfilesize)
if (maxfilesize > 26214400) {
alert("Please select file below or equal to 25MB");
document.getElementById("docuploadresume").focus();
return false;
}
else
{
checkfilename();
if (txtmsg == true)
{
alert("Already submitted the resume for same position");
document.getElementById("docuploadresume").focus();
return false;
}
}
}
if (filenamevalid != "")
{
$("#loader").show();
$(".loaderbackgroundcls").css("opacity", 0.3);
UploadMe(filectrl);
}
else {
var reader = new FileReader();
reader.onload = loaded;

}
}

function UploadMe(readFile) {
var reader = new FileReader();
reader.onload = loaded;
reader.readAsArrayBuffer(readFile); //array buffer

}
function loaded(evt) {
var listnamelib = "DocLib_Resumes";
var fileString = evt.target.result;
var X = _arrayBufferToBase64(fileString); // this is the method to convert Buffer array to Binary
var PathName = document.getElementById("docuploadresume").value;
var fileName = PathName.match(/\\([^\\]+)$/)[1];
fileName = $("#labrefid").text() + "_" + fileName;
url = _spPageContextInfo.webAbsoluteUrl + "/" + listnamelib + "/" + fileName;
var soapEnv =
"<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
<soap:Body>\
<CopyIntoItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>\
<SourceUrl>" + PathName + "</SourceUrl>\
<DestinationUrls>\
<string> " + url + "</string>\
</DestinationUrls>\
<Fields>\ <FieldInformation Type='Text' DisplayName='JobCode' InternalName='JobCode' Value='"+ $("#labrefid").text() + "' />\
<FieldInformation Type='Text' DisplayName='Position Title' InternalName='Position_x0020_Title' Value='"+ $("#labpositiontitle").text() + "' />\
<FieldInformation Type='Text' DisplayName='Employee Code' InternalName='Employee_x0020_Code' Value='"+ $("#txtempcode").val() + "' />\
<FieldInformation Type='Text' DisplayName='Employee Name' InternalName='Employee_x0020_Name' Value='"+ $("#txtempname").val() + "' />\
<FieldInformation Type='Text' DisplayName='Current Department' InternalName='Current_x0020_Department' Value='"+ $("#txtcurfunction").val() + "' />\
<FieldInformation Type='Text' DisplayName='Current Concept' InternalName='Current_x0020_Concept' Value='"+ $("#txtcurconcept").val() + "' />\
<FieldInformation Type='Text' DisplayName='Current Grade' InternalName='Current_x0020_Grade' Value='"+ $("#txtcurgrade").val() + "' />\
<FieldInformation Type='Text' DisplayName='Region' InternalName='Region' Value='"+ $("#txtregion").val() + "' />\
<FieldInformation Type='Text' DisplayName='Current Work Location' InternalName='Current_x0020_Work_x0020_Location' Value='"+ $("#txtworklocation").val() + "' />\
<FieldInformation Type='Text' DisplayName='Business Unit/OU' InternalName='Business_x0020_Unit_x002f_OU' Value='"+ $("#txtbusinessunit").val() + "' />\
<FieldInformation Type='Text' DisplayName='Last Role Change(if any)' InternalName='Last_x0020_Role_x0020_Change_x0028_if_x0020_any_x0029_' Value='"+ $("#drplastrolechange").val() + "' />\
</Fields>\
<Stream>" + X + "</Stream>\
</CopyIntoItems>\
</soap:Body>\
</soap:Envelope>";

$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/copy.asmx",
beforeSend: function (xhr) { xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/CopyIntoItems"); },
type: "post",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});

}

function processResult(xData, status) {
$("#loader").hide();
$(".loaderbackgroundcls").css("opacity", 1);
alert("Submitted successfully");
//clearall();
window.location.href = "/sites/iconnect/SitePages/Internaljobs.aspx";
}

function _arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
function clearall() {
$("#txtempcode").val("");
$("#txtempname").val("");
$("#txtcurfunction").val("");
$("#txtcurconcept").val("");
$("#txtcurgrade").val("");
$("#txtregion").val("");
$("#txtworklocation").val("");
$("#txtbusinessunit").val("");
$("#drplastrolechange").val("Yes");
$("#docuploadresume").val('');
}
</script>
</head>
<body>
<section>
<div class="container">
<br>
<div class="panel panel-default loaderbackgroundcls">
<div class="panel-heading capsltr">Applicant Details</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Reference Code of the Position:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label id="labrefid"></label>
</div>
</div>
</div>

<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Position Title:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label id="labpositiontitle"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Employee Code<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtempcode" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Employee Name<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtempname" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Current Function<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtcurfunction" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Current Concept<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtcurconcept" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Current Grade<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtcurgrade" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Region<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtregion" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Current Work Location<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtworklocation" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Business Unit/OU<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="text" id="txtbusinessunit" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Last Role Change(if any)<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<select id="drplastrolechange" class="form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="NA">NA</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<label>Upload Resume<span class="redstick">*</span>:</label>
</div>
</div>
<div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
<div class="form-group">
<input type="file" id="docuploadresume" class="form-control">
</div>
</div>
</div>
<div class="row">
<center>
<input type="button" class="btn btn-success" id="btnsubmit" value="Submit" onclick="aplicantsave()">   
<input type="button" class="btn btn-clear" id="btnclear" value="Clear" onclick="clearall()">
</center>
</div>
</div>
</div>
<div id="loader">
<img src='/sites/iconnect/Style Library/Homepage/images/Loader.gif' width="70" height="70" />
</div>
</div>
</section>
</body>
</html>

LaunchpadsUpload CSS:

<style>
.panel-default > .panel-heading {
background-color: #e8e6e6;
border-color: #e8e6e6;
}

.capsltr {
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
color: #535353;
}

label {
color: #34343e;
font-size: 13px;
}

.redstick
{
color: red;
font-size: 14px;
}

.btn-clear {
color: #fff !important;
background-color: #555353 !important;
border-color: #555353 !important;
padding: 6px 24px;
}

.btn-clear:hover {
color: #fff !important;
background-color: #413e3e !important;
border-color: #413e3e !important;
}

.btn-success {
color: #fff !important;
background-color: #5cb85c !important;
border-color: #4cae4c !important;
}
.btn-success:hover {
color: #fff !important;
background-color: #449d44 !important;
border-color: #398439 !important;
}
input[type=file]
{
padding: 5px 5px !important;
}
/*loader css*/
#loader
{
display:none;
width:69px;
height:89px;
position:absolute;
top:50%;
left:50%;
}
/*css for form*/
.form-group {
margin-bottom: 8px !important;
}

</style>

IMAGE for loader:

SharePoint

Monday, 7 January 2019

Add file with properties in SharePoint document library using HTML single Forms with bootstrap

No comments:

Post a Comment