1)HTML for upload document
<head>
<script src="jquery.min.js" type="text\javascript"></script>
</head>
<body>
<div>
<label>DocName:</label>
<input type="text" id="DocName" />
</div>
<div>
<label>User:</label>
<input type="text" id="Popuser" />
</div>
<div>
<input type="file" id="uploadFile" />
</div>
<div style="margin-top:20px;">
<button type="button" onclick="readFile()">Submit</button>
</div>
<script>
2)Get file from input tag
var fileInput;
$(document)
.ready(function () {
debugger;
fileInput = $("#getFile");
SP.SOD.executeFunc('sp.js', 'SP.ClientContext');
});
var arrayBuffer;
function readFile() {
debugger;
//Get File Input Control and read th file name
//var element = $("#fileBtn").files[0];
var element = document.getElementById("uploadFile");
var file = element.files[0];
var parts = element.value.split("\\");
var fileName = parts[parts.length - 1];
//Read File contents using file reader
var reader = new FileReader();
reader.onload = function (e) {
uploadFile(e.target.result, fileName);
}
reader.onerror = function (e) {
alert(e.target.error);
}
reader.readAsArrayBuffer(file);
}
var attachmentFiles;
function uploadFile(arrayBuffer, fileName) {
//Get Client Context,Web and List object.
var clientContext = new SP.ClientContext();
var oWeb = clientContext.get_web();
var oList = oWeb.get_lists().getByTitle('DocUpload');
//Convert the file contents into base64 data
var bytes = new Uint8Array(arrayBuffer);
var i, length, out = '';
for (i = 0, length = bytes.length; i < length; i += 1) {
out += String.fromCharCode(bytes[i]);
}
var base64 = btoa(out);
//Create FileCreationInformation object using the read file data
var createInfo = new SP.FileCreationInformation();
createInfo.set_content(base64);
createInfo.set_url(fileName);
//Add the file to the library
this.uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)
//Load client context and execcute the batch
listItem = uploadedDocument.get_listItemAllFields();
listItem.set_item('docName', fileName);
listItem.update();
clientContext.load(uploadedDocument,'ListItemAllFields'); //here at a time we are loading uploading funtionality and get items AND update items
clientContext.executeQueryAsync(Function.createDelegate(this, this.QuerySuccess), Function.createDelegate(this, this.QueryFailure));
}
function QuerySuccess() {
// if we want get curent upload item id ,we can use below line of code
var id = uploadedDocument.get_listItemAllFields();
console.log('File Uploaded Successfully.');
alert("File Uploaded Successfully.");
}
function QueryFailure(sender, args) {
console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
alert("Request failed with error message - " + args.get_message() + " . Stack Trace - " + args.get_stackTrace());
}
</script>
</body>
