Filepond: How to disable the Filepond Instance

Created on 10 Nov 2018  路  11Comments  路  Source: pqina/filepond

Hi, First off... amazing library!

Usually you can disable fields with the attribute disabled="disabled". How do you disable filepond via it's options. PS I'm using the Angular Filepond Version.

ie. I want the filepond instance to be a read-only input...

Thank you for your contribution 馃枻

enhancement

Most helpful comment

Hmm, good one! Would be nice to read the readonly and disabled attribute by default.

In the meantime you could use the allowDrop, allowBrowse, and allowPaste properties to disable file input. If you've got files in the list you might have to disable the remove buttons as well using CSS.

All 11 comments

Hmm, good one! Would be nice to read the readonly and disabled attribute by default.

In the meantime you could use the allowDrop, allowBrowse, and allowPaste properties to disable file input. If you've got files in the list you might have to disable the remove buttons as well using CSS.

A readOnly or disabled prop (flag) would be useful for me as well , if you've got time to get to it :)

Just published version 4.2.0 which adds disabled feature.

Set disabled as a property or as an attribute to the file input and the field will be disabled.

This means:

  • Browsing, dropping, and pasting will no longer work.
  • File buttons will be disabled.
  • Hidden input fields will be disabled as well.
  • Opacity on drop label is set to 0.5.

Let me know if this solves the issue

Testing it right now , I'll let you know if I get into any issue.

Thanks !!

works as expected 鉁ㄢ湪

your dedication is everything
thanks @rikschennink

just add it to the docs too

@rogeliotg done

when a file pond instance is disabled there is no way to re-enable it, setting option disabled=false; does not enable the file pond instance, is there a way of re-enabling that file pond instance.

@kulnaman fixed in 4.3.9

@rikschennink Hi I am trying to use disabled property but its not working. Would please assist.
[disabled]="uploadState === 'completed'"
[options]="pondOptions"
[files]="pondFiles"
(oninit)="pondHandleInit()"
(onaddfile)="pondHandleAddFile($event)">

@rikschennink Thanks for this great library. I had a use case where I didn't want the user to change any already uploaded file.

I didn't know that it was as simple as just changing the property of the input tag.

Was this page helpful?
0 / 5 - 0 ratings