Caricare file nelle raccolte documenti

Completato

Finora in questo modulo si è appreso come usare il contenuto nei componenti SharePoint Framework e come usare i dati negli elenchi di SharePoint. In questa lezione si apprenderà come usare l'API SharePoint Framework per aggiungere file alle raccolte documenti di SharePoint.

Differenze tra le raccolte documenti e gli elenchi di SharePoint

In un'unità precedente di questo modulo hai imparato come leggere e scrivere negli elenchi di SharePoint con SharePoint Framework usando l'API REST di SharePoint. L'uso delle raccolte documenti è simile all'uso degli elenchi, ma esistono alcune differenze.

Una raccolta documenti di SharePoint è simile a un elenco di SharePoint, ad eccezione del fatto che mostra il contenuto come file anziché come elenco di elementi.

Quando si usa un'API REST di SharePoint, la maggior parte delle informazioni acquisite durante l'uso degli elenchi si applica alle raccolte. Ad esempio, usa le chiamate HTTP GET per recuperare informazioni e le chiamate HTTP POST, PUT, MERGE e DELETE per apportare modifiche al contenuto.

Una differenza rispetto agli elenchi è che è necessario includere la cartella in cui il file è o verrà caricato. È anche necessario usare l’endpoint Files. Infine, la fine dell'endpoint indica all'API REST cosa stai tentando di fare.

Ad esempio, l'URL seguente caricherà un file nella cartella radice della raccolta Documenti. Questo file è denominato sample.png e sovrascriverà un file esistente con lo stesso nome: https://contoso.microsoft.com/sites/testSite/_api/web/lists/GetByTitle('Documents')/RootFolder/Files/add(overwrite=true,url='sample.png').

Gli sviluppatori hanno due opzioni per caricare i file nelle raccolte di SharePoint. Un'opzione, come illustrato in precedenza, usa l'API REST di SharePoint.

Aggiungere file usando l'API REST di SharePoint

Gli sviluppatori possono usare l'API REST di SharePoint per caricare un file in una raccolta di SharePoint usando l'API SharePoint Framework. Per caricare un file, è necessario specificare l'endpoint in cui si vuole caricarlo. Si supponga, ad esempio, di voler caricare un file nella cartella radice della raccolta documenti nel sito di SharePoint testSite .

A tale scopo, è possibile usare l'endpoint elencato in precedenza, ma è necessario personalizzare la richiesta per fornire il contenuto del file. Per impostazione predefinita, l'API di SharePoint Framework imposterà tutte le proprietà comuni necessarie per eseguire correttamente una chiamata all'API REST di SharePoint usando SPHttpClient.configurations.v1. Gli sviluppatori possono iniziare con questo e quindi eseguire sovrascrivere alcune delle proprietà.

Per eseguire l'override delle proprietà, creare un altro oggetto richiesta per eseguire l'override di due parti nella richiesta. In particolare, imposta l'intestazione content-length sul valore stringa della lunghezza del contenuto da inviare all'API REST e imposta il corpo della richiesta sul contenuto del file:

const fileData = /* */;
const options: ISPHttpClientOptions = {
  headers: { 'CONTENT-LENGTH': fileData.byteLength.toString() },
  body: fileData
};

Infine, usa l'endpoint, la configurazione predefinita e questo nuovo oggetto richiesta quando si chiama l'API REST di SharePoint di SharePoint Framework:

const response = await this.context.spHttpClient.post(endpoint, SPHttpClient.configurations.v1, options);

if (response.status === 200) {
  alert('File uploaded successfully');
} else {
  throw new Error(`Error uploading file: ${response.statusText}`);
}

Aggiungere file usando Microsoft Graph

Un altro modo per caricare i file nelle raccolte di SharePoint consiste nell'usare il supporto di Microsoft Graph incluso nell’SDK di SharePoint Framework.

Per caricare un file usando Microsoft Graph, è necessario specificare l'endpoint in cui caricare il file. Ad esempio, supponendo di voler caricare un file nello stesso URL elencato in precedenza, l'endpoint di Microsoft Graph sarà: https://graph.microsoft.com/v1/sites/{{SITE_ID}}/drive/root:/sample.png:/content.

Supponendo di aver letto il file in memoria, usare il codice seguente per caricare il file usando l'API SharePoint Framework per Microsoft Graph:

const fileData = /* */;
const endpoint = `sites/{{SITE_ID}}/drive/root:/sample.png:/content`
const graphClient = await this.context.msGraphClientFactory.getClient();
const response = await graphClient.api(endpoint).put(fileData);

Riepilogo

In questa unità hai imparato come usare l'API di SharePoint Framework per aggiungere file alle raccolte documenti di SharePoint.