"The parameter name url is not valid" on SharePoint REST API Call

Question

I'm using the code example 2 found here, attempting to add a file to a list in a SharePoint Online add-in.

I'm getting the error The parameter name url is not valid in the call to the function:

function addFileToFolder(arrayBuffer) {

    var fileName = $('#itemNumber').val() + "_image.png";

    var fileCollectionEndpoint = serverUrl + "_api/web/Lists/getByTitle('Pictures')/Files/Add(url='" + fileName + "', overwrite=true)"

    console.log(fileCollectionEndpoint);

    return jQuery.ajax({
        url: fileCollectionEndpoint,
        type: "POST",
        data: arrayBuffer,
        processData: false,
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": myFormDigest,
            "content-length": arrayBuffer.byteLength
        }
    });
}

fileCollectionEndpoint looks valid:

https://mySite-4642a56ed1c7b9.sharepoint.com/sites/develop_apps/PunchlistTracking/_api/web/Lists/getByTitle('Pictures')/Files/Add(url='myFile.png', overwrite=true)

I'm not finding anything on this error online. Any ideas?

Answer 1

Your fileCollectionEndpoint is not valid. You need to mention folder relative url. You don't need to get the library by name. Example from one of my real app.

var uploadUrl = "/_api/web/GetFolderByServerRelativeUrl(@folderurl)/Files/add(url=@filename, overwrite=true)?@folderurl='" + folderUrl + "'&@filename='" +fileName + "'";

If you want to upload the file into the root folder of your library, the value of folderUrl will be

 _spPageContextInfo.webServerRelativeUrl + "/{library Name}"