WML File Manager

The Angular WML File Manager library is designed to enhance Angular applications by providing robust file upload capabilities. This library streamlines the process of integrating file upload functionality, addressing common challenges such as handling multiple file formats, validating file sizes, and providing feedback on the upload process. Its primary goal is to offer a configurable and efficient solution for developers to incorporate file upload features into their applications, with a focus on ease of use and flexibility.

At the heart of the library are several key components that facilitate its core functionality. The library includes components for file selection, upload progress indication, and error handling. These components work in concert to provide a seamless user experience, allowing for the asynchronous upload of files with real-time progress feedback. Developers have the ability to customize these components, tailoring the file upload experience to their application’s specific needs. Parameters and services are exposed to enable customization, such as defining file size limits, specifying allowed file types, and customizing the UI elements. The library also supports interactivity, offering hooks and events that developers can leverage to create dynamic responses to the file upload process. In terms of implementation, the library encourages a modular approach, where developers can integrate and configure the file upload components within their existing Angular applications, ensuring flexibility and adaptability to various use cases.

Installation

npm install -s --verbose @windmillcode/angular-wml-file-manager

Usage

WMLFileUploadZero

Getting Started

Change Field Text

Change Limit

Allow Duplicates

Custom Validation

• when this is applied you are replacing validation for duplicates and limit and must reimplement again its planned to make it plug and play

Handling File Upload

Diode Reverse Proxy

Reference

WMLFileUploadZeroProps Properties

Property	Type	Description
files	WMLFileUploadZeroItem[]	The list of files to be uploaded.
dragDropText	string	Text displayed for the drag-and-drop area.
browseFileText	string	Text displayed on the browse button.
limit	number	The maximum number of files that can be uploaded.
formArray	FormArray<AbstractControl>	Angular FormArray to track the state of uploads.
duplicates	boolean	Whether to allow duplicate files.
uploadFn	(item:WMLFileUploadZeroItem)=> Observable<any>	Function to call when a file is uploaded. This is where you usually upload files to a server
updateFormArrayPredicate	Function	Function to update the FormArray based on current files.
uploadAllowedPredicate	(file: File, fileList: File[]) => boolean	Function to determine if a file upload is allowed.
afterUploadPredicate	() => WMLFileUploadZeroItem[]	Function called after files are selected/uploaded.

Changelog

v0.1.7

uploadAllowedPredicate - allows developer to edit the files list after the uploadAllowedPredicate validation for additional modfication or aux tasks as needed be sure to return WMLFileUploadZeroItem[] | this.props.files as necessary

v1.0.0

• ensured that there is support for ngx-translate and non ngx-translate features
• to enable translation

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
    HttpClientModule,
    WmlFileManagerModule
    .forChild(
      new WMLModuleForRootProps({
        ngxTranslateLoaderFactory:HttpLoaderFactory
      })
    ),

• to disable translation

    WmlFileManagerModule

v1.0.1

• minor dependency update

v2.0.0

• MAJOR rename to angular-wml-file-manager
  • fixed major problems concerning ngx-translate

// translate
// first make sure to have ONLY ONE in the imports for AppModule
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps:[HttpClient]
      }
    }),
// then
WmlFileManagerNGXTranslateModule
// for regular
WmlFileManagerModule

%!(EXTRA string=

v16.2.80

• updated package to reflect the version 16.2.80 of @angular/core package),

v16.2.80

• updated package to reflect the version 16.2.80 of @angular/core package,

v16.2.90

• updated package to reflect the version 16.2.90 of @angular/core package,

v16.2.91

• updated package to reflect the version 16.2.91 of @angular/core package,

v16.2.93

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.100

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.110

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.120

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.10

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.11

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.20

• updated package to reflect the version ^17.0.2 of @angular/core package,

v17.0.40

• updated package to reflect the version ^17.0.4 of @angular/core package,

v17.0.50

• updated package to reflect the version ^17.0.5 of @angular/core package,

v17.0.60

• updated package to reflect the version ^17.0.6 of @angular/core package,

v17.0.70

• updated package to reflect the version ^17.0.7 of @angular/core package,

v17.0.7100

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7200

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7300

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.80

