pivan / file-upload Goto Github PK
View Code? Open in Web Editor NEWdrag and drop file component
License: MIT License
drag and drop file component
License: MIT License
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>
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Users\\Saurabh\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'i',
1 verbose cli '@iplab/[email protected]' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 6343f7876289a315
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 401 https://registry.npmjs.org/@iplab%2fngx-file-upload 742ms
8 silly fetchPackageMetaData error for @iplab/[email protected] 401 Unauthorized: @iplab/[email protected]
9 timing stage:rollbackFailedOptional Completed in 16ms
10 timing stage:runTopLevelLifecycles Completed in 10420ms
11 verbose stack Error: 401 Unauthorized: @iplab/[email protected]
11 verbose stack at fetch.then.res (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\pacote\lib\fetchers\registry\fetch.js:42:19)
11 verbose stack at tryCatcher (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
11 verbose stack at Promise._settlePromiseFromHandler (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
11 verbose stack at Promise._settlePromise (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
11 verbose stack at Promise._settlePromise0 (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
11 verbose stack at Promise._settlePromises (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
11 verbose stack at Async._drainQueue (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\async.js:133:16)
11 verbose stack at Async._drainQueues (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\async.js:143:10)
11 verbose stack at Immediate.Async.drainQueues (C:\Users\Saurabh\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
11 verbose stack at runCallback (timers.js:810:20)
11 verbose stack at tryOnImmediate (timers.js:768:5)
11 verbose stack at processImmediate [as _immediateCallback] (timers.js:745:5)
12 verbose cwd D:\workbench\aqua-sense\aquasense-webapp
13 verbose Windows_NT 10.0.17134
14 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Saurabh\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "i" "@iplab/[email protected]"
15 verbose node v8.11.2
16 verbose npm v6.4.1
17 error code E401
18 error 401 Unauthorized: @iplab/[email protected]
19 verbose exit [ 1, true ]
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
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.
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:
file-upload/src/lib/file-upload.module.ts
Line 30 in cc672f3
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>
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?
Thanks!
When i uploading the 3gpp/x-flv files this error shows
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,
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)"
I want to call function on every change ether for selecting in input or by dropping file in file-upload
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.