pqina / ngx-filepond Goto Github PK

Hi there,
First of all, thanks for the amazing project.
Currently filepond is gzipped at around 21k, but for most application, uploading service is not something that needs to be eager loaded. So it would be nice to have a lazyload feature out of the box.

I've managed to get the lazyload feature up and running fine under my branch: https://github.com/gogoout/ngx-filepond/tree/%40feature/lazyload

So instead of include filepond in the vendor, it will create a separate bundle by webpack.
The results are like (in development mode, so unminified):

original:

chunk {main} main.js, main.js.map (main) 25.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 387 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 770 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 65.8 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.17 MB [initial] [rendered]

now:

chunk {filepond} filepond.js, filepond.js.map (filepond) 263 kB  [rendered]
chunk {main} main.js, main.js.map (main) 41.2 kB [initial] [rendered]
chunk {plugins} plugins.js, plugins.js.map (plugins) 41.9 kB  [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 387 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 770 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 9.01 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 65.8 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.87 MB [initial] [rendered]

Does this looking good to you?

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe.

ngx-filepond lib in Angular 14 generates console warnings connected to filepond library and filepond plugins.

filepond lib seems to have the esm build in the node_modules, yet warnings are still visible.

Warning: /home/projects/node-uttar5/node_modules/ngx-filepond/__ivy_ngcc__/fesm2015/ngx-filepond.js depends on 'filepond'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Same warnings appear if any of the filepond plugins are used:

Warning: /home/projects/node-dzre4t/src/app/app.module.ts depends on 'filepond-plugin-file-validate-size'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/projects/node-dzre4t/src/app/app.module.ts depends on 'filepond-plugin-file-validate-type'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/projects/node-dzre4t/src/app/app.module.ts depends on 'filepond-plugin-image-crop'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/projects/node-dzre4t/src/app/app.module.ts depends on 'filepond-plugin-image-exif-orientation'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/projects/node-dzre4t/src/app/app.module.ts depends on 'filepond-plugin-image-preview'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/projects/node-dzre4t/src/app/app.module.ts depends on 'filepond-plugin-image-validate-size'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

To reproduce:
Open: https://stackblitz.com/edit/node-uttar5

Describe the solution you'd like

Is there any chance to get rid of these warnings?

Describe alternatives you've considered

Angular docs suggest adding CommonJS libs to exceptions, but it seems more like a temporary solution.

please support angular 7.1 to avoid following npm warning

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

npm 7.20.6
node v14.17.3
angular v11

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe.

Angular 14 now encourages to publish libraries as ivy distribution. This speeds up the build time for packages.

Describe the solution you'd like

Here's some guides that could help:

• https://blog.angular.io/upcoming-improvements-to-angular-library-distribution-76c02f782aa4
• https://angular.io/guide/creating-libraries#getting-started
• https://github.com/angular/ngcc-validation

Describe alternatives you've considered

No alternatives

On Angular CLI: 1.7.4/Angular: 5.2.11

I have added the Image Preview plugin but getting the following error on the console:

the following is my very basic app module

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FilePondModule, registerPlugin } from 'ngx-filepond';

import FilepondPluginImagePreview from 'filepond-plugin-image-preview';
registerPlugin(FilepondPluginImagePreview);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FilePondModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

I can see you only export registerPlugin from pond.
Can you export FileStatus enum so Angular devs can access it as well?
Cheers

Summary

Setting a custom fetch URL for the files object on another server doesn't work as expected

How to reproduce

I've tried multiple different ways to set the URL properly, here are a few scenarios:

1. Set the server base URL then set the file source in the file object

this.fileOptions.server.url = 'http://otherserver.com/api'
this.thumbnailFiles = [{source: '12345', options: 'local'}];

This results in the client code's browser URL being used as the base, in this case localhost

VM9523:1 GET http://localhost:4200/12345 404 (Not Found)

