3

Does anyone have experience using Kendo ui upload feature with SharePoint rest api? Any tips or guidance would be of great help.

5

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
1

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)";
     };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.