Add an input type file in booking form

[Marc FRÈREBEAU]

Hi

Can I add an input type file in booking form ?
The aim is to save 3 files and add them in attached files to the administrator email.

If plugin can’t do it, which hook I better use to develop it ?

[Marc FRÈREBEAU]

I see we should create new field type by derivate EO_Booking_Form_Element class.
=> http://wp-event-organiser.com/blog/tutorial/using-form-api-add-additional-fields/

But This tuto doesn’t explain this part of the job… :-/
What are the steps to create new file type as “file” ?

[Stephen Harris]

Hi Marc,

Apologies for having not replied sooner, but this is just to acknowledge your question. This is quite an involved question so I hope to have an extensive answer for you.

Creating a field with file type is only have the story as you then have to validate, and store the submitted data.

[Marc FRÈREBEAU]

Hi Stephen,

Thanks for your answer.
In fact I have explore extension files where the class EO_Booking_Form_Element_input to imitate construction.

I see my field in the interface but it’s not finish… Her the code I beginning :

class EO_Booking_Form_Element_File extends EO_Booking_Form_Element{
    
    static function get_type_name(){
        return 'Fichier';
    }
    
    function get_field_type(){
        return 'file';
    }
    
    function get_defaults(){
        return array(
            'label' => 'Fichier',
        );
    }
    
    function get_data(){
        return $this->get( 'data' );
    }

}
EO_Booking_Form_Element_Factory::register( 'file', 'EO_Booking_Form_Element_File' );

class EO_Booking_Form_Element_File_View extends EO_Booking_Form_Element_View{

    function render(){
        ob_start();
        include( get_stylesheet_directory() . '/templates/EO_Booking_Form_Element_File.php' );
        $html = ob_get_contents();
        ob_end_clean();
        return $html;
    }
    
    function get_value(){
        return $this->element->get_value();
    }
}
EO_Booking_Form_Element_View_Factory::register ( 'file', 'EO_Booking_Form_Element_File_View' );

EO_Booking_Form_Controller::register( 'file','Fichier', 'EO_Booking_Form_Element_File', get_stylesheet_directory() . '/templates/EO_Booking_Form_Element_File.php' );

And I create this template :

<?php include( eo_locate_template( 'eo-booking-form-label.php' ) ); ?>

<input
    type="<?php echo esc_attr( $this->element->get_field_type() );?>"
    id="<?php echo esc_attr( 'eo-booking-field-'.$this->element->id );?>"
    name="<?php echo esc_attr( $this->get_name() );?>"
    class="<?php echo esc_attr( $this->get_class() );?>"
    style="<?php echo esc_attr( $this->element->get( 'style' ) );?>"

<?php if( $this->element->is_required() ):?>
    required="required"
<?php endif;?>

<?php if( $this->element->get_data() ): ?>
    <?php foreach( $this->element->get_data() as $key => $attr_value ): ?>
        data-<?php echo esc_attr( $key )?>="<?php echo esc_attr( $attr_value );?>"
    <?php endforeach;?>
<?php endif;?>

/>

<?php include( eo_locate_template( 'eo-booking-form-description.php' ) ); ?>

<?php include( eo_locate_template( 'eo-booking-form-errors.php' ) ); ?>

I know it miss function is_valid( $input ) on my EO_Booking_Form_Element_File class… And after I’ll should to add data in the mail…

I think I have to create some other templates to have some configuration fields in admin. And my controler register command should be false…

The difficult is to not have some guide line to not forget some steps… I discover them I discovered progressively.

[Stephen Harris]

Marc,

Feel free to ask for me to go in more detail, but here’s the broad picture (with comments where I’ve omitted details specific to your use case):

1. Enable file uploads on the booking form
The booking form by default only supports $_POST data. To support file uploads you’ll need to add the attribute enctype="multipart/form-data" to the <form> tag in templates/eo-booking-form.php template:

<form enctype="multipart/form-data ...>
  ...
</form>

Copy that file to the root directory of your theme and edit there so it survives updates to the plug-in.

2. Declare the Element class
This is similar to your class but I’ve extended the EO_Booking_Form_Element_Input class – this is for convenience as I no longer have to declare a view. Views are registered as you have shown, but if my element doesn’t have a view it will proceed through the class’ ancestors until it finds a View. In this case, the parent is EO_Booking_Form_Element_Input which does have a view class: EO_Booking_Form_Element_Input_View – and this just so happens to be exactly what I need: an <input> with a configurable type (which I set below in get_field_type())

Of course if you wish you can register your own View class if you wish.

class EO_Booking_Form_Element_File extends EO_Booking_Form_Element_Input{

    static function get_type_name(){
        return 'Fichier';
    }

    function get_field_type(){
        return 'file';
    }

    function get_defaults(){
        return array(
            'label' => 'Fichier',
        );
    }

    function get_data(){
        return $this->get( 'data' );
    }

    function validate( $input ) {

        //@see http://php.net/manual/en/reserved.variables.files.php for details
        $file = array(
            'tmp_name' => $_FILES['eventorganiser']['tmp_name']['booking']['file'],
            'name'     => $_FILES['eventorganiser']['name']['booking']['file'],
            'size'     => $_FILES['eventorganiser']['size']['booking']['file'],
            'error'    => $_FILES['eventorganiser']['error']['booking']['file'],
            'type'     => $_FILES['eventorganiser']['type']['booking']['file'],     
        );

        //Validate file, e.g. check type, check for errors, and check for size
        //PLease note that $file['type'] can be spoofed - its best to analyzie the contents of the file

        //if there is any error: $this->add_error( 'my-error-code', 'Error message' );

        //Otherwise set value
        $this->set_value( $file );

    }

