Diva File Uploader

This repository contains an Angular workspace with a media management package that allows users to CRUD their files.

Table of Contents

1. Diva File Uploader
2. Prerequisites
3. Set up
   • Authentication
   • Installation
4. Usage
   • Import and Use Components
5. File Uploader Props
6. Troubleshooting
7. Support
8. License

Prerequisites

• Node.js (v14 or higher)
• NPM or Yarn
• Valid NPM authentication token from Diva Software

Set up

Authentication

1. Contact the package administrator ([email protected]) to obtain an NPM token
2. Create an .npmrc file in your project's root directory with the following content:

@npm_username:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=PROVIDED_NPM_TOKEN

Installation

Choose one of the following methods to install the package:

Option 1: Add to package.json

{
  "dependencies": {
    "@aymen_diva/diva-file-uploader": "*"
  }
}

Option 2: Install directly via npm

npm  install  @aymen_diva/diva-file-uploader@latest

Usage

AppModule.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { HttpClientModule } from "@angular/common/http";
import { DivaFileUploader } from "@aymen_diva/diva-file-uploader";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    DivaFileUploader // <-- IMPORT HERE
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

AppComponent.ts

import { Component } from  "@angular/core";
import { ImageGalleryService } from  "./image-gallery.service";
import { Image } from  "./models/types";
import { FileUploaderOptions } from "@aymen_diva/diva-file-uploader/models/types";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})

export  class  AppComponent {

  protected isOpened = false;

  // 👇 USE THIS TEMPLATE CONFIG OBJECT
  protected uploadOptions: FileUploaderOptions = {
    API_URL: environment.file_upload_api,
    onImageSelected: this.handleImageSelected.bind(this),
    isOpened: this.isOpened,
    onClose: () => (this.isUploadOpen = false),
    HEADERS_KEY: environment.api_key,
  };


  // ... YOUR LOGIC


  protected handleImageSelected(image: any): void {

    // CONSTRUCTING THE PAYLOAD TO MATCH INTERFACE
    const imagePayload = {
      IDImgArticle: null,
      IDArticle: null,
      Type: 111,
      Reference: null,
      Paths: image?.url,
    };

    // DEPENDING ON YOUR FORM SET UP
    // COULD BE SIMPLE PATCH FOR A SINGLE IMAGE IN YOUR CASE...
    this.articleForm.patchValue({
      images: [...this.articleForm?.value?.images, imagePayload],
    });
  }

}

AppComponent.html

  <!-- THE MAIN TRIGGER -->
  <button (click)="isOpened = !isOpened" class="browse-button">Browse Image</button>
  
  <!-- CONFITIONALY DISPLAY THE POPUP & PASS THE OPTIONS OBJECT -->
  @if (isOpened) {
    <diva-file-uploader [options]="uploadOptions"></diva-file-uploader>
  }

File Uploader Props

Here is a list with all possible options that could be passed to the package

| Prop | Type | Required | Description | default Value | | --------------------- | -------- | -------- | ------------------------------------------- | --------------------------- | | options.close | Output | ✅ | CallBack To Close the popup | - | | options.isOpened | boolean | ✅ | Shows / hides the popup | | options.imageSelected | Callback | ✅ | Returns the selected images | | | options.popUpHeight | string | ⛔️ | Height of the popup | 80vh | | options.popUpWidth | string | ⛔️ | width of the popup | 90% | | options.API_URL | string | ⛔️ | Upload Proxy | https://dfu-api.diva-dev.tn | | options.acceptTypes | string | ⛔️ | Accepted file types | */* | | options.HEADERS_KEY | string | ⛔️ | API key for authorizing requests | `` |

Screenshot:

Troubleshooting

If you encounter any issues:

1. Ensure you have the correct NPM token configured

Support

For technical support or questions, please contact:

• Email: [email protected]

License

Proprietary - All rights reserved by Diva Software