2. Set the server base URL to '' then set the source as the complete URL to the image

 filesOptions = {
    acceptedFileTypes: 'application/pdf',
    allowMultiple: false,
    // don't allow revert since we are doing a manual delete
    allowRevert: false,
    labelIdle: 'Drop files here or click to browse',
    server: '',
  };

 this.thumbnailFiles = [{source: 'https://otherserver.com/filename', options: 'local'}];

This sets the client URL then appends the entire source, in this case localhost + source value

3. Set server URL then use entire source URL in the file config

this.fileOptions.server.url = 'http://otherserver.com/api'
this.thumbnailFiles = [{source: 'https://otherserver.com/filename', options: 'local'}];

I only include this configuration because the output now includes the server URL unlike 1 but then appends entire URL for source to the end.

I've also tried setting the fetch URL in the FilePond config with the same results.

Expected behaviour

Fetch + File Source
https://otherserver.com/filename

Hello!

What about chunkUploads and patch in server configurations?

My params:

  pondOptions = {
    multiple: true,
    labelIdle: 'Нажмите, чтобы добавить файлы или перенести их сюда',
    chunkUploads: true,
    chunkSize: 100000,
    server: {
      url: 'http://localhost:4200/fp/',
      process: {
        url: './process/',
        method: 'POST',
        onload: (response) => response.key,
        onerror: (response) => response.data,
        ondata: (formData) => this.getFormData(formData)
      },
      revert: './revert/',
      restore: './restore/',
      load: './load/',
      fetch: './fetch/',
      patch: './patch/',
      headers: {
        'Authorization': localStorage.getItem('authorization'),
      }
    },
  };

But undefined is sent to server instead of chunk ID:

Project Angular version 7.2.1

Is there any way to check the validity status of a FilePond component used in an Angular application?

I'm using the file size validation plugin and my usecase is that I want to prevent users from submitting when an incorrect file has been chosen. Visually, the FilePond component indicates when a file is invalid, however, I can't see any way that the API lets me check this from my own code?

FYI: I've posted a similar question on Stack Overflow, but no success so far.

File upload on drag&drop is not working in IE11

How to reproduce

I am using Filepond file upload in Angular app. When I drag a file over file upload element in IE11, I am not able to upload it. There are no errors, it just does not work.

Expected behaviour

When I am dragging a file over file upload in another browsers, I see data-hopper-state is changing, but in IE I don't see it

Additional information

Here are dependencies in package.json

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "filepond": "^4.12.0",
    "filepond-plugin-file-encode": "^2.1.4",
    "filepond-polyfill": "^1.0.4",
    "ngx-filepond": "^5.0.1",
    "prismjs": "^1.19.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.8.26"
  }

I import filepond polyfill in polifills.ts file:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
import 'core-js/es7/object';
import 'core-js/es7/array';
import 'filepond-polyfill';

import 'web-animations-js';  // Run `npm install --save web-animations-js`.

Hi @pqina , have you planned to add support to SSR?

Hello

I tried since 1 day try to remove allready uploaded files.

I treid with

this.myPond.removeFile();

• this just remove the first file in the pond and only when upload is finished
• im also not able to read the id from the file which is uploaded even my server returns an id.

also this are my pond options

    pondOptions = {
        class: 'my-filepond',
        multiple: true,
        labelIdle: 'Drop files here',
        instantUpload: true,
        server: {
            url: 'http://localhost/exxas/api',
            process: (fieldName, file, metadata, load, error, progress, abort) => {


                const request = new XMLHttpRequest();
                request.open('POST', 'http://localhost/api/proxy/upload');

                request.upload.onprogress = (e) => {
                    progress(e.lengthComputable, e.loaded, e.total);
                };

                request.onload = () => {
                    if (request.status >= 200 && request.status < 300) {
                        load(request.responseText);

                    } else {
                        // Can call the error method if something is wrong, should exit after
                        error('oh no');
                    }
                };

                request.send(formData);

                return {
                    abort: () => {
                        request.abort();
                        abort();
                    }
                };
            },
            revert: './revert.php',
            restore: './restore.php?id=',
            fetch: './fetch.php?data='
        },
    };