    function save( $booking_id ) {

        $file = $this->get_value(); //returns the array set above in validate().

        //You can now upload the file
        //@see https://codex.wordpress.org/Function_Reference/wp_handle_upload
        $_file = wp_handle_upload( $file,  array( 'test_form' => false ), time() );         

        //Once the file is uploaded you could either
        //Store a reference to the file location in as booking meta,
        //Or use wp_insert_attachment and store a reference to the attacment ID in booking meta

        //In either case, to add booking meta
        //update_post_meta( $booking_id, 'my_meta_key', 'my_value' );

    }

}

I’ve simply added two methods to the class. First is validate() – this is where you should perform any checks on the file. You might want to consider:

• Analysing the type and content of the file to prevent any uploads of malicious files
• Imposing a size limit on the file
• Checking the error number: it should be 0 if all is well

The function also sets the value of the element so that we can retrieve this later (i.e. in save()). (This really could/should be set earlier but this will suffice). To prevent the booking from proceeding and return the user to the booking page with an error message, simply add an error the element as shown.

The second method is save( $booking_id ). This is triggered after the booking is made (not necessarily confirmed) and this where you should upload the file to the server. (wp_handle_upload() is good for that).

You should then store a means of linking a file and a booking. You could do that by simply storing the file location as post meta. Or create an attachment for the uploaded file and store the attachment ID as a booking meta data. (Bookings are posts so you can use the usual post meta functions).

3. Add to the form

Please note that this is part of the API may change – you can alternatively programatically add the element the form.

To do add the element to the form customiserL:

 EO_Booking_Form_Controller::register( 
     'file', //element type ID
     'Fichier', //Label for the form customiser
     'http://yoursite.com/url/to/backbone-model.js',  //url to customiser 'model'
     'http://yoursite.com/url/to/customiser-view.tmpl',//url to customiser view
     'advanced' //which metabox to add the button to: standard, advanced
 );

The model ‘is’ your file element type in the customiser. It essentially stores the default values of an instance of that type.

eo.bfc.Model.EOFormElementFile = eo.bfc.Model.EOFormElementInput.extend({
    defaults:{
        label: eo.gettext("Fichier"),
        name: eo.gettext("Fichier"),
        description: "",
        required: false,
        field_type: 'text',
        parent: 0,
    },
});

you could specify the settings, but we’ll just inherit the settings for input.

The template is used to generate a preview of the element in the customiser. E.g. put the following in the .tmpl file:

<label>{{label}}</label><# if( required ){ #><span class="required">*</span><#}#><br>
<input type="file" disabled="disabled" />
<# if( description ){ #><p class="description">{{description}}</p><#}#>

Side remarks: Backbone is used for the Model and Views in the customiser and Underscore is used for template rendering.

[Marc FRÈREBEAU]

Hi Stephen,

Thanks a lot for this complete answer.
I have not had the opportunity to test… I’ll dig it tomorow.
If it works well we could make a tutoriel to create somme new file types as this… 😉

I’ll say you here when I’m ok. 🙂

[Stephen Harris]

Please do 🙂

[Maude Picalausa]

Hello Stephen,
I’ve been trying out your instructions, I have the file button in the customizer, but when I click it I get “Unrecognized type”.
The Backbone-model.js file is being read from the traces in the post params.
Has anything changed since 2015 that I need to take into consideration?
Any help would be gratefully recieved.

[Stephen Harris]

Have you definitely done the step:

 EO_Booking_Form_Controller::register( 
     'file', //element type ID
     'Fichier', //Label for the form customiser
     'http://yoursite.com/url/to/backbone-model.js',  //url to customiser 'model'
     'http://yoursite.com/url/to/customiser-view.tmpl',//url to customiser view
     'advanced' //which metabox to add the button to: standard, advanced
 );

I would expect that error, if the field is not registered with the controller.

[kreevogmbh]

Hi Stephen,
first of all, thank you for the great plugin and your support. For a client i need to add a file upload to the bookingform as well and i was using your suggestion of this topic. I can see the new button in the backend of the booking form but i cannot add the button to the form. Nothing happens if i click on the it. In the console i get the error “Uncaught SyntaxError: Unexpected token ‘<‘ ” which is coming from the customiser-view.tmpl. I use the current version of WordPress 5.5 and the current plugin version.

Do you have an idea how i could get the button to work properly?

Thank you very much!

Greetings,
Denny

[Stephen Harris]

Ah it should be the path to the .tmpl, not the URL.

[kreevogmbh]

Thanks Stephen for your quick response. Even if i change url to path the error occurs still. The file is loaded, because if the path or url is wrong i get a 404 in the console. But it seems like that the .tmpl file is not rendered correct if the first char “<” is “unexpected”. I register the button now like this:
EO_Booking_Form_Controller::register(
'file', //element type ID
'Fichier', //Label for the form customiser
'/wp-content/themes/theme_name/backbone-model.js',
'/wp-content/themes/theme_name/customiser-view.tmpl',
'advanced' //which metabox to add the button to: standard, advanced
);

Can i do something else?

Thx!

[kreevogmbh]

Hi Stephen,
could you please take a look why the solution is not working? I depend on the functionality of an upload button but the error still occurs if i click the button. You have any ideas why?

Thank you for your help.

[Stephen Harris]

Hi Denny,

Reverting back to what you had, open the network tab of your browser console and try clicking the button to add the element to the form – you should see a HTTP request to admin-ajax.php, what is the response of that?

[Author]

Posts