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-server-uploads or npm i rb-file-server-uploads

Table of Contents:

• Configuration
• Parameter Details
• Response
• External Methods

Configuration

STEP : 1

============================================================================== This file upload library uses a server-side API for file operations (upload, delete, get URL). Configure your API base URL in your environment.ts file.

import { FileUploadApiConfig } from 'rb-file-server-uploads';

export const environment = {
  production: false
};

export const ApiBaseUrl: string = 'http://localhost:5002/';

export const FileUploadConfig = new FileUploadApiConfig(ApiBaseUrl + 'api/file');

Note: The FileUploadApiConfig takes a single parameter — the base URL of your file upload API. The API should expose the following endpoints: - POST /upload — Upload a file (multipart/form-data) - DELETE /delete?fileName=...&isPublic=... — Delete a file - GET /url?fileName=...&isPublic=... — Get file preview/download URL

STEP : 2

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

import { FileUploadConfig } from '../environments/environment';
import { RBFileUploadModule } from 'rb-file-server-uploads';
import { HttpClientModule } from '@angular/common/http';

Then, add following

imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    RBFileUploadModule.forRoot(FileUploadConfig)
  ],

STEP : 3

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

    => Default :
    <lib-RB-Server-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="AnyNameOfFolder" [uploaded_file_download]="true"
    instruction_details="Only jpg, jpeg, png and zip is allowed <br> File size allowed 600MB" uploaded_filename="AnyNameOfFolder/SampleJPGImage_10mbmb_1676543304917.jpg" instruction_color="red" (fileDetails)="getUrl($event)"></lib-RB-Server-FileUpload>

    => Link :
    <lib-RB-Server-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="AnyNameOfFolder" [uploaded_file_download]="true"
    (fileDetails)="getUrl($event)"></lib-RB-Server-FileUpload>

    => Profile :
    <lib-RB-Server-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="AnyNameOfFolder" [uploaded_file_download]="false"
    (fileDetails)="getUrl($event)"></lib-RB-Server-FileUpload>

    => Button :
    <lib-RB-Server-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="AnyNameOfFolder" [uploaded_file_download]="true"
    (fileDetails)="getUrl($event)"></lib-RB-Server-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) Controls whether the file is uploaded to the public or private storage. If true, the file is uploaded as public (accessible without authentication). If false, the file is uploaded as private.

   (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. content_disposition :- (string) Set content disposition like 'attachment'/'inline' (default:'inline')

19. 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 code 200 (success)/ 500 (fail) / 202 (delete accepted)/ 400 (bad request)
    "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.

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

Both external method return comman response

Step 1: First you have to import RB_FILEUPLOAD and inject HttpClient

import { HttpClient } from '@angular/common/http';
import { RB_FILEUPLOAD } from 'rb-file-server-uploads';
import { FileUploadConfig } from '../environments/environment';

Step 2: Inject HttpClient in your component constructor

constructor(private http: HttpClient) {}

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

ngOnInit(): void {
    new RB_FILEUPLOAD(this.http, FileUploadConfig.API_BASE_URL, 'folder/filename.ext', true).getPreviewUrl()
      .then((obj) => {
        console.log(JSON.stringify(obj)); //Success object with preview url
      })
      .catch((err) => {
        console.log(JSON.stringify(err)); //Fail object
      });
  }

Note: RB_FILEUPLOAD constructor takes 4 parameters: - http (HttpClient) — Angular HttpClient instance - apiBaseUrl (string) — Your file API base URL (from FileUploadConfig.API_BASE_URL) - fileName (string) — File name with path (e.g., 'folder/myfile.png') - isPublic (boolean) — Whether the file is in public storage