Search code examples
javascriptjqueryuploadonedrive

Saving PDF to OneDrive using jQuery

My company started using Microsoft Office 365. They are using OneDrive to save and view files.

I have been tasked to build a website that will allow customers to upload files directly into OneDrive. My team has created our own OneDrive dummy account to test saving the files that will be uploaded by a customer.

Starting with simple HTML form input:

<form id="uploadfile">
  <input type="file" id="pdfFile" name="pdfFile" class="form-control" />
  <button type="button" class="btn btn-primary" id="uploadBtn">Upload File</button>
</form>

And now the jQuery:

$('#uploadBtn').on('click', function(e)
{
  e.preventDefault();
  var formData = new FormData($('#uploadfile')[0]);  // <-- not currently using this variable, but I know I will need it
  var filename = $('#pdfFile').val().replace(/.*(\/|\\)/, '');

  var odOptions = 
  {
    clientId: "00000000-xxxxx-0000-xxxx-0000000000",
    action: "upload",  // <-- was originally set to save
    sourceInputElementId: "pdfFile",
    sourceUri: "",
    fileName: filename,
    openInNewWindow: true,
    advanced: {endpointHint: "api.onedrive.com"},
    success: function(files) { /* success handler */ },
    progress: function(p) { /* progress handler */ },
    cancel: function() { /* cancel handler */ },
    error: function(e) { /* error handler */ }
  }
  OneDrive.save(odOptions);
});

All of the above is coming from the following link:

https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/save-file

Edit

I have made some progress since asking this. I can get to the point to where the OneDrive window opens, and I can see various folders. But it seems there is no file for me to save.

Starting here:

enter image description here

The user has selected an image. Upon clicking the upload button, the OneDrive opens:

enter image description here

But when I am inside the OneDrive window, upon clicking the save button, no file is saved.

What am I missing that will get the file to save into the OneDrive?

Solution

  • I was finally able to save to OneDrive. Some adjustments were made on the Application Registration Portal (where you retrieve your appID). I added permissions to ensure that I could read/write to the folder in OneDrive.

    I also made adjustments to the odOptions portion of the code:

    $('#uploadBtn').on('click', function(e)
{
  e.preventDefault();
  //var formData = new FormData($('#uploadfile')[0]); 
  //var filename = $('#pdfFile').val().replace(/.*(\/|\\)/, '');

  var odOptions = 
  {
    clientId: "00000000-xxxxx-0000-xxxx-0000000000",
    action: "save",  // upload was not valid
    sourceInputElementId: "pdfFile",
    //sourceUri: "", 
    //fileName: filename,
    openInNewWindow: true,
    advanced: {endpointHint: "api.onedrive.com"},
    success: function(files) { /* success handler */ },
    progress: function(p) { /* progress handler */ },
    cancel: function() { /* cancel handler */ },
    error: function(e) { /* error handler */ }     
  }
  OneDrive.save(odOptions);
});

    Following the documentation here helped solved my problem:

    https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/save-file