Hochladen einer Datei mit shrepoint gehosteten App mit REST API

Question

Ich erhalte Fehler wie die Website nicht in gehosteten Sharepoint-App zugegriffen werden kann. ist es passiert, wenn ich die von einer Seite auf eine andere Seite in der gleichen App verschiebe. Bitte helfen Sie mir im Voraus

es ist Default.aspx Code

<script> 

     'use strict'; 

var appWebUrl, hostWebUrl; 

jQuery(document).ready(function() { 

    // Check for FileReader API (HTML5) support. 
    if (!window.FileReader) { 
     alert('This browser does not support the FileReader API.'); 
    } 

    // Get the add-in web and host web URLs. 
    appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl")); 
    hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl")); 
}); 

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]; 
    } 
} 

    function F1() 
    { 
    window.location.href=sphosturl+'pages/uploadform.aspx'; 

    } 



    </script> 


    <div> 
    <input type='button' value='clickheretoUploadfile' onclick='F1()'/> 

    </div> 

when the user is clicked on clickhere button is redirecting to uploadform.aspx 

es ist uploadform.aspx Code

<script> 

    'use strict'; 

    jQuery(document).ready(function() { 

     // Check for FileReader API (HTML5) support. 
     if (!window.FileReader) { 
      alert('This browser does not support the FileReader API.'); 
     } 
    }); 

    // Upload the file. 
    // You can upload files up to 2 GB with the REST API. 
    function uploadFile() { 

     // Define the folder path for this example. 
     var serverRelativeUrlToFolder = '/shared documents'; 

     // Get test values from the file input and text input page controls. 
     var fileInput = jQuery('#getFile'); 
     var newName = jQuery('#displayName').val(); 

     // Get the server URL. 
     var serverUrl = _spPageContextInfo.webAbsoluteUrl; 

     // Initiate method calls using jQuery promises. 
     // Get the local file as an array buffer. 
     var getFile = getFileBuffer(); 
     getFile.done(function (arrayBuffer) { 

      // Add the file to the SharePoint folder. 
      var addFile = addFileToFolder(arrayBuffer); 
      addFile.done(function (file, status, xhr) { 

       // Get the list item that corresponds to the uploaded file. 
       var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri); 
       getItem.done(function (listItem, status, xhr) { 

        // Change the display name and title of the list item. 
        var changeItem = updateListItem(listItem.d.__metadata); 
        changeItem.done(function (data, status, xhr) { 
         alert('file uploaded and updated'); 
        }); 
        changeItem.fail(onError); 
       }); 
       getItem.fail(onError); 
      }); 
      addFile.fail(onError); 
     }); 
     getFile.fail(onError); 

     // Get the local file as an array buffer. 
     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(); 
     } 

     // Add the file to the file collection in the Shared Documents folder. 
     function addFileToFolder(arrayBuffer) { 

      // Get the file name from the file input control on the page. 
      var parts = fileInput[0].value.split('\\'); 
      var fileName = parts[parts.length - 1]; 

      // Construct the endpoint. 
      var fileCollectionEndpoint = String.format(
        "{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" + 
        "/add(overwrite=true, url='{2}')", 
        serverUrl, serverRelativeUrlToFolder, fileName); 

      // Send the request and return the response. 
      // This call returns the SharePoint file. 
      return jQuery.ajax({ 
       url: fileCollectionEndpoint, 
       type: "POST", 
       data: arrayBuffer, 
       processData: false, 
       headers: { 
        "accept": "application/json;odata=verbose", 
        "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(), 
        "content-length": arrayBuffer.byteLength 
       } 
      }); 
     } 

     // Get the list item that corresponds to the file by calling the file's ListItemAllFields property. 
     function getListItem(fileListItemUri) { 

      // Send the request and return the response. 
      return jQuery.ajax({ 
       url: fileListItemUri, 
       type: "GET", 
       headers: { "accept": "application/json;odata=verbose" } 
      }); 
     } 

     // Change the display name and title of the list item. 
     function updateListItem(itemMetadata) { 

      // Define the list item changes. Use the FileLeafRef property to change the display name. 
      // For simplicity, also use the name as the title. 
      // The example gets the list item type from the item's metadata, but you can also get it from the 
      // ListItemEntityTypeFullName property of the list. 
      var body = String.format("{{'__metadata':{{'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}", 
       itemMetadata.type, newName, newName); 

      // Send the request and return the promise. 
      // This call does not return response content from the server. 
      return jQuery.ajax({ 
       url: itemMetadata.uri, 
       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" 
       } 
      }); 
     } 
    } 

    // Display error messages. 
    function onError(error) { 
     alert(error.responseText); 
    } 

    <script> 

    <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()"> 

