RBFileUploads (RamanByte File Upload Library)

This library was generated with Angular CLI(https://github.com/angular/angular-cli) version 15.0.0. Just Install this library using following command npm install rb-file-upload or npm i rb-file-upload

Table of Contents:

• Configuration
• Parameter Details
• Response
• External Methods

Configuration

STEP : 1

============================================================================== This file upload library support AWS S3 package so create your bucket on aws s3 console and add following keys to your environment.ts file

import * as S3 from "aws-sdk/clients/s3";

export const environment = {
  production: false
};

export const PublicBucketConfiguration = {
  AWS_ACCESS_KEY_ID: `XXXXXXXXXXXX`,
  AWS_SECRET_ACCESS_KEY: `XXXXXXXXXXXX`,
  BUCKET_NAME: `XXXXXXXXXXXX`,
  AWS_REGION: "ap-south-1"
};

export const PrivateBucketConfiguration = {
  AWS_ACCESS_KEY_ID: `XXXXXXXXXXXX`,
  AWS_SECRET_ACCESS_KEY: `XXXXXXXXXXXX`,
  BUCKET_NAME: `XXXXXXXXXXXX`,
  AWS_REGION: "ap-south-1"
}

export const S3Public: S3 = new S3(
  {
    credentials: {
      accessKeyId: PublicBucketConfiguration.AWS_ACCESS_KEY_ID,
      secretAccessKey: PublicBucketConfiguration.AWS_SECRET_ACCESS_KEY,
    },
    region: PublicBucketConfiguration.AWS_REGION,
    apiVersion: '2017-08-29',
  }
);

export const S3Private: S3 = new S3(
  {
    credentials: {
      accessKeyId: PrivateBucketConfiguration.AWS_ACCESS_KEY_ID,
      secretAccessKey: PrivateBucketConfiguration.AWS_SECRET_ACCESS_KEY,
    },
    region: PrivateBucketConfiguration.AWS_REGION,
    apiVersion: '2017-08-29',
  }
)

Note: You have to import aws-sdk/clients/s3 package as the library module require aws's s3 object as parameter for forroot If you have only one bucket then pass same values to both the configuration.

STEP : 2

============================================================================== Import following in app.module.ts file

import { PublicBucketConfiguration, S3Public, PrivateBucketConfiguration, S3Private } from "../environments/environment";

Then, add following

imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    `RBFileUploadModule.forRoot(PublicBucketConfiguration, AlumniS3Public, PrivateBucketConfiguration, AlumniS3Private)`
  ],

STEP : 3

============================================================================== Update your polyfills.ts by adding following line

(window as any).global = window;

STEP : 4

============================================================================== Add following html statment of library in your app-component.html

    
    => Default :
    <lib-RB-FileUpload label="Upload Any File (Default)" [disabled]="false" controller_type="Default" [allowed_extensions]="['jpg','jpeg','png','zip']"
    [allowed_filesize_kb]="600000" [use_public_bucket]="true" [progress_show]="true" progress_bg_color="#f5be36" [uploaded_file_show]="true"
    [progress_thin_show]="false" [progress_percent_show]="true" [instruction_show]="true" folder_name="Alumni" [uploaded_file_download]="true"
    instruction_details="Only jpg, jpeg, png and zip is allowed <br> File size allowed 600MB" uploaded_filename="Alumni/FEB_2023/SampleJPGImage_10mbmb_1676543304917.jpg" instruction_color="red" (fileDetails)="getUrl($event)"></lib-RB-FileUpload>

    => Link :
    <lib-RB-FileUpload label="Upload Any File (Link)"  [disabled]="true" controller_type="Link" [allowed_extensions]="['jpg','jpeg','png','zip']"
    [allowed_filesize_kb]="600000" [use_public_bucket]="true" [progress_show]="true" progress_bg_color="#f5be36"
    [progress_thin_show]="true" [progress_percent_show]="true" [instruction_show]="true" folder_name="Alumni" [uploaded_file_download]="true"
    (fileDetails)="getUrl($event)"></lib-RB-FileUpload>

    => Profile :
    <lib-RB-FileUpload label="Upload Any File (Profile)"  [disabled]="true" controller_type="Profile" [allowed_extensions]="['jpg','jpeg','png']"
    [allowed_filesize_kb]="600000" [use_public_bucket]="true" [progress_show]="false" progress_bg_color="#f5be36"
    [progress_thin_show]="false" [progress_percent_show]="true" [instruction_show]="true" folder_name="Alumni" [uploaded_file_download]="false"
    (fileDetails)="getUrl($event)"></lib-RB-FileUpload>

    => Button :
    <lib-RB-FileUpload label="Upload Resume"  [disabled]="true" controller_type="Button" [allowed_extensions]="['pdf']"
    [allowed_filesize_kb]="600000" [use_public_bucket]="true" [progress_show]="true" progress_bg_color="#f5be36"
    [progress_thin_show]="true" [progress_percent_show]="true" [instruction_show]="true" folder_name="Alumni" [uploaded_file_download]="true"
    (fileDetails)="getUrl($event)"></lib-RB-FileUpload>