Does anybody have an approach to delete allready uploaded files in filepond?

Thanks in advance.

Kind regards

Does ngx-filepond have support for Angular 9 yet? We are looking to upgrade to Angular 9 but couldn't find anywhere online if filepond will work there or not.

I create an image file from a blob and use the addFile function

const imageFile = new File([filecontent], filename, { type: contentType });
this.filePond.addFile(imageFile);

the file gets added but the preview doesn't render and debugging shows the image plugin code doesn't get invoked

Hello!

Could you show a project with working code or code snippets?
I am not getting the form to be sent, I am using ReactiveFormModule to send it, but it is empty.

FilePond does not return the submitted image id and also does not send anything when deleting an image, it ends up being an empty DELETE for the API.

Can you help me?

Summary

Examples not working. Because type definitions are different from examples:

<file-pond> doesn't have the properties used in examples:

How to reproduce

Just install the latest version of ngx-filepond, and try example.

Is there an existing issue for this?

• I have searched the existing issues

Have you updated Angular FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

When running application I get the error:

filepond.js:12458 Uncaught TypeError: plugin is not a function
    at createAppPlugin (filepond.js:12458:29)
...
    at registerPlugin (filepond.js:12695:21)
...

Running:
filepond: 4.30.4
filepond-plugin-file-validate-type: 1.2.8
ngx-filepond: 6.0.1

Angular: 13
Node: 16

Importing via module:

import * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import { FilePondModule, registerPlugin } from 'ngx-filepond';
registerPlugin(FilePondPluginFileValidateType);

I logged out registerPlugin and FilePondPluginFileValidateType and get the the following:

registerPlugin:  ƒ registerPlugin() {
      for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
        plugins[_key] = arguments[_key];
      } // register plugins


      plu…
FilePondPluginFileValidateType:  Module {__esModule: true, Symbol(Symbol.toStringTag): 'Module'}

Issue started after an upgrade to Angular 13 and upgrading filepond packages to their latest versions.

Reproduction

Import filepond packages and register the plugin for File Validation.

Environment

- Device: Computer
- OS: Windows 10
- Browser: Chrome
- Angular version: 13

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

Im using angular and trying to use onreorderfiles() callback but nothing happens.

my html:

<file-pond
  #myPond
  name='UploadForm[imagem][]'
  [options]="pondOptions"
  (oninit)="pondHandleInit()"
  [files]="pondFiles"
  (onaddfile)="pondHandleAddFile($event)"
  (onactivatefile)="pondHandleActivateFile($event)"
  (onremovefile)="pondHandleRemove($event)"
  (onreorderfiles)="pondHandleReOrder($event)"
/>

my func:

pondHandleReOrder(event: any) {
        console.log(event.pond.getFiles(), 'AQUI')

    }

Reproduction

1. create a new angular app
2. setup filepond
3. try to use onreorderfiles callback

Environment

- Device: PC
- OS: Ubuntu 20.04.6 LTS 
- Browser: Chrome Version 120.0.6099.129 64 bits

Hello guys,

I have a problem with angular universal and filepond-plugin-image-exif-orientation when I try to build an application.
Although I added that:
global['Image'] = window.Image;

The error message is:
var testImage = new Image();
^
ReferenceError: Image is not defined
at C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:234494:19
at C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:234397:25
at Object../node_modules/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:234399:3)
at webpack_require (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:20:30)
at Object../src/app/shared/modules/filepond.module.ts (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:442727:50)
at webpack_require (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:20:30)
at Object../src/app/shared/modules/index.ts (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:442770:22)
at webpack_require (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:20:30)
at Object../src/app/shared/shared.module.ts (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:443108:19)
at webpack_require (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:20:30)
at Object../src/app/app.module.ts (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:441503:25)
at webpack_require (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:20:30)
at Object../src/app/app.server.module.ts (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:441628:22)
at webpack_require (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:20:30)
at Object../src/main.server.ts (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:445505:27)
at webpack_require (C:\Users\username\Documents\angular-angularmaterial\dist\server\main.js:20:30)

