Dropbox picker in Angular
One day I suddenly got a call from my client to add a new feature in the angular app where he would wish user’s to upload their content through various sources like his computer, Google Drive, One Drive and Dropbox. I started searching the internet for similar implementations, there were many but each one was outdated. I was totally disheartened 😣 …..
Let’s cut the drama and get to the point, in this blog I would explain my approach to integrating the Dropbox chooser 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. In the upcoming blogs, I would try to explain my approach to One Drive and Google Drive too, please check the last section of this blog to find them, I would update them once I’m done peace✌️.
The Final result is going to look something like this.
Steps :
→ Create an app in dropbox
→ Create an angular application
→ Integrate both Dropbox app into the Angular application
Let's get started with the First step.
Click here, you will be navigated to the dropbox chooser official page. Signup with google then click “create a new app” as shown in figure (img 1.0).
Once you click on “create a new app” you will be navigated to the page shown in figure (img 1.1).
Configure the app as shown in figure (image 1.1) the click “create app”.
Yeah, our first dropbox app is created.
You will find yourself on a page similar to (img 1.2). Here we have to add a redirect uri to point it to localhost with port 4200 (i.e where the angular app is hosted).
Next, we will add a Domain in “Chooser / Saver / Embedder domains” option which points to localhost.
The final configuration would look something like the one in (img 1.2)
Hooray 🎉 we are done with the dropbox app configuration our app is ready to use.
Let’s navigate back to the documentation page by clicking here.
Now copy the Embed code from there and paste it somewhere handy, make sure the app you created now is selected in the dropdown.
The Embed code will look something like this.
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="your api key"></script>We are now done with the first step let's get going…
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 dropbox chooser 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>DropboxPicker</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>
<app-root></app-root>
<script type=”text/javascript” src=”https://www.dropbox.com/static/api/2/dropins.js" id=”dropboxjs” data-app-key=”yourkey”></script>
</body>
</html>→ Let’s create a clickable image in our app which should open the dropbox chooser 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 dropbox 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 drop box chooser.
→ Here we will face the main issue that the dropbox chooser is available in js but not in angular ts 😤.
→ 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 as dropboxupload.js, this file will contain the js function to open the dropbox chooser.
→ The function has the code as to what to do when we choose a file or close dropbox chooser and also some parameters to specify dropbox 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 dropbox 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 file 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 DropBox picker →<div style=”display: flex;justify-content: center; margin-top:20vh;”><img [src]=”’assets/images/dropbox-upload.svg’” (click)=”loadDropBox()” ></div><! — An unordered list where we will add the accessible links of files which dropbox returns →<ul id=”results” style=”padding: 50px;”></ul>
app.component.ts
import { Component } from ‘@angular/core’;
declare function launchDropBoxPicker(): any;
declare var DropBoxFilesReference: any;@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘dropbox-picker’;/* Setting the DropBoxFilesReference variable to “this” as it has to refer the current component. */
ngOnInit() {
DropBoxFilesReference = this;
}/* Creating a list of links to the files that were selected in the dropbox picker. */
receiveDropBoxFiles(files: any) {
for (let file of files){
let ul = document.getElementById(“results”);
let li = document.createElement(“li”);
let a = document.createElement(‘a’);
a.setAttribute(‘href’,file[‘link’]);
a.setAttribute(‘target’,’_blank’);
a.innerHTML = “Click here”;
li.appendChild(a);
ul?.appendChild(li);
}
}/* It launches the dropbox picker. */
loadDropBox(){
launchDropBoxPicker();
}
}
dropboxupload.js
function launchDropBoxPicker(){
options = {
// Required. Called when a user selects an item in the Chooser.
success: function(files) {
DropBoxFilesReference.receiveDropBoxFiles(files);
},
// Optional. Called when the user closes the dialog without selecting a file and does not include any parameters.
cancel: function() {
console.log(“cancel”)
},
linkType: “direct”,
multiselect: true,
extensions: [‘*’],
folderselect: false,
};
return Dropbox.choose(options);
}var DropBoxFilesReference = null;
angular.json
// The scripts section would look something like this “scripts”: [
“src/assets/js/dropboxupload.js”
]
Hurray! we are done, Now we have a dropbox chooser that we can use in any angular application to get files from dropbox 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- OneDrive picker
https://medium.com/@sankethdesuwar5/one-drive-picker-in-angular-1729064fbca9
Follow me on Twitter at https://twitter.com/Sanketh38731692
IMPORTANT LINKS
GITHUB REPO: https://github.com/sanketh5/Angular-Dropboxpicker
DROPBOX CHOOSER: https://www.dropbox.com/developers/chooser
HOW TO USE JS CODE IN ANGULAR APP: https://www.c-sharpcorner.com/article/using-external-js-file-in-angular-app/