SharePoint 2013 Hosting – HostForLIFE.eu :: Upload Large File As Chunks In SharePoint Online Using Angular

This article will help you upload the large files in the SharePoint online library into smaller chunks. This article is based on the article, Programmatically Uploading Large Files In SharePoint Online, with some enhancement.

It will walk through step-by-step how to upload the file in SharePoint Online.

Step 1

Create a library in Sharepoint online, eg. Name it Test_ABC.

Step 2

Install Node.js from here

Step 3

Create an Angular project(LargeFileUpload) using AngularCLI

Step 4

Create a proxy setting for Angular with Sharepoint online using my blog Proxy With Angular 6+ And SharePoint Environment.

Step 5

Create a FileUpload Component using the below Command

ng g c FileUpload

1	ng g c FileUpload

Step 6

Create a FileUpload and GlobalServices services using the following commandL

ng g s services/FileUpload  
ng g s services/GlobalService

1 2	ng g s services/FileUpload ng g s services/GlobalService

ng g s services/FileUpload  
ng g s services/GlobalService

1 2	ng g s services/FileUpload ng g s services/GlobalService

GlobalServices.ts

export class GlobalServiceService {  
  constructor() { }  
  public sharePointPageObject = {  
    webAbsoluteUrl: '',  
    webRelativeUrl : '',  
    userId: 0  
  };  
}

export class GlobalServiceService {

constructor() { }

public sharePointPageObject = {

webAbsoluteUrl: '',

webRelativeUrl : '',

userId: 0

};

}

app.component.ts

import { Component } from '@angular/core';  
import { GlobalServiceService } from './services/global-service.service';  
declare const _spPageContextInfo;  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  constructor(  
    private globalService: GlobalServiceService  
  ) { }  
  ngOnInit() {  
    this.globalService.sharePointPageObject.webAbsoluteUrl = window.location.href.indexOf('localhost') > -1 ? '/Your sitecollection'  
      : _spPageContextInfo.webAbsoluteUrl;  
    this.globalService.sharePointPageObject.webRelativeUrl = window.location.href.indexOf('localhost') > -1 ? '/Your sitecollection'  
      : _spPageContextInfo.webRelativeUrl;  
    this.globalService.sharePointPageObject.userId = window.location.href.indexOf('localhost') > -1 ? 22 : _spPageContextInfo.userId;  
  }  
}

import { Component } from '@angular/core';

import { GlobalServiceService } from './services/global-service.service';

declare const _spPageContextInfo;

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor(

private globalService: GlobalServiceService

) { }

ngOnInit() {

this.globalService.sharePointPageObject.webAbsoluteUrl = window.location.href.indexOf('localhost') > -1 ? '/Your sitecollection'

: _spPageContextInfo.webAbsoluteUrl;

this.globalService.sharePointPageObject.webRelativeUrl = window.location.href.indexOf('localhost') > -1 ? '/Your sitecollection'

: _spPageContextInfo.webRelativeUrl;

this.globalService.sharePointPageObject.userId = window.location.href.indexOf('localhost') > -1 ? 22 : _spPageContextInfo.userId;

}

Once the template for file upload is created, then update the file-upload.component.html

File Upload: <input placeholder=“Upload File” type=“file” (change)=“largeFileUpload($event)”>

Then file-upload.component.ts as:

import { Component, OnInit } from '@angular/core';  
import { FileUploadService } from '../services/file-upload.service';  
  
@Component({  
  selector: 'app-file-upload',  
  templateUrl: './file-upload.component.html',  
  styleUrls: ['./file-upload.component.css']  
})  
export class FileUploadComponent implements OnInit {  
  
  constructor(  
    private fileUploadService: FileUploadService  
  ) { }  
  
  ngOnInit() {  
  }  
  largeFileUpload(event: any) {  
    let fileList: FileList = event.target.files;  
    if (fileList.length != 0) {  
      this.fileUploadService.fileUpload(fileList[0], "Test_ABC", fileList[0].name).then(addFileToFolder => {  
        console.log("Large File Uploaded Successfully");  
      }).catch(error => {  
        console.log("Error while uploading" + error);  
      });  
    }  
  }  
}

import { Component, OnInit } from '@angular/core';

import { FileUploadService } from '../services/file-upload.service';

@Component({

selector: 'app-file-upload',

templateUrl: './file-upload.component.html',

styleUrls: ['./file-upload.component.css']

})

