4

I am developing a sharepoint-hosted application now it can upload files to a document library using REST api can anybody help me to achieve this.

5

Too many solutions are in the web. Please bother to search before asking!

function uploadDocument() {
    if (!window.FileReader) {
        alert("This browser does not support the HTML5 File APIs");
        return;
    }

    var element = document.getElementById("uploadInput");
    var file = element.files[0];
    var parts = element.value.split("\\");
    var fileName = parts[parts.length - 1];

    var reader = new FileReader();
    reader.onload = function (e) {
        addItem(e.target.result, fileName);
    }
    reader.onerror = function (e) {
        alert(e.target.error);
    }
    reader.readAsArrayBuffer(file);

    function addItem(buffer, fileName) {
        var call = uploadDocument(buffer, fileName);
        call.done(function (data, textStatus, jqXHR) {
            var call2 = getItem(data.d);
            call2.done(function (data, textStatus, jqXHR) {
                var item = data.d;
                var call3 = updateItemFields(item);
                call3.done(function (data, textStatus, jqXHR) {
                    var div = jQuery("#message");
                    div.text("Item added");
                });
                call3.fail(function (jqXHR, textStatus, errorThrown) {
                    failHandler(jqXHR, textStatus, errorThrown);
                });
            });
            call2.fail(function (jqXHR, textStatus, errorThrown) {
                failHandler(jqXHR, textStatus, errorThrown);
            });
        });
        call.fail(function (jqXHR, textStatus, errorThrown) {
            failHandler(jqXHR, textStatus, errorThrown);
        });
    }

    function uploadDocument(buffer, fileName) {
        var url = String.format(
            "{0}/_api/Web/Lists/getByTitle('Project Documents')/RootFolder/Files/Add(url='{1}', overwrite=true)",
            _spPageContextInfo.webAbsoluteUrl, fileName);
        var call = jQuery.ajax({
            url: url,
            type: "POST",
            data: buffer,
            processData: false,
            headers: {
                Accept: "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
                "Content-Length": buffer.byteLength
            }
        });

        return call;
    }

    function getItem(file) {
        var call = jQuery.ajax({
            url: file.ListItemAllFields.__deferred.uri,
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }
        });

        return call;
    }

    function updateItemFields(item) {
        var now = new Date();
        var call = jQuery.ajax({
            url: _spPageContextInfo.webAbsoluteUrl +
                "/_api/Web/Lists/getByTitle('Project Documents')/Items(" +
                item.Id + ")",
            type: "POST",
            data: JSON.stringify({
                "__metadata": { type: "SP.Data.Project_x0020_DocumentsItem" },
                Year: now.getFullYear()
            }),
            headers: {
                Accept: "application/json;odata=verbose",
                "Content-Type": "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
                "IF-MATCH": item.__metadata.etag,
                "X-Http-Method": "MERGE"
            }
        });

        return call;
    }

    function failHandler(jqXHR, textStatus, errorThrown) {
        var response = JSON.parse(jqXHR.responseText);
        var message = response ? response.error.message.value : textStatus;
        alert("Call failed. Error: " + message);
    }
}

The example taken from here

  • 1
    I'd tried already this code but it returns this problem : 403 (Forbidden) – Looytawon Sep 24 '15 at 15:30
  • what is is the actual error? show whole error message over here. reason could be the URL you are posting your data. Show your code in your question – Atish Dipongkor - MVP Sep 24 '15 at 16:13
  • I figure out what's the problem. now this.... the document library where i want to upload the files is located at this a specified site 'domain.sharepoint.com/Documents/Forms/AllItems.aspx' and i'm running my application at 'domain.sharepoint.com/myapp' there's no problem when i tried to upload the files on the domain.sharepoint.com/myapp/Documents' now the issue is how to upload files at that site above using your code.. – Looytawon Sep 25 '15 at 3:32
  • yes you can upload from sub site to root site. in that case you url should be 'domain.sharepoint.com/Documents'. You can run your application from anywhere...... it does not matter. only the url matters – Atish Dipongkor - MVP Sep 25 '15 at 4:28
  • var url = String.format( {0}/_api/Web/Lists/getByTitle('Documents')/RootFolder/Files/Add(url='{1}', overwrite=true)", shptService.hostWebUrl, fileName); where shptService.hostWebUrl is 'domain.sharepoint.com/Documents' but i'm having then the 403 forbidden error . – Looytawon Sep 25 '15 at 5:49
1

As you're getting a 403 error, You are facing the permissions issue, you need to give appropriate permissions in your app's app.manifest file.

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.