Develop the project using the following method in the NAPA Tool.
On your Developer Site, open the "Napa" Office 365 Development Tools and then choose Add New Project.
- Choose the App for SharePoint template, name the project. Create the site and then choose the Create button.
- Replace APP.js with the following source code.
- Publish Your App.
Prerequisites
The following are important steps to be done before creating the app.
Specify the permissions that your app needs as in the following.
Choose the Properties button at the bottom of the page.
- In the Properties window, choose Permissions.
- In the Content category, set the Write permissions for the Tenant scope.
- In the Social category, set the Read permissions for the User Profiles scope.
- Close the Properties window.
Default ASPX
- <input id="getFile" type="file"/><br />
- <input id="displayName" type="text" value="Enter a unique name" /><br />
- <input id="addFileButton" type="button" value="Upload" onclick="uploadFile()"/>
Source Code
- 'use strict';
-
- var appWebUrl, hostWebUrl;
-
- $(document).ready(function ()
- {
-
-
- if (!window.FileReader) {
- alert(' FileReader API does not support Your Current Browser.');
- }
-
-
- appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
- hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
- });
-
-
-
- function uploadFile()
- {
-
-
- var serverRelativeUrlToFolder = '/sites/apps/shared documents';
-
-
-
- var fileInput = $('#getFile');
- var newName = $('#displayName').val();
-
-
-
- var getFile = getFileBuffer();
- getFile.done(function (arrayBuffer) {
-
-
- var addFile = addFileToFolder(arrayBuffer);
- addFile.done(function (file, status, xhr) {
-
-
- var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri);
- getItem.done(function (listItem, status, xhr) {
-
-
- var changeItem = updateListItem(listItem.d.__metadata);
- changeItem.done(function (data, status, xhr) {
- alert('file uploaded successfully in Library);
- });
- changeItem.fail(onError);
- });
- getItem.fail(onError);
- });
- addFile.fail(onError);
- });
- getFile.fail(onError);
-
-
- function getFileBuffer()
- {
- var deferred = jQuery.Deferred();
- var reader = new FileReader();
- reader.onloadend = function (e) {
- deferred.resolve(e.target.result);
- }
- reader.onerror = function (e) {
- deferred.reject(e.target.error);
- }
- reader.readAsArrayBuffer(fileInput[0].files[0]);
- return deferred.promise();
- }
-
-
- function addFileToFolder(arrayBuffer)
- {
-
-
- var parts = fileInput[0].value.split('\\');
- var fileName = parts[parts.length - 1];
-
-
- var fileCollectionEndpoint = String.format(
- "{0}/_api/sp.appcontextsite(@target)/web/getfolderbyserverrelativeurl('{1}')/files" +
- "/add(overwrite=true, url='{2}')?@target='{3}'",
- appWebUrl, serverRelativeUrlToFolder, fileName, hostWebUrl);
-
-
-
- return $.ajax({
- url: fileCollectionEndpoint,
- type: "POST",
- data: arrayBuffer,
- processData: false,
- headers: {
- "accept": "application/json;odata=verbose",
- "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
- "content-length": arrayBuffer.byteLength
- }
- });
- }
-
-
- function getListItem(fileListItemUri)
- {
-
-
-
-
- fileListItemUri = fileListItemUri.replace(hostWebUrl, '{0}');
- fileListItemUri = fileListItemUri.replace('_api/Web', '_api/sp.appcontextsite(@target)/web');
-
- var listItemAllFieldsEndpoint = String.format(fileListItemUri + "?@target='{1}'",
- appWebUrl, hostWebUrl);
-
-
- return $.ajax({
- url: listItemAllFieldsEndpoint,
- type: "GET",
- headers: { "accept": "application/json;odata=verbose" }
- });
- }
-
-
- function updateListItem(itemMetadata)
- {
-
-
-
- var listItemUri = itemMetadata.uri.replace('_api/Web', '_api/sp.appcontextsite(@target)/web');
- var listItemEndpoint = String.format(listItemUri + "?@target='{0}'", hostWebUrl);
-
-
-
-
-
- var body = String.format("{{'__metadata':{{'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}",
- itemMetadata.type, newName, newName);
-
-
-
- return $.ajax({
- url: listItemEndpoint,
- type: "POST",
- data: body,
- headers: {
- "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
- "content-type": "application/json;odata=verbose",
- "content-length": body.length,
- "IF-MATCH": itemMetadata.etag,
- "X-HTTP-Method": "MERGE"
- }
- });
- }
- }
-
-
- function onError(error)
- {
- alert(error.responseText);
- }
-
-
-
- function getQueryStringParameter(paramToRetrieve)
- {
- var params = document.URL.split("?")[1].split("&");
- for (var i = 0; i < params.length; i = i + 1) {
- var singleParam = params[i].split("=");
- if (singleParam[0] == paramToRetrieve) return singleParam[1];
- }
- }
Publish
Publish the App and click the Trust it Button.
Output
File uploaded successfully in Document Library.
Reference: MSDN
I hope you liked this article.