Uploading Large Files to SharePoint Library From SPFx Web Part

Continue Upload Method

• The "Continue Upload" method in SharePoint's REST API allows for the upload of intermediate chunks of a file during a large file upload session.
• The API endpoint for continuing the upload is: "/_api/web/GetFileById('<fileId>')/ContinueUpload(uploadId=guid'<uploadId>',fileOffset=<start>)".
• This endpoint specifies the file being uploaded (fileId), the unique upload session ID (uploadId), and the starting byte position of the chunk (fileOffset).
• The "file Offset" parameter specifies the starting byte position of the chunk being uploaded in the overall file. It helps SharePoint understand where this chunk fits within the entire file.
• it indicates the position in the file where the current chunk starts.
• For example, if the first chunk is 1MB (1048576 bytes) in size, the file Offset for the second chunk would be 1048576, the third chunk would be 2097152, and so on.

  private async UploadIntermediateChunk(siteUrl: string, libraryName: string, fileName: string, chunk: any, uploadId: string, headers: any, start: any, fileId: string) {
      try {
        return await this.Retry(async () => {
          const response = await fetch(`${siteUrl}/_api/web/GetFileById('${fileId}')/ContinueUpload(uploadId=guid'${uploadId}',fileOffset=${start})`, {
            method: 'POST',
            headers: headers,
            body: chunk
          });
  
          if (!response.ok) {
            const errorText = await response.text();
            console.error('Failed to upload chunk:', errorText);
            throw new Error(`Failed to upload chunk: ${errorText}`);
          }
          return response.json();
        });
      } catch (error) {
        console.error('Failed to upload intermediate chunk after retries:', error);
        await this.CancelUpload(siteUrl, fileId, uploadId, headers);
        await this.DeleteFile(siteUrl, fileId, headers);
        throw error;
      }
    }

Finish Upload Method

• The "Finish Upload" method is used to upload the final chunk of a large file to a SharePoint library, signaling the end of the upload process.
• The method sends a POST request to the SharePoint API endpoint to finish the upload.
• API endpoint is: "/_api/web/GetFileById('<fileId>')/FinishUpload(uploadId=guid'<uploadId>',fileOffset=<start>)".

    private async UploadLastChunk(siteUrl: string, libraryName: string, fileName: string, chunk: any, uploadId: string, headers: any, start: any, fileId: string) {
      try {
        return await this.Retry(async () => {
          const response = await fetch(`${siteUrl}/_api/web/GetFileById('${fileId}')/FinishUpload(uploadId=guid'${uploadId}',fileOffset=${start})`, {
            method: 'POST',
            headers: headers,
            body: chunk
          });
  
          if (!response.ok) {
            const errorText = await response.text();
            console.error('Failed to upload chunk:', errorText);
            throw new Error(`Failed to upload chunk: ${errorText}`);
          }
  
          return response.json();
        });
      } catch (error) {
        console.error('Failed to upload last chunk after retries:', error);
        await this.CancelUpload(siteUrl, fileId, uploadId, headers);
        await this.DeleteFile(siteUrl, fileId, headers);
        throw error;
      }
    }

Retry Mechanism

• The Retry method implements a retry mechanism with exponential backoff to handle transient errors when making asynchronous requests.
• To attempt an asynchronous operation multiple times in case of failure, with increasing delays between each attempt. from this method, you have to pass the same parameters also like "fn", "retries", and "delay".
• fn: A function that returns a promise. This is the operation that may fail and needs to be retried.
• retries: The number of times to retry the operation (default is 3).
• delay: The initial delay in milliseconds before retrying (default is 1000ms or 1 second).
• If the attempt fails but retries are still available, a warning is logged to the console indicating the failure and the delay before the next attempt.
• retryAfter is calculated using exponential backoff (delay * Math.pow(2, attempt - 1)). This increases the delay exponentially with each failed attempt.
• The code waits for the calculated delay using setTimeout.
• This helps in scenarios where temporary issues may cause failures, giving the operation multiple chances to succeed before ultimately giving up after the specified retries. The exponential backoff strategy helps in reducing the load on the system by spacing out the retries progressively.

   private async Retry<T>(fn: () => Promise<T>, retries: number = 3, delay: number = 1000): Promise<T> {
      let attempt = 1;
      while (attempt <= retries) {
        try {
          return await fn();
        } catch (error) {
          if (attempt === retries) {
            throw error;
          }
          const retryAfter = delay * Math.pow(2, attempt - 1); // Exponential backoff
          console.warn(`Attempt ${attempt} failed. Retrying in ${retryAfter}ms...`);
          await new Promise(resolve => setTimeout(resolve, retryAfter));
          attempt++;
        }
      }
    }

Cancel Upload And Delete File

• The "Cancel Upload" method is used to cancel an ongoing large file upload session in SharePoint. This is typically done when an error occurs during the upload process, and you want to terminate the session to prevent incomplete or corrupted files from being saved.
• Sends a request to the SharePoint API to cancel the current upload session identified by uploadId.
• Utilizes the unique fileId and uploadId to specify which upload session to cancel.
• Helps in ensuring that partially uploaded files are not left in an inconsistent state.
• The "Delete File" method is used to delete a file from a SharePoint library. This is usually called after canceling an upload session to remove any partially uploaded files and clean up the SharePoint library.
• Sends a request to the SharePoint API to delete the file identified by file.
• Utilizes necessary headers for authentication.
• Ensures that any incomplete or unwanted file uploads are removed, maintaining the integrity of the document library.

   private async CancelUpload(siteUrl: string, fileId: string, uploadId: string, headers: any) {
      try {
        const response = await fetch(`${siteUrl}/_api/web/GetFileById('${fileId}')/CancelUpload(uploadId=guid'${uploadId}')`, {
          method: 'POST',
          headers: headers
        });
  
        if (!response.ok) {
          const errorText = await response.text();
          console.error('Failed to cancel upload session:', errorText);
          throw new Error(`Failed to cancel upload session: ${errorText}`);
        }
  
      } catch (error) {
        console.error('Error occurred while canceling upload session:', error);
      }
    };
    private async DeleteFile(siteUrl: string, fileId: string, headers: any) {
      try {
        const response = await fetch(`${siteUrl}/_api/web/GetFileById('${fileId}')`, {
          method: 'DELETE',
          headers: headers
        });
  
        if (!response.ok) {
          const errorText = await response.text();
          console.error('Failed to delete file:', errorText);
          throw new Error(`Failed to delete file: ${errorText}`);
        }
      } catch (error) {
        console.error('Error occurred while deleting file:', error);
      }
    }

Summary

This blog covers a method to upload large files to a SharePoint document library by dividing them into smaller chunks. The process involves.

• Chunked Uploads: Files are split into first, intermediate, and last chunks to be uploaded sequentially.
• Retry Mechanism: A retry strategy with exponential backoff handles transient errors, ensuring robust uploads.
• Error Handling: The system cancels and deletes incomplete uploads if errors occur, maintaining library integrity.
• Support Functions: Additional methods manage the cancellation and cleanup of uploads.

This method ensures efficient and reliable large file uploads to SharePoint.