And Thats it...!!!

Parameter Details

1. label :- (string) Indicates caption of the field.

2. disabled :- (boolean) To disable the entire file upload component.

3. controller_type :- (string) There are total 4 controller type, you can configure Default, Link, Profile, Button just implement and see the differnce in layout (default: default)

4. allowed_extensions :- (string []) As name suggest you can provide valid file extensions to restrict the user to upload only certain type of files

5. allowed_filesize_kb :- (number) As name suggest you can provide valid file size to restrict the user to upload only certain size of files (default: 10 Mb)

6. use_public_bucket :- (boolean) You know, we take two bucket configuration from environment.ts file step 1 so with this parameter we can choose one bucket. if true then library choose public bucket configurateion if false then library choose private bucket configration.

   (default: true)

7. progress_show :- (boolean) To show/hide progress bar (default: true).

8. progress_bg_color :- (string) Configure progress bar background color. (progress_show must be 'true')

9. progress_thin_show :- (boolean) Configure it true to show thin progress bar (default: false). (progress_show must be 'true')

10. progress_percent_show :- (boolean) Configure it true to show progress percentage (default: true).

11. instruction_show :- (boolean) Configure it true to show instruction guide lines (default: true).

12. instruction_details :- (string) Provide instruction details to show as note. (instruction_show must be 'true')

13. uploaded_file_show :- (boolean) Configure it to false, if you don't want to show uploaded file name with delete button. (default: true)

14. uploaded_filename :- (string) Bind already uploaded file name (* with directory name if any) for edit purpose. (uploaded_file_show must be 'true')

15. uploaded_file_download :- (boolean) Set to true, if you want to download uploaded file (uploaded_file_show must be 'true')

16. instruction_color :- (string) Set the fore color of instruction text

17. folder_name :- (string) Provide folder/directory name if you want to upload the file in specifice directory inside your bucket

18. fileDetails :- (emiter function) Provide function name where you can get file upload response

Response

Once you upload file, delete file or if you got any error while uploading or deleting, you will get following comman response

  { 
    "Key": string; //Uploaded file name
    "Location": string; //Uploaded file url
    "Status": number; //Status cde 200 (success)/ 500 (fail) / 202 (delete accepted)/ 404 (not found)
    "Message": string; //Message after uploading or deleting file or if any error occurs
  }

you will get above respose in fileDetails emiter function

External Methods

getPreviewUrl() :- this method will return comman response with preview url/signed url. Sinario, where you already uploaded your file and in another page/component where you want to show uploaded file then you can use this method to get url directly.

Step 1: First you have to import rb file upload along with existing environment variables

import { RB_FILEUPLOAD } from '@rb-file-upload';
import { PublicBucketConfiguration, S3Public } from "../environments/environment";

Step 2: Then in ngInit or in your custom function write following code snippet

ngOnInit(): void {
    new RB_FILEUPLOAD(S3Public, PublicBucketConfiguration, [PASS FILE_NAME WITH EXTENSION]).getPreviewUrl()
      .then((obj) => {
        Console.log(JSON.stringify(obj)); //Success object with preview/signed url
      })
      .catch((err) => {
        Console.log(JSON.stringify(err));//Fail object
      });
  }