Custom Fields
Re-Envisioned
Support MB Frontend Submission Thumbnail field in frontend form allows any file type

  • Creator
    Topic
  • #16732
    Ryan Lauritsen
    Participant

    Should the thumbnail field in a frontend form allow any file type to be uploaded?

    I think the thumbnail field is a file upload field type, currently. I’m able to upload a PDF as a thumbnail. Seems like it should be an image upload field type so that it only allows uploading of image file types.

    If it is intended to be a file upload field type (allow any type of file to be uploaded), then how can I restrict it to certain file types?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #16735
    Anh Tran
    Keymaster

    Hi Ryan, thanks for your feedback. The field actually doesn’t filter the file type. There’s a small workaround for that which limits the default file picker:

    add_filter( 'rwmb_frontend_post_thumbnail', function( $field ) {
        $field['attributes'] = ['accept' => 'image/*'];
    } );

    I’ll see if I can add a code to restrict file types with PHP (which is more secured).

    #16749
    Ryan Lauritsen
    Participant

    Thank you, Anh. This works well. Can I customize the error message shown when attempting to upload a non-image file?

    Currently, it says:
    Please enter a value with a valid mimetype.

    #16750
    Anh Tran
    Keymaster

    It’s the default browser behavior. I found an answer for that here. Please try this:

    add_filter( 'rwmb_frontend_post_thumbnail', function( $field ) {
        $field['attributes'] = [
            'accept' => 'image/*',
            'oninvalid' => 'setCustomValidity()',
        ];
    } );

    And write a custom JS function setCustomValidity to handle the invalidity.

    #16773
    Ryan Lauritsen
    Participant

    I tried the following and it didn’t work.

    add_filter( 'rwmb_frontend_post_thumbnail', function( $field ) {
        $field['attributes'] = [
            'accept' => 'image/*',
            'oninvalid' => "setCustomValidity('Please select an image file.');",
        ];
    } );
    #16781
    Anh Tran
    Keymaster

    Please don’t put any text inside the setCustomValidity function. The content will be output inside quotes via PHP, so it might break the code. Instead of that, please try to add a custom JS to the page (enqueuing a JS file that contains a setCustomValidity() function).

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
grid gear info copy caret-up caret-down trash