ng-fad-drop-box v2.0.0

Getting started

Installation

npm install ng-fad-drop-box

It is important to configure your application in: Click here

Dependencies

npm install @fadportal/portal-models

Description

a) Gets the list of all files on dropbox Click here

b) Get the list of dropbox files filtered by a query Click here

c) Gets the blob, base64 and temporal url of the selected file

Import

In the necessary file example.component.ts import the service.

import { FadDropBoxService } from 'ng-fad-drop-box';
.
.
.
...  constructor(private dropBox: FadDropBoxService) { }

Usage

Typescript

Listen to the events and execute methods:

Inject service called FadDropBoxService Before using any method it is important to initialize that Dropbox requires with the method initDropBox To see the errors it is necessary to subscribe to the method onErrorDropBox

  private appKey = 'YOUR_APP_KEY';
  private urlRedirect = 'YOUR_URL_REDIRECT';

  constructor(private dropBox: FadDropBoxService) { }

  ngOnInit(): void {
    // Observe errors
    this.onerror();

    // Observe files
    this.ongetfiles();
  }

  getAllFiles() {
    /**
     * Initializaton of Dropbox
     * @param {string} clientId Necessary data to login
     * @param {string} redirect Necessary data to login
     * @return {Promise<boolean>}
     */
      const init = await this.dropBoxService.initDropBox(this.appKey, this.urlRedirect);

    /**
     * Trigger get files
     */
    this.dropBox.getDropBoxFiles();
  }

  getAllFileByQuery() {
    /**
     * Initializaton of Dropbox
     * @param {string} clientId Necessary data to login
     * @param {string} redirect Necessary data to login
     * @return {Promise<boolean>}
     */
      const init = await this.dropBoxService.initDropBox(this.appKey, this.urlRedirect);

    /**
     * Trigger get files
     * @param {string} q Filter to Dropbox list
     */
    const q = 'file_name';
    this.dropBox.getDropBoxFilesByQuery(q);
  }

  async getFile(file: FadDropBoxModelFolderResult) {
    /**
     * Get base64, blob and temporal url of Dropbox file
     * @param {string} path Your path file. That is provided by each item of the files and the propertie is called path_display
     * @return {Promise<FadDropBoxModelFileFormat>}
     */
    const url = file.path_display;
    const data = await this.dropBox.getFile(path).then(res => res).catch(() => null);
    console.log(data);
  }

  ongetfiles() {
    /**
     * Get items from dropbox account 
     * @return {Observable<FadDropBoxModelFileList[]>}
     */

    this.dropBox.onGetDropBoxFiles().subscribe(res => {
      // Dropbox files
      console.log(res);
    });
  }

  onerror() {
    /**
     * Get errors from service
     * @return {Observable<FadPortalModelErrorModule>}
     */

    this.dropBox.onErrorDropBox().subscribe(res => {
      // Manage errors
      console.log(res);
    });
  }