File uploading api

[rachidio]

Hi,
I want upload files to a Sharepoint library, but didnt found a method to do this, do you plan to add it in the soonly?

Thanks

[AmitKB]

Hi, I am also looking for file upload functionality. It would be really great to have that.

[gitbrent]

Hi @ra6hi9 @AmitKB,

Uploading files is actually pretty easy.

Given an HTML file picker (<input type="file" id="filePicker">):

The code would be:

var reader = new FileReader();
reader.readAsArrayBuffer( $('#filePicker')[0].files[0] );
reader.onloadend = function(e){
    var parts = $('#filePicker')[0].value.split('\\');
    var fileName = parts[parts.length - 1];
    var strAjaxUrl = _spPageContextInfo.siteAbsoluteUrl
        + "/_api/web/lists/getByTitle('Site Assets')"
        + "/RootFolder/files/add(overwrite=true,url='"+ fileName +"')";

    sprLib.rest({
        url: strAjaxUrl,
        type: "POST",
        data: e.target.result
    })
    .then(function(arr){
        $('#console').append('SUCCESS: "'+ arr[0].Name +'" uploaded to: '+ arr[0].ServerRelativeUrl +'<br>');
    })
    .catch(function(strErr){
        console.error(strErr);
    });
};
reader.onerror = function(e){
    alert(e.target.error.responseText);
    console.error(e.target.error);
};

See examples/sprestlib-demo-file-upload for a working demo.

[AmitKB]

Thanks (y) @gitbrent

[hwang74]

please wrap it in the method since it's quite easy

[gitbrent]

Hi @ra6hi9 @AmitKB @hwang74

Thanks for your feedback.

The current codebase (future 1.9.0) has a new method: folder().upload()

It accepts an arraybuffer from either Node or browser - client browser example below using a standard HTML filepicker (<input id="filePicker" type="file">)

// STEP 1: Use FilePicker to read file
var reader = new FileReader();
reader.readAsArrayBuffer( $('#filePicker')[0].files[0] );
reader.onloadend = function(e){
    var parts = $('#filePicker')[0].value.split("\\");
    var fileName = parts[parts.length - 1];
    var foldName = $('#selDestLib').val();

    // STEP 2: Upload file to SharePoint
    sprLib.folder( foldName ).upload({
        name: fileName,
        data: e.target.result,
        overwrite: true
    });
});

Also, see examples/sprestlib-demo-file-upload.html for a live demo using a Webpart:

[Sreehari14]

By trying above example, I am getting sprLib.folder is not a function error, can you please guide me ?