export class FileUploadComponent implements OnInit {

constructor(

private fileUploadService: FileUploadService

) { }

ngOnInit() {

}

largeFileUpload(event: any) {

let fileList: FileList = event.target.files;

if (fileList.length != 0) {

this.fileUploadService.fileUpload(fileList[0], "Test_ABC", fileList[0].name).then(addFileToFolder => {

console.log("Large File Uploaded Successfully");

}).catch(error => {

console.log("Error while uploading" + error);

});

}

file-upload.services.ts

import { Injectable } from '@angular/core';  
import { GlobalServiceService } from './global-service.service';  
import { HttpClient, HttpErrorResponse } from '@angular/common/http';  
declare const $: any;  
@Injectable({  
  providedIn: 'root'  
})  
export class FileUploadService {  
  
  constructor(  
    private globalService: GlobalServiceService,  
    private httpClient: HttpClient  
  ) { }  
  public siteUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl;  
  public siteRelativeUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl != "/" ? this.globalService.sharePointPageObject.webAbsoluteUrl : "";  
  public fileUpload(file: any, documentLibrary: string, fileName: string) {  
    return new Promise((resolve, reject) => {  
      this.createDummyFile(fileName, documentLibrary).then(result => {  
        let fr = new FileReader();  
        let offset = 0;  
        // the total file size in bytes...    
        let total = file.size;  
        // 1MB Chunks as represented in bytes (if the file is less than a MB, seperate it into two chunks of 80% and 20% the size)...    
        let length = 1000000 > total ? Math.round(total * 0.8) : 1000000  
        let chunks = [];  
        //reads in the file using the fileReader HTML5 API (as an ArrayBuffer) - readAsBinaryString is not available in IE!    
        fr.readAsArrayBuffer(file);  
        fr.onload = (evt: any) => {  
          while (offset < total) {  
            //if we are dealing with the final chunk, we need to know...    
            if (offset + length > total) {  
              length = total - offset;  
            }  
            //work out the chunks that need to be processed and the associated REST method (start, continue or finish)    
            chunks.push({  
              offset,  
              length,  
              method: this.getUploadMethod(offset, length, total)  
            });  
            offset += length;  
          }  
          //each chunk is worth a percentage of the total size of the file...    
           const chunkPercentage = (total / chunks.length) / total * 100;  
          console.log("Chunk Percentage: "+chunkPercentage);  
          if (chunks.length > 0) {  
            //the unique guid identifier to be used throughout the upload session    
            const id = this.generateGUID();  
            //Start the upload - send the data to S    
            this.uploadFile(evt.target.result, id, documentLibrary, fileName, chunks, 0, 0, chunkPercentage, resolve, reject);  
          }  
        };  
      })  
    });  
  }  
  
  createDummyFile(fileName, libraryName) {  
    return new Promise((resolve, reject) => {  
      // Construct the endpoint - The GetList method is available for SharePoint Online only.    
      var serverRelativeUrlToFolder = "decodedurl='" + this.siteRelativeUrl + "/" + libraryName + "'";  
      var endpoint = this.siteUrl + "/_api/Web/GetFolderByServerRelativePath(" + serverRelativeUrlToFolder + ")/files" + "/add(overwrite=true, url='" + fileName + "')"  
      const headers = {  
        "accept": "application/json;odata=verbose"  
      };  
      this.executePost(endpoint, this.convertDataBinaryString(2), headers).then(file => resolve(true)).catch(err => reject(err));  
    });  
  }  
  // Base64 - this method converts the blob arrayBuffer into a binary string to send in the REST request    
  convertDataBinaryString(data) {  
    let fileData = '';  
    let byteArray = new Uint8Array(data);  
    for (var i = 0; i < byteArray.byteLength; i++) {  
      fileData += String.fromCharCode(byteArray[i]);  
    }  
    return fileData;  
  }  
  //this method sets up the REST request and then sends the chunk of file along with the unique indentifier (uploadId)    
  uploadFileChunk(id, libraryPath, fileName, chunk, data, byteOffset) {  
    return new Promise((resolve, reject) => {  
      let offset = chunk.offset === 0 ? '' : ',fileOffset=' + chunk.offset;  
      //parameterising the components of this endpoint avoids the max url length problem in SP (Querystring parameters are not included in this length)    
      let endpoint = this.siteUrl + "/_api/web/getfilebyserverrelativeurl('" + this.siteRelativeUrl + "/" + libraryPath + "/" + fileName + "')/" + chunk.method + "(uploadId=guid'" + id + "'" + offset + ")";  
      const headers = {  
        "Accept": "application/json; odata=verbose",  
        "Content-Type": "application/octet-stream"  
      };  
      this.executePost(endpoint, data, headers).then(offset => resolve(offset)).catch(err => reject(err));  
    });  
  }  
  //the primary method that resursively calls to get the chunks and upload them to the library (to make the complete file)    
  uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject) {  
    //we slice the file blob into the chunk we need to send in this request (byteOffset tells us the start position)    
    const data = this.convertFileToBlobChunks(result, chunks[index]);  
    //upload the chunk to the server using REST, using the unique upload guid as the identifier    
    this.uploadFileChunk(id, libraryPath, fileName, chunks[index], data, byteOffset).then(value => {  
      const isFinished = index === chunks.length - 1;  
      index += 1;  
      const percentageComplete = isFinished ? 100 : Math.round((index * chunkPercentage));  
      console.log("Percentage Completed:" +percentageComplete)  
      //More chunks to process before the file is finished, continue    
      if (index < chunks.length) {  
        this.uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject);  
      } else {  
        resolve(value);  
      }  
    }).catch(err => {  
      console.log('Error in uploadFileChunk! ' + err);  
      reject(err);  
    });  
  }  
  //Helper method - depending on what chunk of data we are dealing with, we need to use the correct REST method...    
  getUploadMethod(offset, length, total) {  
    if (offset + length + 1 > total) {  
      return 'finishupload';  
    } else if (offset === 0) {  
      return 'startupload';  
    } else if (offset < total) {  
      return 'continueupload';  
    }  
    return null;  
  }  
  //this method slices the blob array buffer to the appropriate chunk and then calls off to get the BinaryString of that chunk    
  convertFileToBlobChunks(result, chunkInfo) {  
    return result.slice(chunkInfo.offset, chunkInfo.offset + chunkInfo.length);  
  }  
  generateGUID() {  
    function s4() {  
      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);  
    }  
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();  
  }  
  async executePost(url, data, requestHeaders) {  
    const res = await this.httpClient.post(url, data, requestHeaders).toPromise().catch((err: HttpErrorResponse) => {  
      const error = err.error;  
      return error;  
    });  
    return this.parseRetSingle(res);  
  }  
  parseRetSingle(res) {  
    if (res) {  
      if (res.hasOwnProperty('d')) {  
        return res.d;  
      } else if (res.hasOwnProperty('error')) {  
        const obj: any = res.error;  
        obj.hasError = true;  
        return obj;  
      } else {  
        return {  
          hasError: true,  
          comments: res  
        };  
      }  
    } else {  
      return {  
        hasError: true,  
        comments: 'Check the response in network trace'  
      };  
    }  
  }  
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