• updated package to reflect the version ^17.0.8 of @angular/core package,

v17.0.8100

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8102

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8103

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9000

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9001

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.0000

• updated package to reflect the version ^17.1.0 of @angular/core package,

v17.1.2

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.1000

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.2000 [2/5/24]

• updated package to reflect the version ^17.1.2 of @angular/core package,

v17.1.2001 [2/8/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.3000 [2/8/24]

• updated package to reflect the version ^17.1.3 of @angular/core package,

v17.2.1000 [2/17/24]

• updated package to reflect the version ^17.2.1 of @angular/core package,

v17.2.2000 [2/23/24]

• updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.2001 [2/23/24]

• updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.3000 [2/28/24]

• updated package to reflect the version ^17.2.3 of @angular/core package,

v17.2.3001 [3/2/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.3002 [3/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4000 [3/8/24]

• updated package to reflect the version ^17.2.4 of @angular/core package,

v17.2.4001 [3/12/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4002 [3/12/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4003 [3/13/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4004 [3/13/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.0 [3/17/24]

• updated package to reflect the version ^17.3.0 of @angular/core package ,

v17.3.1000 [3/22/24]

• updated package to reflect the version ^17.3.1 of @angular/core package,

v17.3.2000 [3/28/24]

• updated package to reflect the version ^17.3.2 of @angular/core package,

v17.3.3000 [4/4/24]

• updated package to reflect the version ^17.3.3 of @angular/core package,

v17.3.4000 [4/11/24]

• updated package to reflect the version ^17.3.4 of @angular/core package,

v17.3.4001 [4/16/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.5000 [4/20/24]

• updated package to reflect the version ^17.3.5 of @angular/core package

v17.3.5110 [5/1/24]

• [UPDATE] Changed the updateFormArrayPredicate function in WMLFileUploadZeroComponent of wml-file-upload.component.ts to wrap the file parameter in a new WMLFileUploadZeroItem. This helps ensure that items are handled correctly in the form array, affecting how files are uploaded using the component. ,

v17.3.5110 [5/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.6000 [5/1/24]

• updated package to reflect the version ^17.3.6 of @angular/core package,

v17.3.7000 [5/9/24]

• updated package to reflect the version ^17.3.7 of @angular/core package,

v17.3.8000 [5/9/24]

• updated package to reflect the version ^17.3.8 of @angular/core package,

v17.3.9000 [5/16/24]

• updated package to reflect the version ^17.3.9 of @angular/core package,

v18.0.1 [5/22/24]

• updated package to reflect the version ^18.0.0 of @angular/core package,

v18.0.4 [5/25/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.1000 [5/29/24]

• updated package to reflect the version ^18.0.1 of @angular/core package,

v18.0.2000 [6/6/24]

• updated package to reflect the version ^18.0.2 of @angular/core package,

v18.0.3000 [6/13/24]

• updated package to reflect the version ^18.0.3 of @angular/core package,

v18.0.3010 [6/18/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.4000 [6/23/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.5000 [6/26/24]

• updated package to reflect the version ^18.0.5 of @angular/core package,

v18.0.6000 [7/5/24]

• updated package to reflect the version ^18.0.6 of @angular/core package,

v18.1.4 [7/13/24]

• updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.6 [7/14/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.1000 [7/18/24]

• updated package to reflect the version ^18.1.1 of @angular/core package,

v18.1.2000 [7/24/24]

• updated package to reflect the version ^18.1.2 of @angular/core package,

v18.1.2300 [7/27/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.2301 [7/30/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta1 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta2 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta3 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta4 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3001 [8/4/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/4/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3003 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3004 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3005 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3006 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3007 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4000 [8/14/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4001 [8/14/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.0 [8/15/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1 [8/20/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1000 [8/22/24]

• updated package to reflect the version 18.2.1 of @angular/core package

v18.2.2000 [8/30/24]

• updated package to reflect the version 18.2.2 of @angular/core package

v18.2.2100 [9/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2101 [9/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2200 [9/3/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3000 [9/4/24]

• updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3100 [9/8/24]

• updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3110 [9/10/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3112 [9/10/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3200 [9/16/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.4000 [9/16/24]

• updated package to reflect the version 18.2.4 of @angular/core package

v18.2.4100 [9/19/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.4200 [9/21/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.5001 [9/22/24]

• updated package to reflect the version 18.2.5 of @angular/core package

v18.2.6000 [10/1/24]

• updated package to reflect the version 18.2.6 of @angular/core package

v18.2.7000 [10/2/24]

• updated package to reflect the version 18.2.7 of @angular/core package

v18.2.7001 [10/5/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.7010 [10/9/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.7020 [10/10/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.8000 [10/10/24]

• updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8000 [10/11/24]

• updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.9000 [10/23/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.10000 [10/31/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.11000 [11/7/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.12000 [11/15/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.12001 [11/17/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.0 [11/19/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.3 [11/20/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.4 [11/26/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.1000 [11/26/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.2000 [12/4/24]

• updated package to reflect the version 19.0.2 of @angular/core package

v19.0.3000 [12/6/24]

• updated package to reflect the version 19.0.3 of @angular/core package

v19.0.4000 [12/12/24]

• updated package to reflect the version 19.0.4 of @angular/core package

v19.0.5000 [12/19/24]

• updated package to reflect the version 19.0.5 of @angular/core package

v19.0.5100 [12/29/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.6000 [1/12/25]

• updated package to reflect the version 19.0.6 of @angular/core package

v19.0.7000 [1/16/25]

• updated package to reflect the version 19.0.7 of @angular/core package

v19.1.0 [1/17/25]

• updated package to reflect the version 19.1.0 of @angular/core package

v19.1.1000 [1/17/25]

• updated package to reflect the version 19.1.1 of @angular/core package

v19.1.2000 [1/23/25]

• updated package to reflect the version 19.1.2 of @angular/core package

v19.1.3000 [1/23/25]

• updated package to reflect the version 19.1.3 of @angular/core package

v19.1.3100 [1/23/25]

• update package to support the react native ecosystem

v19.1.3111 [1/27/25]

• updated package to conform with @windmillcode/wml-components-base

v19.1.3112 [1/28/25]

• updated package to conform with @windmillcode/wml-components-base

v19.1.4000 [1/31/25]

• updated package to reflect the version 19.1.4 of @angular/core package

v19.1.5000 [2/8/25]

• updated package to reflect the version 19.1.5 of @angular/core package

v19.1.6000 [2/13/25]

• updated package to reflect the version 19.1.6 of @angular/core package

v19.1.7000 [2/21/25]

• updated package to reflect the version 19.1.7 of @angular/core package

v19.1.8000 [3/4/25]

• updated package to reflect the version 19.1.8 of @angular/core package

v19.2.0 [3/4/25]

• updated package to reflect the version 19.2.0 of @angular/core package

v19.2.1000 [3/9/25]

• updated package to reflect the version 19.2.1 of @angular/core package

v19.2.2000 [3/15/25]

• updated package to reflect the version 19.2.2 of @angular/core package

v19.2.3000 [3/21/25]

• updated package to reflect the version 19.2.3 of @angular/core package

v19.2.4000 [3/27/25]

• updated package to reflect the version 19.2.4 of @angular/core package

v19.2.5000 [4/3/25]

• updated package to reflect the version 19.2.5 of @angular/core package

v19.2.5001 [4/6/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.5100 [4/10/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.6000 [4/10/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.7000 [4/21/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.8000 [4/24/25]

• updated package to reflect the version 19.2.8 of @angular/core package

v19.2.9000 [5/1/25]

• updated package to reflect the version 19.2.9 of @angular/core package

v19.2.10000 [5/8/25]

• updated package to reflect the version 19.2.10 of @angular/core package

v19.2.11000 [5/15/25]

• updated package to reflect the version 19.2.11 of @angular/core package

v19.2.12000 [5/22/25]

• updated package to reflect the version 19.2.12 of @angular/core package

v19.2.13000 [5/24/25]

• updated package to reflect the version 19.2.13 of @angular/core package

v19.2.14000 [5/28/25]

• updated package to reflect the version 19.2.14 of @angular/core package