Sharepoint - Can't upload a non-text file to SharePoint App via REST API
I was able to add a file with SP.RequestExecutor
<%-- _lcid="1033" _version="15.0.4128" _dal="1" --%>
<%-- _LocalBinding --%>
<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<SharePoint:ScriptLink language="javascript" name="~site/Scripts/js/jquery-1.8.2.js" OnDemand="false" runat="server" Localizable="false"/>
<input id="ufile" type="file" ></input>
<script type="text/javascript">
$(document).ready( dofunc() );
function dofunc() {
var control = document.getElementById("ufile");
control.addEventListener("change", fdocattach, false);
}
var file;
var contents;
function fdocattach(event) {
var i = 0,
files = event.srcElement.files,
len = files.length;
for (; i < len; i++) {
console.log("Filename: " + files[i].name);
console.log("Type: " + files[i].type);
console.log("Size: " + files[i].size + " bytes");
}
if (!window.FileReader) {
alert("The FileSystem APIs are not fully supported in this browser.");
return false;
}
if (files.length > 0) {
file = files[0];
fileName = file.name;
var reader = new FileReader();
reader.onload = fonload;
reader.onerror = function(event) {
console.error("File reading error " + event.target.error.code);
};
reader.readAsArrayBuffer(file);
}
return false;
}
function _arrayBufferToBase64(buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return binary;
}
function fonload(event) {
contents = event.target.result;
$.getScript("https://addinexpress966.sharepoint.com/Test1/_layouts/15/SP.RequestExecutor.js", fonload2);
}
function fonload2() {
var contents2 = _arrayBufferToBase64(contents);
var createitem = new SP.RequestExecutor("https://addinexpress966.sharepoint.com/Test1");
createitem.executeAsync({
url: "https://addinexpress966.sharepoint.com/Test1/_api/web/lists/GetByTitle('List1')/items(1)/AttachmentFiles/add(FileName='" + file.name + "')",
method: "POST",
binaryStringRequestBody: true,
body: contents2,
success: fsucc,
error: ferr,
state: "Update"
});
function fsucc(data)
{
alert('success');
}
function ferr(data)
{
alert('error\n\n' + data.statusText + "\n\n" + data.responseText);
}
}
</script>
</asp:Content>
After reading up and a lot of fiddling i came up with setting the data attribute to the file and processData to false. This worked great, except for dropfile not supporting readAsArrayBuffer.
So i used the above convertDataURIToBinary function. Now i have this and it works great. Remarks: files.data is added on the load event and i had to turn async of when attaching multiple files to a listitem.
jQuery.ajax({
url: listUrl + "/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')",
type: "POST",
async: false,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
data: convertDataURIToBinary(file.data),
success: function(e) { _.log(_.logType.verbose, "File uploaded: " + e); },
error: function(e) { _.log(_.logType.warning, "File not uploaded: " + e); }
});
var convertDataURIToBinary = function(dataURI) {
var base64Marker = ";base64,";
var base64Index = dataURI.indexOf(base64Marker) + base64Marker.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new window.Uint8Array(new window.ArrayBuffer(rawLength));
for (i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
};
var filesDropped = function (e) {
e = e || window.event;
var files = (e.files || e.dataTransfer.files);
jQuery(files).each(function (index, element) {
var fileReader = new FileReader();
fileReader.file = element;
fileReader.onload = fileLoaded;
fileReader.onerror = function () {
_.log(_.logType.warning, "Error reading file: " + this.file.name);
};
fileReader.readAsDataURL(element);
});
return false;
};
var fileLoaded = function (fileOnloadEvent) {
this.file.data = fileOnloadEvent.target.result;
var filename = this.file.name.toLowerCase();
jQuery(vm.files()).each(function (fIndex, fElement) {
if (fElement.name.toLowerCase() === filename)
vm.removeFile(fElement);
});
vm.files.push(this.file);
};