import { Injectable } from '@angular/core';

import { GlobalServiceService } from './global-service.service';

import { HttpClient, HttpErrorResponse } from '@angular/common/http';

declare const $: any;

@Injectable({

providedIn: 'root'

})

export class FileUploadService {

constructor(

private globalService: GlobalServiceService,

private httpClient: HttpClient

) { }

public siteUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl;

public siteRelativeUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl != "/" ? this.globalService.sharePointPageObject.webAbsoluteUrl : "";

public fileUpload(file: any, documentLibrary: string, fileName: string) {

return new Promise((resolve, reject) => {

this.createDummyFile(fileName, documentLibrary).then(result => {

let fr = new FileReader();

let offset = 0;

// the total file size in bytes...

let total = file.size;

// 1MB Chunks as represented in bytes (if the file is less than a MB, seperate it into two chunks of 80% and 20% the size)...

let length = 1000000 > total ? Math.round(total * 0.8) : 1000000

let chunks = [];

//reads in the file using the fileReader HTML5 API (as an ArrayBuffer) - readAsBinaryString is not available in IE!

fr.readAsArrayBuffer(file);

fr.onload = (evt: any) => {

while (offset < total) {

//if we are dealing with the final chunk, we need to know...

if (offset + length > total) {

length = total - offset;

}

//work out the chunks that need to be processed and the associated REST method (start, continue or finish)

chunks.push({

offset,

length,

method: this.getUploadMethod(offset, length, total)

});

offset += length;

}

//each chunk is worth a percentage of the total size of the file...

const chunkPercentage = (total / chunks.length) / total * 100;

console.log("Chunk Percentage: "+chunkPercentage);

if (chunks.length > 0) {

//the unique guid identifier to be used throughout the upload session

const id = this.generateGUID();

//Start the upload - send the data to S

this.uploadFile(evt.target.result, id, documentLibrary, fileName, chunks, 0, 0, chunkPercentage, resolve, reject);

}

};

})

});

}

createDummyFile(fileName, libraryName) {

return new Promise((resolve, reject) => {

// Construct the endpoint - The GetList method is available for SharePoint Online only.

var serverRelativeUrlToFolder = "decodedurl='" + this.siteRelativeUrl + "/" + libraryName + "'";

var endpoint = this.siteUrl + "/_api/Web/GetFolderByServerRelativePath(" + serverRelativeUrlToFolder + ")/files" + "/add(overwrite=true, url='" + fileName + "')"

const headers = {

"accept": "application/json;odata=verbose"

};

this.executePost(endpoint, this.convertDataBinaryString(2), headers).then(file => resolve(true)).catch(err => reject(err));

});

}

// Base64 - this method converts the blob arrayBuffer into a binary string to send in the REST request

convertDataBinaryString(data) {

let fileData = '';

let byteArray = new Uint8Array(data);

for (var i = 0; i < byteArray.byteLength; i++) {

fileData += String.fromCharCode(byteArray[i]);

}

return fileData;

}

//this method sets up the REST request and then sends the chunk of file along with the unique indentifier (uploadId)

uploadFileChunk(id, libraryPath, fileName, chunk, data, byteOffset) {

return new Promise((resolve, reject) => {

let offset = chunk.offset === 0 ? '' : ',fileOffset=' + chunk.offset;

//parameterising the components of this endpoint avoids the max url length problem in SP (Querystring parameters are not included in this length)

let endpoint = this.siteUrl + "/_api/web/getfilebyserverrelativeurl('" + this.siteRelativeUrl + "/" + libraryPath + "/" + fileName + "')/" + chunk.method + "(uploadId=guid'" + id + "'" + offset + ")";

const headers = {

"Accept": "application/json; odata=verbose",

"Content-Type": "application/octet-stream"

};

this.executePost(endpoint, data, headers).then(offset => resolve(offset)).catch(err => reject(err));

});

}

//the primary method that resursively calls to get the chunks and upload them to the library (to make the complete file)

uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject) {

//we slice the file blob into the chunk we need to send in this request (byteOffset tells us the start position)

const data = this.convertFileToBlobChunks(result, chunks[index]);

//upload the chunk to the server using REST, using the unique upload guid as the identifier

this.uploadFileChunk(id, libraryPath, fileName, chunks[index], data, byteOffset).then(value => {

const isFinished = index === chunks.length - 1;

index += 1;

const percentageComplete = isFinished ? 100 : Math.round((index * chunkPercentage));

console.log("Percentage Completed:" +percentageComplete)

//More chunks to process before the file is finished, continue

if (index < chunks.length) {

this.uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject);

} else {

resolve(value);

}

}).catch(err => {

console.log('Error in uploadFileChunk! ' + err);

reject(err);

});

}

