I can't able to upload image and pdf files to OneDrive via Rest API

[Mageshwarideveloper]

Hi Support Team,

     I need help regarding UploadFiles(Images,Pdf...) to OneDrive RestAPI. I am able to upload text files using RestAPI but other files need support. 

Thanks and Regards,

Mageshwari

[#2]

Hello @Mageshwarideveloper,

here is Ahmed a community visitor 😉 

-I tried to add a text but the text editor did not accept it! So, I will add an Image with the Text... 

Best of the best 🙂 

Ahme:D 

[#3]

@Ahmed_Masoud97  Thank you for your response i have tried already in postman with the binary image data that was successfully uploaded and able to view the image but while trying in javascript with the following code file was created  successfully but can't able to view the image like below screenshot.

The javascript code i was used like below

/*************************************************************

<input id="fileInput" type="file" name="file" />

 const fileInput = document.getElementById("fileInput");

  fileInput.addEventListener('change', e => {

    const file = fileInput.files[0];

    const reader = new FileReader();

    reader.addEventListener("load", () => {

      var Filename = encodeURI(file.name);

      var blob = new Blob([reader.result], { type: 'image/jpeg' });

      var blobUrl = URL.createObjectURL(blob);

//blob:https://127.0.0.1:5000/91e5633a-7af9-4ea4-9d38-f127b55fb3a2

 var request = {

        url: "https://graph.microsoft.com/v1.0/me/drive/root:/{foldername}/{Filename}:/content?@name.conflictBehavior=rename",

        headers: {

          "Authorization": "Bearer accesstoken",

          "Content-Type": "image/jpeg",

        },

        body: blobUrl

      }

 })

reader.readAsArrayBuffer(file);

})

/*************************************************************

[#4]

@Mageshwarideveloper 

Hello, thanks for texting me back! I'm glad to hear that you were able to successfully upload the image using the REST API.

ahm....let me offer another method, then I can check the code you sent 🙂

you can use the PUT method and specify the file contents in the request body. Here is an example of how you can do this using cURL:

curl -X PUT -H "Authorization: Bearer <ACCESS_TOKEN>" -H "Content-Type: image/jpeg" --data-binary "@<FILE_PATH>.jpg" "https://graph.microsoft.com/v1.0/me/drive/items/<ITEM_ID>/content"

This example assumes that you have already obtained an access token and have the ID of the item (i.e. the file) that you want to upload. You can also specify the Content-Type header as application/pdf for PDF files.

Alternatively, you can also use the POST method with the Content-Type header set to application/octet-stream to upload the file contents as a stream. Here is an example of how you can do this using cURL:

curl -X POST -H "Authorization: Bearer <ACCESS_TOKEN>" -H "Content-Type: application/octet-stream" --data-binary "@<FILE_PATH>.jpg" "https://graph.

---Then I'v checked the sent items (I hope this text editor accept my writing hhhhhh)

So: 

It looks like you are using the FileReader API to read the contents of the image file and then trying to use the Blob API to create a blob object from the file contents. You can then use the URL.createObjectURL method to create a URL for the blob object and pass it as the body parameter in the API request.

One issue with this approach is that the URL.createObjectURL method creates a temporary URL that can only be used while the document or the Blob object is in memory. This means that once the document or Blob object is garbage collected, the URL becomes invalid and cannot be used anymore.

Instead of using the URL.createObjectURL method, you can try using the ArrayBuffer returned by the FileReader object directly as the body parameter in the API request. You can do this by setting the Content-Type header to application/octet-stream and using the ArrayBuffer as the body in the request. Here is an example of how you can do this using the fetch API:

const fileInput = document.getElementById("fileInput");
fileInput.addEventListener('change', e => {
  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.addEventListener("load", () => {
    var Filename = encodeURI(file.name);
    var data = reader.result;

    fetch("https://graph.microsoft.com/v1.0/me/drive/root:/{foldername}/{Filename}:/content?@name.conflictBehavior=rename", {
      method: "PUT",
      headers: {
        "Authorization": "Bearer accesstoken",
        "Content-Type": "application/octet-stream",
      },
      body: data
    })
    .then(response => response.json())
    .then(json => console.log(json));
  });

  reader.readAsArrayBuffer(file);
});

It shall help solve your issue 🙂 
-----------

If it did not help 😞  hmmmmmmmmmmmmm .... it is possible that the image file may be corrupted or there may be an issue with the way the image file is being uploaded.

Here are a few things you can try to troubleshoot the issue:

1. Check the file size and format of the image to ensure that it is within the allowed limits and meets the requirements for the application you are trying to use.

2. Make sure that you are using the correct Content-Type header when uploading the image. For example, use image/jpeg for JPEG images and image/png for PNG images.

3. Ensure that you are using the correct API endpoint for uploading the image. The API endpoint for uploading the image to OneDrive should be https://graph.microsoft.com/v1.0/me/drive/items/<ITEM_ID>/content.

4. Make sure that you have the necessary permissions to upload the image to OneDrive. If you are using an application or service that requires special permissions to access OneDrive, make sure that you have granted the necessary permissions.

-Please keep me updated 🙂

Thanks Ahmed