Uploading Files in SharePoint 2013 using CSOM and REST
Recently, I have been working through the process of trying to accomplish as many basic SharePoint tasks with both CSOM and REST as possible. My goal is to build a deeper understanding of what operations work in both approaches as well as strengths and limitations. In the case of document uploading, the CSOM approach is only good for files up to 1.5MB whereas REST is good up to 2GB. This makes understanding the REST approach critical, but I was struggling to get it working using the jQuery ajax method because the documentation is not great. In this post, I’ll save you the heartache I went through and just show you how to do it in both approaches.
Selecting Files
The first thing to set up is the control used for selecting files from the web page. This is a pretty simple use ofinput controls:
<input id="inputFile" type="file" />
<input id="uploadDocumentButton" type="Button" value="Upload Document"/>
The inputFile control allows for the browsing and selecting of files. The uploadDocumentButton control initiates the upload process. The inputFile control has a Files collection that you can use to access the file for uploading. The following code shows how to get the filename and file for uploading.
$("#uploadDocumentButton").click(function () {
if (document.getElementById("inputFile").files.length === 0) {
alert("Select a file!");
return;
}
var parts = document.getElementById("inputFile").value.split("\\");
var filename = parts[parts.length - 1];
var file = document.getElementById("inputFile").files[0];
}
Reading Files
Once the file is selected, you have to read the bytes into your JavaScript code. This is accomplished using theFileReader object. This object accepts the file information for loading asynchronously. The onload and onerrorevents fire when the file is loaded successfully or fails. I wrote a helper function using promises to read the file into an ArrayBuffer, which will be used later during the upload.
var getFileBuffer = function (file) {
var deferred = $.Deferred();
var reader = new FileReader();
reader.onload = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
};
Uploading with CSOM
Uploading the file with CSOM requires converting the ArrayBuffer to a Base64-encoded array, which is then put into a SP.FileCreationInformation object. The following code shows a complete library for uploading with CSOM.
"use strict";
var WingtipToys = window.WingtipToys || {};
WingtipToys.Jsom = WingtipToys.Jsom || {};
WingtipToys.Jsom.Libs = function () {
var deferreds = new Array(),
upload = function (serverRelativeUrl, filename, file) {
deferreds[deferreds.length] = $.Deferred();
getFileBuffer(file).then(
function (buffer) {
var bytes = new Uint8Array(buffer);
var content = new SP.Base64EncodedByteArray(); //base64 encoding
for (var b = 0; b < bytes.length; b++) {
content.append(bytes[b]);
}
var ctx = new SP.ClientContext.get_current();
var createInfo = new SP.FileCreationInformation();
createInfo.set_content(content); //setting the content of the new file
createInfo.set_overwrite(true);
createInfo.set_url(filename);
this.files = ctx.get_web().getFolderByServerRelativeUrl(serverRelativeUrl).get_files();
ctx.load(this.files);
this.files.add(createInfo);
ctx.executeQueryAsync(
Function.createDelegate(this,
function () { deferreds[deferreds.length - 1].resolve(this.files); }),
Function.createDelegate(this,
function (sender, args) { deferreds[deferreds.length - 1].reject(sender, args); }));
},
function (err) {
deferreds[deferreds.length - 1].reject(err);
}
);
return deferreds[deferreds.length - 1].promise();
},
getFileBuffer = function (file) {
//See previous code
};
return {
upload: upload,
};
}();
Once the library is written, uploading the file becomes pretty simple. For this example, I am assuming a document library named “JSOM Documents” exists. Notice how the server-relative URL is provided to the upload method.
WingtipToys.Jsom.Libs.upload("/apps/LibraryOperations/JSOM%20Documents", filename, file)
.then(
function (files) {
alert("Uploaded successfully");
},
function (sender, args) {
alert(args.get_message());
}
);
Uploading with REST
The REST approach can use the contents of the ArrayBuffer directly. The key to making this approach work with jQuery ajax is to set the processData flag to false. By default, jQuery ajax will process all non-string data into a query string, which corrupts the binary file data during the upload. By setting it to false, the data is faithfully uploaded. The following code shows a complete library for uploading with REST.
"use strict";
var WingtipToys = window.WingtipToys || {};
WingtipToys.Rest = WingtipToys.Rest || {};
WingtipToys.Rest.Libs = function () {
var upload = function (serverRelativeUrl, filename, file) {
var deferred = $.Deferred();
getFileBuffer(file).then(
function (arrayBuffer) {
$.ajax({
url: _spPageContextInfo.webServerRelativeUrl +
"/_api/web/GetFolderByServerRelativeUrl('" + serverRelativeUrl + "')/Files" +
"/Add(url='" + filename + "', overwrite=true)",
type: "POST",
data: arrayBuffer,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-length": arrayBuffer.byteLength
},
success: function (data) {
deferred.resolve(data);
},
error: function (err) {
deferred.reject(err);
}
});
},
function (err) {
deferred.reject(err);
}
);
return deferred.promise();
},
getFileBuffer = function (file) {
//See previous code
};
return {
upload: upload
};
}();
Again, once you have the library, uploading the file is easy. Here is the REST version of the upload method.
WingtipToys.Rest.Libs.upload("/apps/LibraryOperations/REST%20Documents", filename, file)
.then(
function (data) {
alert("Uploaded successfully");
},
function (err) {
alert(JSON.stringify(err));
}
);
Conclusions
As with most things in programming, it’s pretty simple when someone shows you how. Sparse documentation on MSDN, however, gave me a couple of days of agony. (I'll probably get a laugh when a reader points me at a full code sample somehere on MSDN that I missed.)
The big takeaway from this effort is that now you can easily use the REST interface for file uploading, which is good for files up to 2GB. Because CSOM is limited to 1.5MB, it seems like there is really little point to using anything but REST.
Uploading Files in SharePoint 2013 using CSOM and REST的更多相关文章
- SharePoint 2013 开发——CSOM概要
博客地址:http://blog.csdn.net/FoxDave 本篇对客户端API做一个大致地了解. 看一下各个类别主要API之间的对应关系表. 假设我们对Server API已经有了足够地了 ...
- How to copy files between sites using JavaScript REST in Office365 / SharePoint 2013
http://techmikael.blogspot.in/2013/07/how-to-copy-files-between-sites-using.html I'm currently playi ...
- 解决SharePoint 2013 designer workflow 在发布的报错“负载平衡没有设置”The workflow files were saved but cannot be run.
原因是app management service没有设置好,在管理中心把他删掉,重新建一个就可以了 Provision App Management Service In SharePoint 20 ...
- SharePoint 2013 开发——搜索架构及扩展
博客地址:http://blog.csdn.net/FoxDave SharePoint 2013高度整合了搜索引擎,在一个场中只有一个搜索服务应用程序(SSA).它集成了FAST,只有一个代码库 ...
- SharePoint 2013的100个新功能之开发
一:SharePoint应用 SharePoint 2013引入了云应用模型来供用户创建应用.SharePoint应用是独立的功能整合,扩展了SharePoint网站的功能.应用可以包含SharePo ...
- 实现一个基于 SharePoint 2013 的 Timecard 应用(中)
门户视图 随着 Timecard 列表的增多,如何查找和管理这许多的 Timecard 也就成了问题.尤其对于团队经理而言,他除了自己填写的 Timecard,还要审核团队成员的 Timecard 任 ...
- 实现一个基于 SharePoint 2013 的 Timecard 应用(上)
在 SharePoint 2013 上面实现一个 Timecard 应用的想法来自一个真实的需求,而实现的方案在我脑海里面盘旋已经很久了,终于这几天准备安排点儿时间将它实现出来. “ We start ...
- Integrating SharePoint 2013 with ADFS and Shibboleth
Time again to attempt to implement that exciting technology, Federation Services (Web Single Sign On ...
- office 365 Sharepoint 2013
平台环境: office 365 Sharepoint 2013 操作文件和文件夹 访问文档库的最佳方式是借助在 /_api/web 处可用的 GetFolderByServerRelativeUr ...
随机推荐
- LINQ to SQL语句非常详细(原文来自于网络)
LINQ to SQL语句(1)之Where Where操作 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子 ...
- 【cs229-Lecture18】线性二次型调节控制
本节内容: 控制MDP的算法: 状态行动奖励: 非线性动力学系统: 模型: LQR:线性二次型调节控制:(Riccati方程)
- android.support.v4包中的LruCache源码简读
package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...
- actionbar部分设置:colorPrimary colorPrimaryDark colorAccent 下部阴影
去除actionbar下阴影: <item name="android:windowContentOverlay">@null</item>
- tcp为什要三次握手
准备知识: 单工:信息只能单向传递.发送-->接收,单向,不能返回响应. 双工:指的是信息可双向发送. 全双工:信息可同时双向传递. 半双工:不能同时,单行道,一边传输完了,另一边才能发起传输. ...
- 创意欣赏:20幅字体排版(Typography)素描
通常我们都只关注最终的作品,但其实幕后还有很多的过程,其中一个是素描.素描用来表达最初思想观念的原型.有时客户需要一个独特的品牌新LOGO或字体,这时先绘制在纸上是比较方便的,之后扫描到 Photos ...
- [python]初探socket
1.什么是socket? Socket中文译作:套接字,但是大家一般约定俗称的都用:socket.我想在解释socket是什么之前,先说它是用来干嘛的:socket是来建立'通信'的基础,建立连接,传 ...
- sql语句查询数据库表结构信息
开发中经常用到查询指定表及其字段的信息,以下是我整理的SQL语句查询方法,供自己平时使用也提供给大家参考! 1.适用MS SQL SERVER: SELECT 表名 = then d.name els ...
- Sprint回顾
1.回顾组织 主题:“我们下次怎么样才能更加认真对待?” 时间:设定为1至2个小时. 参与者:整个团队. 场所:能够在不受干扰的情况下讨论. 秘书:指定某人当秘书,筹备.记录.整理. 2.回顾流程 ...
- Silverlight开源项目与第三方控件收集
http://easysl.codeplex.com/ http://compositewpf.codeplex.com/ http://silverlight.codeplex.com/releas ...