pivan / file-upload Goto Github PK

I use ng serve --aot

It allows to put any type of files and it seems that it doesn't work properly.

Also, when I use image/* pattern - it shows all visible files in a folder instead of https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_accept

<file-upload ngModel accept="file_extension|audio/*|video/*|image/*|media_type" name="files"></file-upload>

Is there a method which can be used to avoid file having the size of 0 byte

When I set an empty accept value, it throws the following exception:

ERROR TypeError: Cannot read property 'split' of undefined
    at FilesAcceptValidator.push../node_modules/@iplab/ngx-file-upload/fesm5/iplab-ngx-file-upload.js.FilesAcceptValidator._createValidator (iplab-ngx-file-upload.js:3203)
    at FilesAcceptValidator.push../node_modules/@iplab/ngx-file-upload/fesm5/iplab-ngx-file-upload.js.FilesAcceptValidator.ngOnChanges (iplab-ngx-file-upload.js:3166)

HTML:

<file-upload [accept]="this.accept"></file-upload>

TS:

public accept: string = null; // Or undefined.

There should probably an null|undefined check just before the split:

Version 1.5.0, because version 2.0.0 doesn't work for Angular 8.

Hi, I test file-upload with template-driven forms, and it works.
But it seemed validation not work. Below is my testing code:
`<form #demoForm="ngForm">
<file-upload [(ngModel)]="uploadedFiles" [disabled]="false" [filesize]="100000" [fileslimit]="2" accept="audio/*" name="files">

Whatever I select how big file, or many files, it not show error status.

Hi, I'm new to Angular,
In its Custom templates component, I would like to know how span works since when loading my image the first span does not disappear, it is always visible and the second span never appears.

<ng-template let-isFileDragDropAvailable="isFileDragDropAvailable" #placeholder> <span *ngIf="isFileDragDropAvailable">drop or click</span> <span *ngIf="!isFileDragDropAvailable">click</span> </ng-template>

Best regards, I hope you have given me to understand my English is somewhat limited

I'm using angular 10, when I drag and drop into the component a pdf file for example, don't show me any error and let me "adjunt" the file. In the next code I pass some parameters to the original component

<app-custom-upload id="otherPics" [accept]="'.jpeg,.jpg,.png'" [formGroup]="profileForm" [formName]="'otherPics'" [multipleFiles]="true" > </app-custom-upload>

Here the original component

<file-upload [formControlName]="formName" [multiple]="multipleFiles" [accept]="accept" >

Any idea?

If you open FileUploadService, it is convenient to read when the file size exceeds the limit.

for example: actual : 10240(byte) display: 10K

One of the reasons i chose this library, is how free it opens up to customize the interface within the drag area.

All that is good, but customizing the styling is abit painful when its encapsulated.

Would you be keen to open this up using Encapsulation.None?

The npm package @ipLabs/[email protected] still has peerDependencies to Angular 8 although the Changelog.md says:

2.0.0 (2020-02-26)
Features
angular update - Dependency update

package.json (2.0.2):
"peerDependencies": { "@angular/common": "^8.0.0", "@angular/core": "^8.0.0", "@angular/animations": "^8.0.0", "rxjs": "^6.4.0" }

Which results in the following npm output when used in an Angular 9 project:
npm WARN @iplab/[email protected] requires a peer of @angular/common@^8.0.0 but none is installed. You must install peer dependencies yourself.

Hello
I am facing some issue that how to clear the list when image uploaded to the server. Nothing found special in the documentation for this example. Using angular template driven forms.

Is it possible to have the same design that comes by default and only change the text to another language?
It is difficult for me to get the same design with the templates
http://prntscr.com/sdiapq

Thanks

The functionality of the uploader doesn't work with a major version of Angular 9.
As an example, it through the error in a dev console and as example, you can check it below:

could check extension name ignore case ?

We have upgraded from Angular 8 to 11 including this lib from 1.5.2 to 2.0.9. Since then the Remove is not performing any action. I have tried all versions between 2.0.0 and 3.1.0. It seems to only work until 2.0.3. Can you please check?

As the title suggest, last version (2.0.6) is missing angular 10 support.

npm i @iplab/ngx-file-upload@latest

npm WARN @iplab/[email protected] requires a peer of @angular/common@^9.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @iplab/[email protected] requires a peer of @angular/core@^9.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @iplab/[email protected] requires a peer of @angular/animations@^9.0.0 but none is installed. You must install peer dependencies yourself.

When upgrading Angular 9 to Angular 10, got warning message:

Package "@iplab/ngx-file-upload" has an incompatible peer dependency to "@angular/animations" (requires "^9.0.0 | ^10.0.0", would install "10.1.2").

Great Module. Works well...except...

I can debug, but when trying to build for production I get this error...

ERROR in Directive ɵa in D:/xampp7/htdocs/varive.app/node_modules/@iplab/ngx-file-upload/iplab-ngx-file-upload.d.ts has no selector, please add it!
Cannot determine the module for class ɵa in D:/xampp7/htdocs/varive.app/node_modules/@iplab/ngx-file-upload/iplab-ngx-file-upload.d.ts! Add ɵa to the NgModule to fix it.

greetings, this is a really awesome module, however I have one issue/ request.

In the documentation I see
<file-upload ngModel fileslimit="2" name="files"></file-upload>

But it doesn't seem to be limiting the number of files that can be added to the list.

Here is a snippet of my code am I doing something wrong?
<file-upload [(ngModel)]="blast.file" name="file" (ngModelChange)="onFileEmmit(blast.file)" animation="false" accept=".xlsx" fileslimit="1" required></file-upload>

Hi, I'm doing a dynamic form and the validations don't work for me. I've tried everything, I've even read all the closed issues, I'd appreciate your help.

At the moment this a little hardcoded, the idea is to take fields from a database and with those fields create a form.

this is the modal-participar.page.ts

this the HTML

this is the module

and a few screenshots

When you set the form element to disable and you have already file loaded the delete button works.
So, you can delete files in a disabled input file

Hi!

When using <input> with an accept attribute without any file-upload component from the library the FilesAcceptDirective seems to fire.

Example:

<form [formGroup]="form.group">
  <input formControlName="file"
         type="file"
         accept="image/*"
         (change)="onChange($event)"/> 
</form>

  form = new Form(new FormGroup({
    file: new FormControl('', [Validators.required]),
  }));

leads to following error after selecting a file, without even using your library in that case:

logger.service.ts:43 Error: FormControl.setValue was provided with wrong argument type, C:\fakepath\avatar.jpg was provided instead Array<File>
    at checkValueType (iplab-ngx-file-upload.js:2649)
    at FilesAcceptValidator.validator (iplab-ngx-file-upload.js:2843)
    at FilesAcceptValidator.push.../../node_modules/@iplab/ngx-file-upload/fesm5/iplab-ngx-file-upload.js.FilesAcceptValidator.validate (iplab-ngx-file-upload.js:3101)
    at forms.js:1191
    at forms.js:1170
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:1170)
    at forms.js:1132
    at forms.js:1170
    at Array.map

When removing the accept attribute the error doesn't occur.

Thank you!

Hi sir,

I am using this file upload in angular 7 when I am going to open my app it is showing Cannot find module 'google-code-prettify/bin/prettify.min.js' so how can i install this on node_module.

Thanks
Lokendra

Hi! Give me an scenario how to use with https://github.com/Mawi137/ngx-image-cropper/blob/master/README.md
Thanks!

Hi,

When I use validation of fileType and I run the code in Chrome or IE on Windows, it doesn't always accept my types.

This occurs for allowedTypes[] of ['.csv', '.xls', '.xlsx'] and with combinations of xlsx and csv files that I try to upload.

Importing FileUploadModule in any other module than root results in error:
Error: BrowserModule has already been loaded.

You might want to have FileUploadModule included only in one of your lazy-loaded modules, not in the entire app.

And this is happening because of BrowserAnimationsModule import:

That's bad. This module should not be imported in any library - it has to be left for the developers to decide if they want animations it their apps or not.

Just mention about animations somewhere like in readme.md as other packages do:
https://material.angular.io/guide/getting-started#step-2-configure-animations

Hi ,How to create a preview of the image ?

Can we show errors if errors? for example if file size is more than valid size. like this:

<div class="col-sm-12"> <div class="form-group"> <label for="userId" class="label">img</label> <file-upload [(ngModel)]="uploadedFiles" #fileInput="ngModel" name="files" fileslimit="1" accept=".jpg, .png, .jpeg" maxsize="10 MB" multiple="false" required> <ng-template let-isFileDragDropAvailable="isFileDragDropAvailable" #placeholder> <span *ngIf="isFileDragDropAvailable">click</span> <span *ngIf="!isFileDragDropAvailable">click</span> </ng-template> </file-upload> <ng-container *ngIf="fileInput.invalid && fileInput.touched"> <p class="caption status-danger" *ngIf="fileInput.errors?.required"> required </p> <p class="caption status-danger" *ngIf="fileInput.errors?.pattern"> not valid </p> </ng-container> </div> </div>

Hello, I am using your package with Angular Universal and I am getting an error: FormData is not defined

Could you say how I can fix it?

Version: "@iplab/ngx-file-upload": "3.1.1",

Declare file upload control
public fileUploadControl = new FileUploadControl( { multiple: false, discardInvalid: true, accept: ['image/*','application/json'] }, [ FileUploadValidators.filesLimit(1), FileUploadValidators.fileSize(1000000) ]);

Attempt to add second file

Notice error in console:

ERROR TypeError: error[Object.keys(...)[0]].forEach is not a function
at iplab-ngx-file-upload.js:465
at Array.forEach ()
at FileUploadControl.analyzeToDiscard (iplab-ngx-file-upload.js:462)
at FileUploadControl.addMultipleFiles (iplab-ngx-file-upload.js:449)
at FileUploadControl.addFiles (iplab-ngx-file-upload.js:289)
at FileUploadComponent.onInputChange (iplab-ngx-file-upload.js:1563)
at FileUploadComponent_Template_input_change_5_listener (iplab-ngx-file-upload.js:1650)
at executeListenerWithErrorHandling (core.js:15220)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:15255)
at HTMLInputElement. (platform-browser.js:582)

Hello,

Is there any plan to incorporate the (relatively new) directory attribute on the file input?

https://stackoverflow.com/questions/22041207/is-it-possible-to-upload-a-folder-using-html-form-php-script

Thanks!

When i uploading the 3gpp/x-flv files this error shows

when i use file-upload simple selector, accept attribute will not working

  <file-upload simple  formControlName="file"   maxsize="10MB"   accept=".png,.bmp,.jpeg,.jpg,.gif"  fileslimit="1" style="width: 100%>
</file-upload>

FileUploadValidators.filesLimit() does not work you can select multi files in dragandrop

I think it would be a good idea to add two directives to let user change the text showed in the upload-text. (Necessary for language translation)

I mean one directive as :
textStrong: with default would be "Drag and drop files"
text: with default would be "or click here"

Hello,

I have a problem with the library as it says in the title and this is an error I get in the console:

Error: Uncaught (in promise): ReferenceError: Can't find variable: DragEvent ../../node_modules/@iplab/ngx-file-upload/__ivy_ngcc__/fesm2015/iplab-ngx-file-upload.js@http://localhost:4200/wolkabout-dashboards.js:19570:93 __webpack_require__@http://localhost:4200/runtime.js:85:34 ../../libs/dashboards/src/lib/change-background/change-background-form/change-background-form.component.ts@http://localhost:4200/wolkabout-dashboards.js:831:99 __webpack_require__@http://localhost:4200/runtime.js:85:34 ../../libs/dashboards/src/lib/change-background/change-background.component.ts@http://localhost:4200/wolkabout-dashboards.js:934:134 __webpack_require__@http://localhost:4200/runtime.js:85:34 ../../libs/dashboards/src/lib/dashboards.module.ts@http://localhost:4200/wolkabout-dashboards.js:2747:124 __webpack_require__@http://localhost:4200/runtime.js:85:34 ../../libs/dashboards/src/index.ts@http://localhost:4200/wolkabout-dashboards.js:15:99 __webpack_require__@http://localhost:4200/runtime.js:85:34 __webpack_require__@[native code] onInvoke@http://localhost:4200/vendor.js:73750:39 run@http://localhost:4200/polyfills.js:346:53 http://localhost:4200/polyfills.js:1073:43 onInvokeTask@http://localhost:4200/vendor.js:73728:43 runTask@http://localhost:4200/polyfills.js:390:61 drainMicroTaskQueue@http://localhost:4200/polyfills.js:792:46 promiseReactionJob@[native code]

I'm aware of this https://stackoverflow.com/questions/56137343/angular-not-working-on-safari-browser-but-working-well-on-other-browsers, but I don't use DragEvent anywhere in the application.

Any ideas on fixing the issue?

Thanks

I'm trying to apply a pdf file filter, but it does not display error if I select other file types.

See here: https://stackblitz.com/edit/angular-file-upload-test

Hello,

sometimes (Chrome on Windows) the filetype can not be determined. Especially with Microsoft files (word, excel). Therefore my accept type validation fails.

Hello,

Is there any plan to add a property to the component to can customize the text that will be displayed on the drop zone area. For example to show the text in another language like that:

Thanks!

Hello,

I get the following error when I call my app under Safari:
ReferenceError: Can't find variable: DragEvent

Unfortunately I cannot do without safari even for mobile. Is there a wokraround for this problem?

Darg and Drop is not important, but changing the uploader is a lot of work.

Thanks

Hi,

I would like to create my own custom file-upload-list-item to be able to localize the "remove" button and style the file list.
Could you please add FileUploadIconComponent to the exports section, so that I can reuse the icon ?
Thanks

It shows me error like this. Can u help me solve?

ERROR in node_modules/@iplab/ngx-file-upload/animations/insert.animation.d.ts(1,45): error TS1005: ',' expected.
node_modules/@iplab/ngx-file-upload/animations/zoom.animation.d.ts(1,43): error TS1005: ',' expected.

Hello, it would be great if we could limit the number of files in the layout, not just on "FileUploadValidators.filesLimit(1)"

As you can see, I cannot bind maxsize to the component.
Moreover, there is no compile error due to attribute binding, but it appears when one-way binding.

Seems like it doesn't work (I've just printed control.getError().flat()[0]):

When I have [multiple]="false" it is possible to drag and drop multiple files.

The file-dialog correctly only allows one file.

Version 1.5.0, because version 2.0.0 doesn't work for Angular 8.

I want to call function on every change ether for selecting in input or by dropping file in file-upload