1.2.7 • Published 6 years ago
fileuploader v1.2.7
fileuploader
File uploader component in Angular2
Installation
recommended way to install is through npm package manager using the command:
npm install fileuploader --save
Documentation
Inputs
type
(string
) - used to identify how the files will be handled, currently only image has particular handlingcpntID
(string
) - the id of the component, used to facilitate testingaccepted
(string
) - a string that dictates which types of archives will show up on the upload dialogmaxSize
(number
) - the maximum size a file can have to be allowed, expressed in bytes i.e: 1000 = 1 kbmultiple
(boolean
) - if the component will take multiple files, default is trueencode
(boolean
) - if the component will generate a base64 string of the uploaded files, default falseinvalidFilemsg
(string
) - used to show the alerts for files that failed to load, default is "Invalid File", ": " is added automaticallyinvalidFormatmsg
(string
) - used to show the alerts for invalid format, default is "Invalid Format", used for images mainly
Outputs
results
: currently only used for image type inputsfail
: A string containing the names of all files that couldn't be uplaoded, normally caused if the file is over the maxSize
Fields
files
(File[]
) : holds the files uploaded to the component, used if the multiple input is set to truemFile
(File
) : holds the single file uploaded, used when multiple is set to falseencoded
(string[]
) : holds the base64 of all files uploaded to the component, empty if encode = falsefailed
(string[]
) : holds the names of all files that failed to upload;
Snippets
Below is an example of a basic template, it can also be found in the snippets folder;
<div class="mt-4" style="height:360px;">
<uploader #uploader (results)="handleResults($event)" [cpntID]="'input_add_files'" [accepted]="'.xml,.zip'">
<uploader-without-file>
<div class="text-md-center">
<h5 class="pt-3">Drag your files here</h5>
<div class="mt-3">
<a class="btn btn-secondary" id="button_add_files" (click)="uploader.addFiles()">Select the files</a>
</div>
<div class="mt-3">
<b>Atention:</b> Only XML or ZIP files are accepted.
</div>
</div>
</uploader-without-file>
<uploader-with-file>
<ul class="list-group">
<li class="list-group-item" *ngFor="let f of uploader.files">
<small>{{f.size / 1024 | number : '1.0-0'}} KB</small> {{f.name}}
<a class="clickable float-md-right" id="button_delete_file" (click)="deleteFile(f)">
X
</a>
</li>
</ul>
</uploader-with-file>
</uploader>
</div>
1.2.7
6 years ago
1.2.6
6 years ago
1.2.5
6 years ago
1.2.4
6 years ago
1.2.3
6 years ago
1.2.2
6 years ago
1.2.1
7 years ago
1.2.0
7 years ago
1.1.9
7 years ago
1.1.8
7 years ago
1.1.7
7 years ago
1.1.6
7 years ago
1.1.5
7 years ago
1.1.4
7 years ago
1.1.3
7 years ago
1.1.2
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago