Skip to content

Commit f946140

Browse files
Merge pull request SharePoint#4848 from andrewconnell/docfix-issue3159
Fix typo, markdown cleanup
2 parents 953b907 + 48cc1f8 commit f946140

File tree

1 file changed

+22
-39
lines changed

1 file changed

+22
-39
lines changed

docs/sp-add-ins/upload-a-file-by-using-the-rest-api-and-jquery.md

Lines changed: 22 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Upload a file by using the REST API and jQuery
33
description: Upload a local file to a SharePoint folder by using the REST API and jQuery AJAX requests.
4-
ms.date: 4/19/2018
4+
ms.date: 11/01/2019
55
ms.prod: sharepoint
66
localization_priority: Priority
77
---
@@ -10,47 +10,42 @@ localization_priority: Priority
1010

1111
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.
1212

13-
This process uses the following high-level steps:
13+
This process uses the following high-level steps:
1414

1515
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+
1918
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.
2419

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.
2522

2623
<a name="RunTheExamples"> </a>
2724

2825
## Running the code examples
2926

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.
3128

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.
3330

3431
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]
3734
> 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+
3936
To use the examples in this article, you'll need the following:
4037

4138
- SharePoint Server or SharePoint Online.
42-
4339
- **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-
4540
- Browser support for the **FileReader** API (HTML5).
46-
4741
- A reference to the jQuery library in your page markup. For example:
48-
42+
4943
```HTML
5044
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
5145
```
46+
5247
- The following controls in your page markup.
53-
48+
5449
```HTML
5550
<input id="getFile" type="file"/><br />
5651
<input id="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:
6459
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.
6560

6661
You need to meet [these requirements](#RunTheExamples) to use this example.
67-
6862

6963
```js
7064
'use strict';
@@ -88,7 +82,7 @@ jQuery(document).ready(function () {
8882
function uploadFile() {
8983

9084
// Define the folder path for this example.
91-
var serverRelativeUrlToFolder = '/shared documents';
85+
var serverRelativeUrlToFolder = 'shared documents';
9286

9387
// Get test values from the file input and text input page controls.
9488
// The display name must be unique every time you run the example.
@@ -171,7 +165,7 @@ function uploadFile() {
171165
// add-in web and specifies the host web as the context site.
172166
fileListItemUri = fileListItemUri.replace(hostWebUrl, '{0}');
173167
fileListItemUri = fileListItemUri.replace('_api/Web', '_api/sp.appcontextsite(@target)/web');
174-
168+
175169
var listItemAllFieldsEndpoint = String.format(fileListItemUri + "?@target='{1}'",
176170
appWebUrl, hostWebUrl);
177171

@@ -191,7 +185,7 @@ function uploadFile() {
191185
var listItemUri = itemMetadata.uri.replace('_api/Web', '_api/sp.appcontextsite(@target)/web');
192186
var listItemEndpoint = String.format(listItemUri + "?@target='{0}'", hostWebUrl);
193187

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.
195189
// For simplicity, also use the name as the title.
196190
// The example gets the list item type from the item's metadata, but you can also get it from the
197191
// ListItemEntityTypeFullName property of the list.
@@ -215,7 +209,7 @@ function uploadFile() {
215209
}
216210
}
217211

218-
// Display error messages.
212+
// Display error messages.
219213
function onError(error) {
220214
alert(error.responseText);
221215
}
@@ -231,15 +225,13 @@ function getQueryStringParameter(paramToRetrieve) {
231225
}
232226
```
233227

234-
<br/>
235-
236228
<a name="CodeExample2"> </a>
237229

238230
## Code example 2: Upload a file in the same ___domain by using the REST API and jQuery
239231

240232
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.
241233

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.
243235

244236
```js
245237
'use strict';
@@ -348,8 +340,8 @@ function uploadFile() {
348340
// Change the display name and title of the list item.
349341
function updateListItem(itemMetadata) {
350342

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.
353345
// The example gets the list item type from the item's metadata, but you can also get it from the
354346
// ListItemEntityTypeFullName property of the list.
355347
var body = String.format("{{'__metadata':{{'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}",
@@ -372,25 +364,16 @@ function uploadFile() {
372364
}
373365
}
374366

375-
// Display error messages.
367+
// Display error messages.
376368
function onError(error) {
377369
alert(error.responseText);
378370
}
379371
```
380372

381-
<br/>
382-
383373
## See also
384374

385375
- [Get to know the SharePoint REST service](get-to-know-the-sharepoint-rest-service.md)
386376
- [Access SharePoint data from add-ins using the cross-___domain library](access-sharepoint-data-from-add-ins-using-the-cross-___domain-library.md)
387377
- [REST API reference and samples](https://msdn.microsoft.com/library)
388378
- [OData resources](get-to-know-the-sharepoint-rest-service.md#odata-resources)
389379
- [Develop SharePoint Add-ins](develop-sharepoint-add-ins.md)
390-
391-
392-
393-
394-
395-
396-

0 commit comments

Comments
 (0)