<form> inside a metabox

Question

I'm trying to write a plugin that allows a user to upload a video to Vimeo through the Vimeo upload API.

In order to avoid trying to upload a video to a potentially shared hosting account and then from there to Vimeo I am trying to upload directly to Vimeo through their POST availability - https://developer.vimeo.com/apis/advanced/upload#post

To do this I have to place a form inside of a meta box for a custom post type called 'Vimeo' but wordPress is filtering the tag and it's attributes from the returned HTML source. Is there a way of preventing this or have I taken the wrong approach? I believe I may have a form within a form situation .

Thanks.

Answer 1

It's not the right approach, since you are in a post(cpt) edit page the metabox's are simple grouped fields that get attached to the post form and in your case it's actually the browser who is filtering your metabox's form attributes and not WordPress since you are creating nested forms which is something that you just can't do.

A better approach would be to not have the form inside a metabox but outside here is an example using the native thickbox:

First add the button to lanch the thickbox:

//add the button to lanch the thickbox
add_action( 'media_buttons','add_vimeo_upload_button',100);

function add_vimeo_upload_button(){

    global $pagenow,$typenow;   

    if (!in_array( $pagenow, array( 'post.php', 'post-new.php' ) ))
        return;
    echo '<a href="#TB_inline?height=155&width=300&inlineId=vimeo_upload" class="thickbox"><img src="http://i.imgur.com/5hyoa.png" alt="Upload to vimeo"></a>';
}

Add form html outside post form ex:

//add form html outside post form
add_filter('admin_footer','vimeo_upload_form');

function vimeo_upload_form(){
    global $pagenow,$typenow;   
    if (!in_array( $pagenow, array( 'post.php', 'post-new.php' )))
        return;

//once we get here we are on the right page so we echo form html:
?>

<div id="vimeo_upload" style="display:none">
    <form method="POST" action="vimeo/url">
        <p><label>Upload video to Vimeo</label>
            <input type="file" name="" value="" placeholder=""></p>
        <p><input type="submit" name="" value="upload"></p>
    </form>
</div>

<?php
}

You should get something like this:

• The media button:

  

• The form in thickbox: