Filepond: Option to disable uploadButton and revertButton

Created on 15 Feb 2019  路  15Comments  路  Source: pqina/filepond

Hey, is it possible to add a parameter to hide uploadButton and revertButton?

It would be very helpful if we want to handle the process when clicking on a submit form button, users will not be able to upload the file by clicking on the filepond button or revert once uploaded.

Actually buttons are displayed and users can trigger them with buttons.

Thanks! 馃槉

enhancement

Most helpful comment

allowProcess is now available in 4.17.0
https://github.com/pqina/filepond/releases/tag/4.17.0

All 15 comments

My workaround for this was to use custom css to hide the process button, which is not safe by any chance but on a normal usage would prevent users from triggering single uploads. You would still need to provide a backend check to detect single-file uploads.

.filepond--action-process-item{
    visibility:hidden;
}

The revert one should be removable through the instance option allowRevert, or at least that worked for me.

This is a good trick for the process button, thank you!

Maybe a allowProcess would be implemented as well as the allowRevert?

@HapLifeMan If I understand correctly users can add files and can only remove them. They click a separate control outside of FilePond and this control triggers FilePond to start uploading the files asynchronously to the server?

Some more information might be helpful to find a suitable solution. So I wonder why the user is not allowed to click the upload button?

Yes @rikschennink this is exactly what I want to do in this case!

Of course: I want only one button to update user information that will validate the entire form then update information if validation was correct. It is more understandable for the user and provides a better user experience because two different methods to save information (profile picture or username/email) is confusing. It also prevents to have multiple buttons with the "circle compact" version, very useful for a minimalist design 馃槉

But you don't want to upload automatically on drop?

Nope, I want to trigger manually the upload by clicking on the separate button :)

I also want an easy way to hold off the upload of the file until the user clicks a button. I want the user enter some data enter the file they want to upload then click a submit button. when the button is clicked all data should be sent via ajax. I want to get access to it with express using req.body orreq.files. Thanks.

Hi there,
+1
I'm looking for this too. An example of a well known product that uses this UI interaction would be Slack. Notice on file upload the user can add description, and start the upload on all files. The user cannot individually upload each file.

Hi there too,

It麓s just what I麓m looking for ohhh 馃槺 !!
Also I麓ve tried many ways to "hide" o "disable" Upload Button in the top right corner of card file, but I haven麓t succeeded 馃槩. I麓ve already tried with the property:

FilePond.setOptions({
    allowProcess = false
});

, but this doesn麓t work (at least when i wrote this comment).

The only thing that works right by the moment (or pretend resolve this one) is the @Silver96's answer just some comments above => https://github.com/pqina/filepond/issues/238#issuecomment-464344500.

I see this issue was opened over 1 year ago... I though this whould be resolved about these days, but not. I麓d like that, if were possible, to add this new property to FilePond like the:

allowRevert = false

property, this would be really helpfull please !!
Cheers.

allowProcess is now available in 4.17.0
https://github.com/pqina/filepond/releases/tag/4.17.0

Thank you @rikschennink, great job 馃槉馃檹馃徎

Thanks so much @rikschennink, this new version was released exactly in the perfect moment 馃憦馃徎.

Fantastic. This is a crucial functionality, thank you for adding it. I just updated my filepond version to the latest.

Would it be possible to update the docs, @rikschennink ? This does not appear in the Properties section

@Danscap Just added it to the docs repository, will be uploaded later.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

oldrich-s picture oldrich-s  路  5Comments

mvrhov picture mvrhov  路  4Comments

Strenget picture Strenget  路  6Comments

lvidrashchuk picture lvidrashchuk  路  3Comments

Chak10 picture Chak10  路  3Comments