Upload file to OneDrive with access token and method PUT

[Damir]

I need to upload a file on OneDrive via API.

As explained here https://learn.microsoft.com/en-us/onedrive/developer/rest-api/api/driveitem_createuploadsession?view=odsp-graph-online first of all I create an upload session which allow to upload large files.

After I obtain a temporary upload URL which I then pass to Upload component via prop saveUrl.

Below is my current setup of React component:

 

					<Upload
						saveUrl={uploadUrl}
						saveHeaders={{
							Authorization: `Bearer ${accessToken}`
						}}
						saveMethod='PUT'
					/>

I am getting error The Content-Range header is missing or malformed. and I would like to know how to sent bytes as explained here https://learn.microsoft.com/en-us/onedrive/developer/rest-api/api/driveitem_createuploadsession?view=odsp-graph-online#upload-bytes-to-the-upload-session

Thanks

[Damir]

It seem that chunks upload is not available in React Upload, correct?
I found this Chunk Upload in react (telerik.com)

[Filip]

Hi, Damir,

Yes, currently chunk upload is not supported for the Upload component, I can recommend casting your vote in order to increase the item priority. You can also track the item's progress in the feedback portal.

Regards,
Filip

[Damir]

Thanks Filip.

Would it possible to use the Telerik Upload component only as UI and handle upload logic with custom code?

I made my own code to upload chunks and I wonder if I could use event onAdd to fire my own upload logic, but not sure how to control progress, and action button on submit.

Thanks

[Filip]

Hi, Damir,

I can suggest setting the Upload in control mode, this way you can implement custom logic on the `onAdd` and `onProgress` events. More information on controlled mode can be found here:

https://www.telerik.com/kendo-react-ui/components/upload/modes/#toc-controlled-mode

In addition, you can set the `saveUrl` to be a function, which gives full control to the developer for making the request:

https://stackblitz.com/edit/react-bvfjbb-xk1bf7?file=app%2Fmain.jsx

Regards,
Filip