Does anyone have experience using Kendo ui upload feature with SharePoint rest api? Any tips or guidance would be of great help.
Here's an typrescript
example using the upload.aspx
. You should be able to modify and translate the code to your app.
private uploadFile(fileToUpload: FileItem, upload: SpDocument, cb: (success: boolean) => void, retrycount = 0) {
let totalSizeForRequest = 0;
let fd = new FormData();
fd.append(fileToUpload._file.name, fileToUpload._file);
totalSizeForRequest += fileToUpload._file.size;
let xhr = new XMLHttpRequest();
let uploadUrl = SP.Utilities.UrlBuilder.urlCombine(_spPageContextInfo.siteAbsoluteUrl, '_layouts/15/upload.aspx?IsAJAX=1&List=')
+ `{${this.listId}}`
+ '&RootFolder='
+ encodeURIComponent(this.folderRelativePath);
xhr.open('POST', uploadUrl, true);
xhr.setRequestHeader('x-requestdigest', document.forms[(<any>window).MSOWebPartPageFormName]['__REQUESTDIGEST'].value);
let onprogressFunc = function (evt) {
if (Boolean(evt.lengthComputable)) {
let progress = (evt.loaded / evt.total) * 100;
upload.uploadProgress = progress;
}
};
let xhrUpload = xhr.upload;
if (typeof xhrUpload !== 'undefined') {
xhrUpload.addEventListener('progress', onprogressFunc, false);
}
xhr.onreadystatechange = (aEvt) => {
let xmlreq = (<any>aEvt.target);
if (xmlreq.readyState === 4) {
// some unicorn bug here - fetch the error if one occurs and bring it to the UI / console
try {
if (<string>(xmlreq.responseText).startsWith('<')) {
if (retrycount < 5) {
this.uploadFile(fileToUpload, upload, cb, retrycount + 1);
} else {
this.notification.showError(`Dateiupload fehlgeschlagen (${fileToUpload.name})`, 'Zugriff verweigert');
cb(false);
}
} else {
let response = eval(xmlreq.responseText)[0];
if (response === '1') {
// successfully uploaded the file
let fileUrl = SP.Utilities.UrlBuilder.urlCombine(this.folderRelativePath, fileToUpload._file.name);
this.validateUpload(fileUrl, upload, (success) => {
cb(success);
});
} else {
// error while uploading the file
this.notification.showError(`Dateiupload fehlgeschlagen (${fileToUpload.name})`, response);
cb(false);
}
}
} catch (ex) {
console.log('Could not uplaod files', ex, xmlreq, aEvt, xhr);
this.notification.showError(`Dateiupload fehlgeschlagen (${fileToUpload.name})`, ex);
cb(false);
}
};
};
xhr.send(fd);
}
-
Thanks for this but I have examples of uploading files to SharePoint using rest api and jQuery. My question is more related to any example using Kendo UI file upload functionality to SharePoint. – Damien Flood Aug 8 '17 at 17:19
-
As far as I know, there is no ready to use code in the web for that. But feel free to share it when you get something working. – Mx. Aug 9 '17 at 7:39
So I have tried the following and it seems to work although not 100% sure its the correct method, maybe someone with better JS knowledge can review.
function onUpload(e) {
var filename = "";
$.each(e.files, function (index, value) {
var xhr = e.XMLHttpRequest;
if (xhr) {
xhr.addEventListener("readystatechange", function (e) {
if (xhr.readyState == 1 /* OPENED */) {
xhr.setRequestHeader("X-RequestDigest", $("#__REQUESTDIGEST").val());
xhr.setRequestHeader("Accept", "application/json;odata=verbose");
}
});
}
filename = value.name;
});
e.sender.options.async.saveUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Documents')/rootfolder/files/Add(url='" + filename + "', overwrite=true)";
};