Upload File using SharePoint API

<script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript"> var CannonFodder = CannonFodder || {}; CannonFodder.Utilities = function() { var currentDlg; var saveAttachment = function() { if (!validated()) { jQuery('#lblResult').text("Please choose a file!"); return; } var dlgTitle; var dlgMsg; var dlgWidth; var dlgHeight; dlgTitle = "Uploading Your File..."; dlgMsg = "<br />Please wait whilst your file is being uploaded<br /><br />Please do not close your browser window."; dlgHeight = 300; dlgWidth = 500; if (currentDlg == null) { currentDlg = SP.UI.ModalDialog.showWaitScreenWithNoClose(dlgTitle, dlgMsg, dlgHeight, dlgWidth); } var file = jQuery("#AttachmentUploadField")[0].files[0]; //Upload the file uploadFile(file); }; var validated = function() { var file = jQuery("#AttachmentUploadField")[0].files[0]; if (file == null) { return false; } else { return true; } }; var uploadFile = function(file) { proposalSiteUrl = 'http://(SITEURL)/'; if (proposalSiteUrl == _spPageContextInfo.webAbsoluteUrl) { uploadFileLocal(file); } else { uploadFileCrossSite(file, proposalSiteUrl); } }; var uploadFileLocal = function(file) { var digest = jQuery("#__REQUESTDIGEST").val(); var webUrl = _spPageContextInfo.webAbsoluteUrl; var libraryName = "(DOCUMENT LIBRARY NAME)"; var reader = new FileReader(); var arrayBuffer; reader.onload = function(e) { arrayBuffer = reader.result; url = webUrl + "/_api/web/lists/getByTitle(@TargetLibrary)/RootFolder/files/add(url=@TargetFileName,overwrite='true')?" + "@TargetLibrary='" + libraryName + "'" + "&@TargetFileName='" + file.name + "'"; jQuery.ajax({ url: url, type: "POST", data: arrayBuffer, headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": digest }, contentType: "application/json;odata=verbose", processData: false, success: function() { jQuery('#lblResult').text("Successfully uploaded file."); if (currentDlg != null) { currentDlg.close(); } var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('(DOCUMENT LIBRARY NAME)')/items?$orderby=Id desc&$top=1"; var requestHeaders = { "accept": "application/json;odata=verbose" } $.ajax({ url: requestUri, type: 'GET', dataType: 'json', headers: requestHeaders, success: function(data) { var id = data.d.results[0].ID; window.location.href = 'http://(SITEURL)/(DOCUMENT LIBRARY NAME)/Forms/EditForm.aspx?ID=' + id + ''; }, error: function ajaxError(response) { alert(response.status + ' ' + response.statusText); } }); }, error: function(arr, error) { jQuery('#lblResult').text("Error uploading file."); if (currentDlg != null) { currentDlg.close(); } } }); }; reader.readAsArrayBuffer(file); }; $("#lblResult").change(function(e) { var el = document.getElementById('result'); var text = (el.innerText || el.textContent); if (text == 'Successfully uploaded file.') { var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('(DOCUMENT LIBRARY NAME)')/items?$select=EncodedAbsUrl&$orderby=Id desc&$top=10"; var requestHeaders = { "accept": "application/json;odata=verbose" } $.ajax({ url: requestUri, type: 'GET', dataType: 'json', headers: requestHeaders, success: function(data) { $.each(data.d.results, function(i, result) { var path = result.EncodedAbsUrl; }); }, error: function ajaxError(response) { alert(response.status + ' ' + response.statusText); } }); } }); var uploadFileCrossSite = function(file, webUrl) { url = webUrl + "/_api/contextinfo"; jQuery.ajax({ url: url, type: "POST", headers: { "Accept": "application/json; odata=verbose" }, contentType: "application/json;odata=verbose", success: function(data) { var digest = data.d.GetContextWebInformation.FormDigestValue; var libraryName = "(DOCUMENT LIBRARY NAME)"; var reader = new FileReader(); var arrayBuffer; reader.onload = function(e) { arrayBuffer = reader.result; url = webUrl + "/_api/web/lists/getByTitle(@TargetLibrary)/RootFolder/files/add(url=@TargetFileName,overwrite='true')?" + "@TargetLibrary='" + libraryName + "'" + "&@TargetFileName='" + file.name + "'"; jQuery.ajax({ url: url, type: "POST", data: arrayBuffer, headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": digest }, contentType: "application/json;odata=verbose", processData: false, success: function() { jQuery('#lblResult').text("Successfully uploaded file to different site."); if (currentDlg != null) { currentDlg.close(); } }, error: function() { jQuery('#lblResult').text("Error uploading file to different site."); if (currentDlg != null) { currentDlg.close(); } } }); }; reader.readAsArrayBuffer(file); }, error: function() { jQuery('#lblResult').text("Error accessing other site."); if (currentDlg != null) { currentDlg.close(); } } }); }; return { SaveAttachment: saveAttachment }; }(); </script> <style type="text/css"> .dropdown { width: 870px; margin-top: 10px; } .button { color: #fff; background-color: #6496c8; border: none; border-radius: 10px; box-shadow: 0 5px #27496d; } .button:hover { background-color: #417cb8 } .button:active { background-color: #417cb8; box-shadow: 0 1px #27496d; transform: translateY(5px); } .div { padding-top: 10px; } .label { font-size: 1.2rem; } .result { font-size: 1.0rem; } } </style> <div class="div"> <input id="AttachmentUploadField" type="file" size="98" /> <input id="AttachAttachmentButton" class="button" onclick="CannonFodder.Utilities.SaveAttachment();" type="button" value="Upload"/> </div> <div class="div"> <label id="lblResult" class="result"></label> </div>
Outline for creating page to upload documents to a document library.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.