How does filterOptions work on upload fields?

default discord avatar
iamlinkus
2 months ago
7

I've read the docs for this (

https://payloadcms.com/docs/fields/upload#filtering-upload-options

), but I still don't get what's possible with this and also, it doesn't seem to work as I expect it to.



I have a

media

collection which accepts any file with mimeType

image/*

.



Then I have an upload field in a global, which looks like this:



                {
                  name: "brand",
                  type: "upload",
                  relationTo: "media",
                  filterOptions: {
                    mimeType: { equals: "image/svg+xml" },
                  },
                },


I expect it to:


1. Filter out the possible options when choosing from existing uploads in the

media

collection and show only svg files.


2. Prevent the user from uploading (and then saving) non-svg files.



It doesn't do either. When choosing from existing, it shows all the images, both svg and jpegs and the user is able to select a jpeg and then save the global. And the user also is able to upload non-svg files, which in turn let's the user also save the collection (which should be against the rule set by filterOptions).



What am I not getting here? What can the filterOptions actually do and if it can't do what I'm expecting, how can I do it so that the only possibility for this upload field for both uploading and selecting would be svg files?

  • default discord avatar
    tylandavis
    2 months ago

    Not sure why #1 isn't working for you. I just tried it with an upload field on one of my collections and its filtering as expected.



    for #2, I think it's correct that users can upload any file (technically the upload functionality here is independent of the collection/global you are currently editing), and when trying to save that file it throws an error.



    I think there may be some other issue going on, as it's working as expected for me.

  • default discord avatar
    iamlinkus
    2 months ago

    hmm super strange 🙃

  • default discord avatar
    akacronos
    2 months ago

    to prevent the upload of formats, you probably need a fieldhook/collection hook.



    https://payloadcms.com/docs/hooks/fields
  • default discord avatar
    iamlinkus
    2 months ago

    well the easiest way would be adding “accept” attribute that would align with a rule on that field, this would limit the types of files that the user is able to select in the browse dialog



    ofcourse a hook is something that I’d have to use to handle a drag/drop scenario too, rejecting the wrong format



    I wish there was a built in rule in payload for the upload field that would handle mimetype limitations when uploading files through the browse dialog and drag/drop. Is that something you ever considered @jmikrut ?

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.