You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The code examples in this article use the REST interface and jQuery AJAX requests to add a local file to the **Documents** library, and then change properties of the list item that represents the uploaded file.
12
12
13
-
This process uses the following high-level steps:
13
+
This process uses the following high-level steps:
14
14
15
15
1. Convert the local file to an array buffer by using the **FileReader** API, which requires HTML5 support. The **jQuery(document).ready** function checks for FileReader API support in the browser.
16
-
17
-
2. Add the file to the **Shared Documents** folder by using the **Add** method on the folder's file collection. The array buffer is passed in the body of the POST request.
18
-
16
+
1. Add the file to the **Shared Documents** folder by using the **Add** method on the folder's file collection. The array buffer is passed in the body of the POST request.
17
+
19
18
These examples use the **getfolderbyserverrelativeurl** endpoint to reach the file collection, but you can also use a list endpoint (example: `…/_api/web/lists/getbytitle('<list title>')/rootfolder/files/add`).
20
-
21
-
3. Get the list item that corresponds to the uploaded file by using the **ListItemAllFields** property of the uploaded file.
22
-
23
-
4. Change the display name and title of the list item by using a MERGE request.
24
19
20
+
1. Get the list item that corresponds to the uploaded file by using the **ListItemAllFields** property of the uploaded file.
21
+
1. Change the display name and title of the list item by using a MERGE request.
25
22
26
23
<aname="RunTheExamples"> </a>
27
24
28
25
## Running the code examples
29
26
30
-
Both code examples in this article use the REST API and jQuery AJAX requests to upload a file to the **Shared Documents** folder and then change list item properties.
27
+
Both code examples in this article use the REST API and jQuery AJAX requests to upload a file to the **Shared Documents** folder and then change list item properties.
31
28
32
-
The first example uses **SP.AppContextSite** to make calls across SharePoint domains, like a SharePoint-hosted add-in would do when uploading files to the host web.
29
+
The first example uses **SP.AppContextSite** to make calls across SharePoint domains, like a SharePoint-hosted add-in would do when uploading files to the host web.
33
30
34
31
The second example makes same-___domain calls, like a SharePoint-hosted add-in would do when uploading files to the add-in web, or a solution that's running on the server would do when uploading files.
35
-
36
-
> [!NOTE]
32
+
33
+
> [!NOTE]
37
34
> Provider-hosted add-ins written in JavaScript must use the SP.RequestExecutor cross-___domain library to send requests to a SharePoint ___domain. For an example, see [upload a file by using the cross-___domain library](https://msdn.microsoft.com/en-us/library/office/dn450841.aspx).
38
-
35
+
39
36
To use the examples in this article, you'll need the following:
40
37
41
38
- SharePoint Server or SharePoint Online.
42
-
43
39
-**Write** permissions to the **Documents** library for the user running the code. If you're developing a SharePoint Add-in, you can specify **Write** add-in permissions at the **List** scope.
44
-
45
40
- Browser support for the **FileReader** API (HTML5).
46
-
47
41
- A reference to the jQuery library in your page markup. For example:
<inputid="displayName"type="text"value="Enter a unique name" /><br />
@@ -64,7 +59,6 @@ To use the examples in this article, you'll need the following:
64
59
The following code example uses the SharePoint REST API and jQuery AJAX requests to upload a file to the **Documents** library and to change properties of the list item that represents the file. The context for this example is a SharePoint-hosted add-in that uploads a file to a folder on the host web.
65
60
66
61
You need to meet [these requirements](#RunTheExamples) to use this example.
var listItemAllFieldsEndpoint = String.format(fileListItemUri + "?@target='{1}'",
176
170
appWebUrl, hostWebUrl);
177
171
@@ -191,7 +185,7 @@ function uploadFile() {
191
185
var listItemUri = itemMetadata.uri.replace('_api/Web', '_api/sp.appcontextsite(@target)/web');
192
186
var listItemEndpoint = String.format(listItemUri + "?@target='{0}'", hostWebUrl);
193
187
194
-
// Define the list item changes. Use the FileLeafRef property to change the display name.
188
+
// Define the list item changes. Use the FileLeafRef property to change the display name.
195
189
// For simplicity, also use the name as the title.
196
190
// The example gets the list item type from the item's metadata, but you can also get it from the
197
191
// ListItemEntityTypeFullName property of the list.
@@ -215,7 +209,7 @@ function uploadFile() {
215
209
}
216
210
}
217
211
218
-
// Display error messages.
212
+
// Display error messages.
219
213
function onError(error) {
220
214
alert(error.responseText);
221
215
}
@@ -231,15 +225,13 @@ function getQueryStringParameter(paramToRetrieve) {
231
225
}
232
226
```
233
227
234
-
<br/>
235
-
236
228
<aname="CodeExample2"> </a>
237
229
238
230
## Code example 2: Upload a file in the same ___domain by using the REST API and jQuery
239
231
240
232
The following code example uses the SharePoint REST API and jQuery AJAX requests to upload a file to the **Documents** library and to change properties of the list item that represents the file. The context for this example is a solution that's running on the server. The code would be similar in a SharePoint-hosted add-in that uploads files to the add-in web.
241
233
242
-
You need to meet [these requirements](#RunTheExamples) before you can run this example.
234
+
You need to meet [these requirements](#RunTheExamples) before you can run this example.
243
235
244
236
```js
245
237
'use strict';
@@ -348,8 +340,8 @@ function uploadFile() {
348
340
// Change the display name and title of the list item.
349
341
functionupdateListItem(itemMetadata) {
350
342
351
-
// Define the list item changes. Use the FileLeafRef property to change the display name.
352
-
// For simplicity, also use the name as the title.
343
+
// Define the list item changes. Use the FileLeafRef property to change the display name.
344
+
// For simplicity, also use the name as the title.
353
345
// The example gets the list item type from the item's metadata, but you can also get it from the
354
346
// ListItemEntityTypeFullName property of the list.
355
347
var body =String.format("{{'__metadata':{{'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}",
@@ -372,25 +364,16 @@ function uploadFile() {
372
364
}
373
365
}
374
366
375
-
// Display error messages.
367
+
// Display error messages.
376
368
functiononError(error) {
377
369
alert(error.responseText);
378
370
}
379
371
```
380
372
381
-
<br/>
382
-
383
373
## See also
384
374
385
375
-[Get to know the SharePoint REST service](get-to-know-the-sharepoint-rest-service.md)
386
376
-[Access SharePoint data from add-ins using the cross-___domain library](access-sharepoint-data-from-add-ins-using-the-cross-___domain-library.md)
387
377
-[REST API reference and samples](https://msdn.microsoft.com/library)
0 commit comments