Custom Field Type Issues

Support General Custom Field Type IssuesResolved

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #29770
    Nicholas CoxNicholas Cox
    Participant

    Hi

    I am building my first custom field type and its not so easy as I first thought. I cant seem to find much information on this subject in the forum, fb etc.

    I am basically building a input field file which allows the user to upload a single or multiple images using FileReader (Web API) and output them as base64 so I can pass the data on .

    This is a general demo I found which I am basing my code off https://bootsnipp.com/snippets/2eNKz. The demo allows you to upload images and reorder them, but generates a base64 preview of the image locally within the browser.

    Example of where I am at is below, any help would be great.

    1. Am I correctly enqueued JS file? I need this for the FileReader script. Or will it be easier to put this into a template? or within the class?
    2. I have included the input field but I can't work out how to pass the base64 stings over to $meta after the images have been encoded and exist in the DOM? do I have to call it via JS? or include an array somewhere so Metabox can use it automatically?
    if ( class_exists( 'RWMB_Field' ) ) {
        
        class RWMB_ImagePreview_Field extends RWMB_Field {
                
            public static function admin_enqueue_scripts() {
                wp_enqueue_script( 'dc-file', dirname( __FILE__ ) . '/test.js', array(), '', true );
            }
            
            public static function html( $meta, $field ) {
    
                return sprintf(
                    
                    $html = '<div class="container"><div class="form-group"><div class="upload-count"></div>
                            <button type="button" class="rwmb-browse-button browser button button-hero" href="javascript:void(0)" onclick="$("#pro-image").click()">Select Files</button>
                            <input type="file" id="%s" name="pro-image" style="display: none;" class="form-control" multiple></div><div class="preview-images-zone"></div></div>',
                    $field['field_name'],
                    $field['id'],
                    $meta
                );
            }
    
            public static function normalize( $field ) {
                
                $field = wp_parse_args( $field, array(
                    'sanitize_callback' => [ __CLASS__, 'custom_sanitize' ],
                ) );
                $field = parent::normalize( $field );
                return $field;
            }
    
            public static function custom_sanitize( $value, $field, $old_value, $object_id ) {
                
                // Do something with $value.
            }
        }
    }
    #29815
    Long NguyenLong Nguyen
    Moderator

    Hi Nicholas,

    1. It is correct to enqueue the script file for the field.

    2. Please be aware that the field value saved in the database is the image ID, it is different from the raw code. I think after get the image URL, you can follow this topic to encode the URL https://wordpress.stackexchange.com/questions/288667/need-to-convert-image-url-to-a-base-64-data-url-with-wordpress-function

    #29830
    Nicholas CoxNicholas Cox
    Participant

    Hi

    1. thanks for confirming.
    2. I'm not exactly sure what you mean, how to I get Metabox to save the input field value? e.g. file1.jpg, file2.jpg, file3.jpg?

    Thanks

    Nick

    #29831
    Nicholas CoxNicholas Cox
    Participant

    forgot to mention, how to I pass the value e.g. file1.jpg to sanitize it before saving the value to the database?

    #29842
    Long NguyenLong Nguyen
    Moderator

    Hi,

    Please follow this documentation to know how to create a custom sanitize callback and use it when creating a field.
    https://docs.metabox.io/sanitization/#custom-sanitize-callback

    #30236
    Nicholas CoxNicholas Cox
    Participant

    Hi

    Thanks for the information. I have managed to get the sanitize callback working. There is just one more thing I need to do.

    I need to be able to upload the images to a custom folder when the user submits the form. Is there a hook or callback I can use to initiate before sanitization?

    Thanks

    Nick

    #30245
    Long NguyenLong Nguyen
    Moderator

    Hi,

    I'm afraid that there is no hook to upload images to the custom folder. Meta Box supports field type file to allow the user to upload images to the custom folder. Please read more here https://docs.metabox.io/fields/file/

    So I think you can extend this field type to use this feature.

    #30258
    Nicholas CoxNicholas Cox
    Participant

    Hi

    I am not looking to upload the images to WordPress. But to send the base64 data to a 3rd party API after the user submits the form. So I just need to be able to execute a custom function of my own on form submission. Is this possible?

    1. User fills in the form
    2. User uploads images which are read by the filereader (FileReader.readAsDataURL())
    3. User Submits the form
      3a. Execute a function to send all base64 strings to an API

    sorry I was not very clear before. Hope the above helps?

    Thanks

    #30270
    Long NguyenLong Nguyen
    Moderator

    Hi,

    If you want to execute a function after the users submit the form, you can refer to these hooks
    - for both backend and frontend: https://docs.metabox.io/actions/#rwmb_after_save_post
    - for the form on the frontend: https://docs.metabox.io/extensions/mb-frontend-submission/#form-actions

    #30724
    Nicholas CoxNicholas Cox
    Participant

    ok thanks, I will use this then https://docs.metabox.io/extensions/mb-frontend-submission/#form-actions

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.