Kendo ui SharePoint File upload

Question

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

Answer 1

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

Answer 2

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