//Helper method - depending on what chunk of data we are dealing with, we need to use the correct REST method...

getUploadMethod(offset, length, total) {

if (offset + length + 1 > total) {

return 'finishupload';

} else if (offset === 0) {

return 'startupload';

} else if (offset < total) {

return 'continueupload';

}

return null;

}

//this method slices the blob array buffer to the appropriate chunk and then calls off to get the BinaryString of that chunk

convertFileToBlobChunks(result, chunkInfo) {

return result.slice(chunkInfo.offset, chunkInfo.offset + chunkInfo.length);

}

generateGUID() {

function s4() {

return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);

}

return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();

}

async executePost(url, data, requestHeaders) {

const res = await this.httpClient.post(url, data, requestHeaders).toPromise().catch((err: HttpErrorResponse) => {

const error = err.error;

return error;

});

return this.parseRetSingle(res);

}

parseRetSingle(res) {

if (res) {

if (res.hasOwnProperty('d')) {

return res.d;

} else if (res.hasOwnProperty('error')) {

const obj: any = res.error;

obj.hasError = true;

return obj;

} else {

return {

hasError: true,

comments: res

};

}

} else {

return {

hasError: true,

comments: 'Check the response in network trace'

};

}

Finally, run the code using the command:

npm run start

1	npm run start

Now, your requests will be served at http://localhost:4200/.

SharePoint 2013 Hosting – HostForLIFE.eu :: Upload Large File As Chunks In SharePoint Online Using Angular

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: Upload Large File As Chunks In SharePoint Online Using Angular

BLOGROLL

Featured On

Tags