Can't Upload Large Document to Sharepoint >4MB in React

[rdick]

Hello,

This issue was solved in issue #456 by @nikithauc for Node API but now I would like to figure out how to do this is in React.

I am trying to upload a file (> 4 MB) directly from React to SharePoint with the Microsoft Graph API. Here is my code below.

I keep getting the following error:

Please provide the Readable Stream content, name of the file and size of the file

• /src/tasks/FileUploadTask/FileObjectClasses/FileUpload.ts:28
• I think it is because I am uploading a file (instead of a readable stream) to - new FileUpload(file,name,size).

Can I turn a file to a readable stream in React?

Could you assist with this? If this not possible is the only other way from an API on the backend? How would I transfer my access code to the backend?

``

// Function 1 - GET UPLOADED FILE FROM USER IN REACT

    const file1 = e.target.files[0]
    console.log('instance of file', file1 instanceof File) // TRUE
    uploadLargeDocument(app.authProvider, fileObj)

// Function 2 - UPLOAD FILE TO SHAREPOINT

  const it_site_id = 'xyz'
  const requestUrl = https://graph.microsoft.com/v1.0/sites/${it_site_id}/drive/items/root:/Code/doggy5:/createUploadSession
    
  const payload = {
      "@microsoft.graph.conflictBehavior": "replace",
      "description": "description",
      "fileSize": file.size,
      "name": file.name
  }
  const uploadSession = await LargeFileUploadTask.createUploadSession(graphClient, requestUrl, payload);

 // ERROR - Please provide the Readable Stream content, name of the file and size of the file
  const fileObject = new FileUpload({
      content: file,
      name: file.name,
      size: file.size
  })

  const task = new LargeFileUploadTask(graphClient, fileObject, uploadSession);
  
  const response = task.upload();

  return response

}`

[nikithauc]

@rdick Thank you for reporting this issue!

I am marking this issue as a bug because the error message is wrong and needs to be corrected to Please provide the file content or name or size.
However, this is not a blocker for you.

Can you please try the following? I think that should solve the problem. The FileUpload class expects the content, name and size as three separate parameters.

const fileObject = new FileUpload(file, file.name, file.size);

FileUpload content accepts ArrayBuffer | Blob | Buffer file type.

[rdick]

Hi @nikithauc,

It still did not work - please refer to the lines with listed NEW CODE

The only thing I changed was I changed the type of File from a File Type to a Blob Type:

const fileObject = new FileUpload(file, file.name, file.size);

Changed:
   file (instanceof File) => file (instanceof Blob)

// Function 1 - GET UPLOADED FILE FROM USER IN REACT

    const file1 = e.target.files[0]
    console.log('instance of file', file1 instanceof File) // TRUE

    const blob = await new Blob([new Uint8Array(await file.arrayBuffer())], {type: file1.type }); // NEW CODE

    uploadLargeDocument(app.authProvider, {content: blob, name: file1.name, size: file1.size}) // NEW CODE

// Function 2 - UPLOAD FILE TO SHAREPOINT

  const it_site_id = 'xyz'
  const requestUrl = https://graph.microsoft.com/v1.0/sites/${it_site_id}/drive/items/root:/Code/doggy5:/createUploadSession
    
  const payload = {
      "@microsoft.graph.conflictBehavior": "replace",
      "description": "description",
      "fileSize": file.size,
      "name": file.name
  }
  const uploadSession = await LargeFileUploadTask.createUploadSession(graphClient, requestUrl, payload);

 // ERROR - Please provide the Readable Stream content, name of the file and size of the file
  const fileObject = new FileUpload({
      content: file.content,
      name: file.name,
      size: file.size
  })

  const task = new LargeFileUploadTask(graphClient, fileObject, uploadSession);
  
  const response = task.upload();

  return response
}`