Using Sharepoint client API to upload file as attachment in javascript

Question

is there a way to upload file as attachment while using JavaScript client object model in sharepoint 2013? Or using web service in the middle is required? I cannot use FileAPI from HTML5.

Thank you for any ideas.

Answer 1

Yes..I found this blog post very usefull...

Using JSOM to write (small) files to a SharePoint 2013 document library

Basically the code you need is as follows:

$(document).ready(function ()
{
// Get the URI decoded host web URL
// We will use this to get a context here to write data
hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
});

 function CreateFile()
{
// Ensure the HTML5 FileReader API is supported
if (window.FileReader)
{
    input = document.getElementById("fileinput");
    if (input)
    {
        file = input.files[0];
        fr = new FileReader();
        fr.onload = receivedBinary;
        fr.readAsDataURL(file);
    }
}
else
{
    alert("The HTML5 FileSystem APIs are not fully supported in this browser.");
}
}

// Callback function for onload event of FileReader
function receivedBinary()
{
// Get the ClientContext for the app web
clientContext = new SP.ClientContext.get_current();
// Use the host web URL to get a parent context - this allows us to get data from the parent
parentCtx = new SP.AppContextSite(clientContext, hostweburl);
parentWeb = parentCtx.get_web();
parentList = parentWeb.get_lists().getByTitle("Documents");

fileCreateInfo = new SP.FileCreationInformation();
fileCreateInfo.set_url(file.name);
fileCreateInfo.set_overwrite(true);
fileCreateInfo.set_content(new SP.Base64EncodedByteArray());

// Read the binary contents of the base 64 data URL into a Uint8Array
// Append the contents of this array to the SP.FileCreationInformation
var arr = convertDataURIToBinary(this.result);
for (var i = 0; i < arr.length; ++i)
{
    fileCreateInfo.get_content().append(arr[i]);
}

// Upload the file to the root folder of the document library
this.newFile = parentList.get_rootFolder().get_files().add(fileCreateInfo);

clientContext.load(this.newFile);
clientContext.executeQueryAsync(onSuccess, onFailure);
}

function onSuccess()
{
// File successfully uploaded
alert("Success!");
}

function onFailure()
{
// Error occurred
alert("Request failed: " + arguments[1].get_message());
}

// Utility function to remove base64 URL prefix and store base64-encoded string in a    Uint8Array
// Courtesy: https://gist.github.com/borismus/1032746
function convertDataURIToBinary(dataURI)
{
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));

for (i = 0; i < rawLength; i++)
{
    array[i] = raw.charCodeAt(i);
}
return array;
}

Answer 2

If this is a SharePoint library the cleanest way is using the SharePoint Modal Dialog. You need your List ID and a path to the root folder.

If its an attachment you can use the AttachFile.aspx layout page. You would need the List GUID and the item ID.

This will use the out of the box SharePoint functionality and will return a status of OK if everything went okay.

var url = "siteurl/_layouts/Attachfile.aspx?ListId={" + GUID + "}&ItemId=" + ID;

    //var url = "siteurl/_layouts/Upload.aspx?List=" + listId + "&RootFolder=" + folderPath;


    var options = {
        url: url,
        dialogReturnValueCallback: function(result, fileAdded){

            if(result == SP.UI.DialogResult.OK){
                //update list of files
            }
        }
    };
    SP.UI.ModalDialog.showModalDialog(options);

You would need the list GUID and the item ID