Is there an existing issue for this?

• I have searched the existing issues

Have you updated Angular FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

As per an example in the readme trying to use import { FilePondComponent } from 'ngx-filepond'; generates error Error: export 'FilePondComponent' (imported as 'FilePondComponent') was not found in 'ngx-filepond' (possible exports: FilePondModule, registerPlugin, ɵa), am i missing something here, sorry if it's something obvious.

Reproduction

Install and try to import.

Environment

- Device: computer
- OS: macOS 11
- Browser: Chrome 110
- Angular version: 13.0.3

Error

TypeError: getNumericAspectRatioFromString is not a function

Summary

// Angular Module

import { FilePondModule, registerPlugin } from "angular-filepond";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm";
import FilePondPluginImagePreview from "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm";
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.esm";
import FilePondPluginImageResize from "filepond-plugin-image-resize/dist/filepond-plugin-image-resize.esm";
import FilePondPluginImageTransform from "filepond-plugin-image-transform/dist/filepond-plugin-image-transform.esm";
import FilePondPluginImageCrop from "filepond-plugin-image-crop/dist/filepond-plugin-image-crop.esm";

registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform
);

// HTML

<FilePond #LogoUploadFilePond
acceptedFileTypes="image/png, image/jpeg, image/gif"
labelIdle='Drag & Drop your picture or Browse'
imagePreviewHeight=170
imageCropAspectRatio="1:1"
imageResizeTargetWidth=200
imageResizeTargetHeight=200
stylePanelLayout="compact circle"
styleLoadIndicatorPosition='center bottom'
styleProgressIndicatorPosition='right bottom'
styleButtonRemoveItemPosition='left bottom'
styleButtonProcessItemPosition='right bottom'

Additional information

Please help how to manage backend api calls

Hi,

I'm trying your angular adapter and from the docs, my expectation was that by adding the plugin FilePondPluginFileValidateType, the default implementation would return the label 'File of invalid type' when dropping an item outside of the allowed types.
The logic seems to work, however, the label I'm getting looks like:

my markup

<file-pond [options]="pondOptions" (onerror)="onUploadError($event)">
    </file-pond>

my config on .ts

this.pondOptions = {
      class: 'my-filepond',
      multiple: true,
      instantUpload: true,
      acceptedFileTypes: ACCEPTED_FILES,
      server: {
        url: baseUrl,
        process: {
          url: `/${controller}/${id}/UploadAttachment`,
          method: 'POST',
          withCredentials: true,
          timeout: 7000,
        },
      },
    };

If my expectation is incorrect, how can I override the default label? I didn't find on the docs.
Thanks in advance!

Hello fellow developer!

🐜 If you've found a bug, please use the template below to report it.

When we try to attach a csv file, the library isn't able to identify this kind of file.
I've been trying to attach and filter files by application/csv or text/csv, nevertheless, as you can see on the screenshots, it doesn't get the type.

The more details you provide, the more inclined other developers are to help you and the faster the problem is resolved.

If you think the issue is related FilePond itself and not the Angular framework or adapter, please submit the issue in the FilePond repository.

Please format code snippets using backticks and don't forget to set the appropriate language.
https://help.github.com/articles/creating-and-highlighting-code-blocks/

Summary

How to reproduce

Attach any csv file and check the type value.

Expected behavior

I should see the type in the Object.

Additional information

How can I use with HttpInterceptor for adding jwt token?
Thanks

Feature Request

