One Drive picker in Angular
In this blog, I would explain my approach to integrating the One Drive picker into an angular app which will return the downloadable links of selected files. These links can be used to save the files in the backend. This blog is part of my 3 blog series where I would explain my implementation of uploading files from DropBox, One Drive and Google Drive, you can find links to the other blogs at the bottom of this page.
The final result will look something like this.
Benefits:
→ No need to create and handle the whole UI thing as we are gonna use one drives UI itself.
→ Easy to integrate and authentication is also taken care of by one drive.
→ Compatible with newer versions of angular as of 2022 October.
Requirements:
→ A account with access to Microsoft Azure.
→ Angular 2
Steps:
→ Register an app in the Microsoft Azure portal.
→ Create an angular application
→ Integrate both the Microsoft app and the Angular application
Let’s hop on the First step.
→ Link for official Microsoft picker repo link
→ To Register a Microsoft app we would need an Azure account it can even be an organisation one or a personal account (if you don’t have one they do have a trial period of 1-year check it out)
→ Let’s start the process of registering our app in the Azure portal whose clientId will be used in our picker.
→ Once you click on the above link you will find yourself on a page which looks similar to the below fig(1)
→ Click on new registration at the top left corner, and you will be directed to a page to enter the basic details of the app. Please refer the fig(2) for configuration, feel free to explore the different options.
→ Once done click register and your app is now registered ☺️, you will be on a page similar to fig(3). Hang on just a few steps remaining to finish the setup.
→ Now we have to create an Application secret. While this value is not necessary for the picker, it must have been created.
→ Click on the “Client credentials” link shown in fig(3) or the overview page, you will find yourself on a page similar to fig(4).
→ Click “Add client secret” button and give a name and validity period for the secret and then click create.
→ As the last step navigate to the Authentication tab by selecting it from the left panel. If you scroll down a bit you will find yourself on a page similar to fig(5). Now check both the checkboxes (access token and id token) these will be used by Microsoft for the authentication of users.
→ Uff finally we are done, copy the “Application (client) ID” that will be used in our angular app to request One Drive picker.
(NOTE : Most of the text here is directly copied from my old blog on DropBox picker as we are following the same approach. Feel free to skip reading and directly check the code blocks if you have gone through my old blog which was on DropBox picker)
Let’s create our basic angular app (Second step).
Let’s start by creating a basic angular app using the following command.
→ ng new dropbox-picker
→ cd dropbox-picker
→ ng serve
Ta-da you have your basic angular app ready (the beauty of using a framework 😌).
As we now have all the basic things required let’s start coding the actual stuff (Third step).
→ Add the Embed code copied from the One Drive picker site into the body section of index.html file.
The updated index.html file would look similar to this.
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8">
<title>OnedrivePicker</title>
<base href=”/”>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
</head>
<body>
<script type=”text/javascript” src=”https://js.live.net/v7.2/OneDrive.js"></script>
<app-root></app-root>
</body>
</html>→ Let’s create a clickable image in our app which should open the One Drive picker with a mouse click also let’s create an unordered list component which we will populate at a later point with the file links we get from dropbox. For this example, I would be using a One Drive logo which I saved at src/assets/images/ location.
→ As the next step let’s add a mouse click listener to the image which calls a function that basically is responsible for launching the One Drive picker.
→ Here we will face the main issue that the One Drive picker is available in js but not in angular ts, else we have to use Microsoft graph API where we have to create the UI of the picker too (too tedious) 😤.
→ We will solve the issue by basically integrating the js code into angular, you can learn more about that from here.
→ We will create a js file at (src/assets/js/) location and name it onedrive.js, this file will contain the js function to open the dropbox chooser and a variable which we use to refer the ts file.
→ The function has the code as to what to do when we choose a file or close One Drive Picker and also some parameters to specify One Drive User credentials and how it should open the chooser what all files to be shown etc...
→ Now create a function in app.component.ts that will be called when we successfully receive files from One Drive chooser.
→ This function will iterate through all the files and then create an anchor tag and add them to our unordered list.
→ As the final step we will add our js files location to the projects → architect → scripts section in angular.json file so as to tell our app to execute our js file.
The final file would look like this …
app.component.html
<! — Creating a clickable image to load the One Drive picker →
<div style=”display: flex;justify-content: center; margin-top:20vh;”>
<img [src]=”’assets/images/onedrive-upload.svg’” (click)=”loadOneDrive()” >
</div>
<! — An unordered list where we will add the accessible links of files which One Drive returns →
<ul id=”results” style=”padding: 50px;”></ul>app.component.ts
import { Component } from ‘@angular/core’;
declare function launchOneDrivePicker(): any;
declare var OneDriveFilesReference: any;@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘onedrive-picker’;ngOnInit() {
OneDriveFilesReference = this;
}ngOnDestroy(): any {
OneDriveFilesReference = null;
}sendOneDriveFiles(files: any) {
/* Creating a list of links to the files that were selected in the dropbox picker. */
files = files[‘value’]
console.warn(files[‘value’])
for (let file of files){
let ul = document.getElementById(“results”);
let li = document.createElement(“li”);
let a = document.createElement(‘a’);
a.setAttribute(‘href’,file[‘@microsoft.graph.downloadUrl’]);
a.setAttribute(‘target’,’_blank’);
a.innerHTML = “Click here”;
li.appendChild(a);
ul?.appendChild(li);
}
// this.getFilesFromOneDrive.emit(files[‘value’])
}loadOneDrive() {
launchOneDrivePicker();
}
}
onedrive.js
function launchOneDrivePicker(){
var odOptions = {
clientId: “5e7baeb3–7e6a-4a17–8893–65f5547de834”,
action: “download”,
multiSelect: true,
advanced: {
redirectUri:”http://localhost:4200",
filter:”folder,.pptx,.jpeg,.jpg",
},
viewType: “all”,
success: function(files) {
OneDriveFilesReference.sendOneDriveFiles(files);
},
cancel: function() { console.log(“cancel”) },
error: function() { console.log(“error”) },
}
return OneDrive.open(odOptions);
}var OneDriveFilesReference = null;
angular.json
// The scripts section would look something like this “scripts”: [
“src/assets/js/onedrive.js”
]Hurray! we are done, Now we have a OneDrive picker that we can use in any angular application to get files from OneDrive to the app, Cheers.
Do check my other blogs.
→ Angular- Carousel with zoom effect
https://medium.com/codex/create-a-carousel-with-awesome-zoom-effects-like-that-of-amazon-prime-and-netflix-in-angular-940d5c6333cd
→ Angular- DropBox picker
https://medium.com/@sankethdesuwar5/dropbox-picker-in-angular-32303538ea41
Follow me on Twitter at https://twitter.com/Sanketh38731692
IMPORTANT LINKS
GITHUB REPO: https://github.com/sanketh5/Angular-Onedrivepicker
ONEDRIVE CHOOSER: https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/open-file?view=odsp-graph-online
HOW TO USE JS CODE IN ANGULAR APP: https://www.c-sharpcorner.com/article/using-external-js-file-in-angular-app/