das Problem ist, wenn ich die Upload-Funktionalität in der default.aspx Seite durchführen es funktioniert gut.aber ich Umleitung von dieser Seite, um Seite hochzuladen und die Upload-Funktionalität durchzuführen, ist es der Fehler

Answer 1

Die erste Frage ist, wo ist Ihre "Sphsturl" p Parameter in der Default.aspx-Code? Ich denke, es ist die "AppWebUrl".

Aus Ihrem Code scheint es, dass Sie Ihr von SharePoint gehostetes Add-In zum Hochladen von Dateien in das Add-In-Web verwenden möchten. Sie müssen also bestätigen, ob in Ihrer App ein Ordner für die Dokumentenbibliothek vorhanden ist. serverRelativeUrlToFolder "Parameter. Andernfalls wird der Fehler Zugriff verweigert angezeigt. Getestet Code unten ist für Ihre Referenz (ich habe die Dokumente Bibliothek in meiner Anwendung hinzufügen):

'use strict'; 

jQuery(document).ready(function() { 

// Check for FileReader API (HTML5) support. 
    if (!window.FileReader) { 
    alert('This browser does not support the FileReader API.'); 
    } 
}); 

// Upload the file. 
// You can upload files up to 2 GB with the REST API. 
function uploadFile() { 

    // Define the folder path for this example. 
    var serverRelativeUrlToFolder = 'Lists/DL'; 

    // Get test values from the file input and text input page controls. 
    var fileInput = jQuery('#getFile'); 
    var newName = jQuery('#displayName').val(); 

    // Get the server URL. 
    var serverUrl = _spPageContextInfo.webAbsoluteUrl; 

    // Initiate method calls using jQuery promises. 
    // Get the local file as an array buffer. 
    var getFile = getFileBuffer(); 
    getFile.done(function (arrayBuffer) { 

    // Add the file to the SharePoint folder. 
    var addFile = addFileToFolder(arrayBuffer); 
    addFile.done(function (file, status, xhr) { 

     // Get the list item that corresponds to the uploaded file. 
     var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri); 
     getItem.done(function (listItem, status, xhr) { 

      // Change the display name and title of the list item. 
      var changeItem = updateListItem(listItem.d.__metadata); 
      changeItem.done(function (data, status, xhr) { 
       alert('file uploaded and updated'); 
      }); 
      changeItem.fail(onError); 
     }); 
     getItem.fail(onError); 
    }); 
    addFile.fail(onError); 
}); 
getFile.fail(onError); 

// Get the local file as an array buffer. 
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(); 
} 

// Add the file to the file collection in the Shared Documents folder. 
function addFileToFolder(arrayBuffer) { 

    // Get the file name from the file input control on the page. 
    var parts = fileInput[0].value.split('\\'); 
    var fileName = parts[parts.length - 1]; 

    // Construct the endpoint. 
    var fileCollectionEndpoint = String.format(
      "{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" + 
      "/add(overwrite=true, url='{2}')", 
      serverUrl, serverRelativeUrlToFolder, fileName); 

    // Send the request and return the response. 
    // This call returns the SharePoint file. 
    return jQuery.ajax({ 
     url: fileCollectionEndpoint, 
     type: "POST", 
     data: arrayBuffer, 
     processData: false, 
     headers: { 
      "accept": "application/json;odata=verbose", 
      "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(), 
      "content-length": arrayBuffer.byteLength 
     } 
    }); 
} 

// Get the list item that corresponds to the file by calling the file's ListItemAllFields property. 
function getListItem(fileListItemUri) { 

    // Send the request and return the response. 
    return jQuery.ajax({ 
     url: fileListItemUri, 
     type: "GET", 
     headers: { "accept": "application/json;odata=verbose" } 
    }); 
} 

// Change the display name and title of the list item. 
function updateListItem(itemMetadata) { 

    // Define the list item changes. Use the FileLeafRef property to change the display name. 
    // For simplicity, also use the name as the title. 
    // The example gets the list item type from the item's metadata, but you can also get it from the 
    // ListItemEntityTypeFullName property of the list. 
    var body = String.format("{{'__metadata':{{'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}", 
     itemMetadata.type, newName, newName); 

    // Send the request and return the promise. 
    // This call does not return response content from the server. 
    return jQuery.ajax({ 
     url: itemMetadata.uri, 
     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" 
     } 
    }); 
    } 
} 

// Display error messages. 
function onError(error) { 
    alert(error.responseText); 
}