https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#methods defines a set of methods that can be called on a filepond instance. These methods are not found in the type definition of the FilepondComponent thus throwing build time errors when trying to access them. Though with some testing these methods work when called. Can these methods be added to the FilePondComponent?

most of the angular lib NPM packages keep dependencies in devDependencies and only required dependencies in peerDependencies and optional in optionalDependencies

otherwise you will be locking your lib users to have specific version of @angular/forms etc.
not all users need forms http animations modules.

Would be nice of you change your package.json like this.

  "peerDependencies": {
    "@angular/core": ">=5.0.0 <7.0.0"
  }


"optionalDependencies": {
    "filepond-plugin-file-validate-type": "^1.1.0"
  },

  "devDependencies": {
    "filepond": "^1.5.2",
    "@angular/animations": "^6.0.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26",
    "@angular-devkit/build-angular": "~0.6.3",
    "@angular/cli": "~6.0.3",
    "@angular/compiler-cli": "^6.0.2",
    "@angular/language-service": "^6.0.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^2.4.5",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

In the readme also specify that you need to install filepond (not just ngx-filepond).

npm install --save filepond

I am seeing a shadow under the uploaded image..

Summary

onactivatefile event described in Callbacks section at https://pqina.nl/filepond/docs/patterns/api/filepond-instance/
But no such event written in this ngx-filepnd latest version.

How to reproduce

Using the following code, pondHandleClickFile doesn't get fired when a file is clicked.

<file-pond #myPond
[options]="pondOptions"
[files]="pondFiles"
(oninit)="pondHandleInit()"
(onaddfile)="pondHandleAddFile($event)"
(onactivatefile)="pondHandleClickFile()">

Expected behaviour

pondHandleClickFile should be fired when a file is clicked.

Additional information

Thank you for this library and the Angular Adapter. I have been searching for something like this for a while.

I see how to set options and receive callbacks, but I don't see how to register a hook for 'beforeAddFile'. My goal is to allow a drag/drop of a directory. My beforeAddFile hook would then allow me to accept only a specific set of files by returning true, and false for all others.

I'm not quite sure how to register the hook through the adapter though. Can you point me in the right direction?

Thanks!

Summary

        acceptedFileTypes: "image/png, image/jpeg, image/gif",
        labelIdle: `Drag & Drop your picture or <span class="filepond--label-action">Browse</span>`,
        imagePreviewHeight: 130,
        imageCropAspectRatio: "1:1",
        imageResizeTargetWidth: 150,
        imageResizeTargetHeight: 150,
        stylePanelLayout: "compact circle",
        styleLoadIndicatorPosition: "center bottom",
        styleProgressIndicatorPosition: "right bottom",
        styleButtonRemoveItemPosition: "left bottom",
        styleButtonProcessItemPosition: "right bottom",
        server: {
            url: "http://localhost:8000",
            process: "/process",
            revert: "./revert",
            restore: "./restore/",
            load: "./load/",
            fetch: "./fetch/"
        }
    };

Expected behaviour

I need to get upload button and would like to upload a file manually

Hi there,

I'm getting " Unhandled Rejection (SecurityError): The operation is insecure." error on mobile browser only.

It works fine on desktop.

Please advise

Hi,

I'm trying to make my angular filepond accepts only pkcs12 (.pfx extension) files using filepond-plugin-file-validate-type. The expected behaviour is that when the dialog to select file opens, only .pfx files would be listed. However, no files are displayed.

I'm doing in this way:

TS

    @ViewChild('myPond', { static: false }) myPond: any;

    pondOptions = {
        acceptedFileTypes: 'application/x-pkcs12'
    }

html

<file-pond #myPond 
    [options]="pondOptions" 
    (onaddfile)="pondHandleAddFile($event)" 
    (onremovefile)="showPasswordSection = false">
</file-pond>

It's important to say that another file types validation such as image/* works perfectlly.

I'm using Angular 8.