Custom Field Type Issues
- This topic has 9 replies, 2 voices, and was last updated 3 years, 7 months ago by
Nicholas Cox.
-
AuthorPosts
-
July 30, 2021 at 6:03 AM #29770
Nicholas Cox
ParticipantHi
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.
- 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?
- 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. } } }
July 31, 2021 at 9:42 AM #29815Long Nguyen
ModeratorHi Nicholas,
-
It is correct to enqueue the script file for the field.
-
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
August 1, 2021 at 4:14 PM #29830Nicholas Cox
ParticipantHi
- thanks for confirming.
-
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
August 1, 2021 at 4:30 PM #29831Nicholas Cox
Participantforgot to mention, how to I pass the value e.g. file1.jpg to sanitize it before saving the value to the database?
August 2, 2021 at 11:06 AM #29842Long Nguyen
ModeratorHi,
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-callbackAugust 13, 2021 at 11:40 PM #30236Nicholas Cox
ParticipantHi
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
August 14, 2021 at 7:57 AM #30245Long Nguyen
ModeratorHi,
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.
August 14, 2021 at 9:33 PM #30258Nicholas Cox
ParticipantHi
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?
- User fills in the form
- User uploads images which are read by the filereader (FileReader.readAsDataURL())
- 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
August 15, 2021 at 9:29 PM #30270Long Nguyen
ModeratorHi,
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-actionsSeptember 13, 2021 at 3:50 PM #30724Nicholas Cox
Participantok thanks, I will use this then https://docs.metabox.io/extensions/mb-frontend-submission/#form-actions
-
AuthorPosts
- You must be logged in to reply to this topic.