Is it possible to append Media's file browser to a certain node type?

Question

I have a certain node type with a canvas on it, allowing users to draw on the node. Basic functionality such as lines are working, but I'd like to allow people to upload images to it as well. Since the rest of the site is using the Media module (V2 dev), allowing users to browse the library and their personal uploads... I was hoping to be able to use it here as well.

The same question was posted as a support request in Media issue queue as well but so far there is no reponse: https://www.drupal.org/node/2423415

What I am looking for is a way to embed the media browser on the node and catch the path of the returned file so the JavaScript and the canvas can read it.

So far I've managed to add the media widget to the node with:

function mymodule_node_view($node, $view_mode, $langcode) {
  if($node->type == 'mytype') {
    $form = drupal_get_form('mymodule_media_form');

    // append a new field to the content
    $node->content['imageupload'] = array(
      '#markup' => drupal_render($form), // and render the form there
      '#weight' => 10,
    );
  }
}

function mymodule_media_form($form, &$form_state) {
  $form['file'] = array(
    '#type' => 'media-widget',
    '#title' => t('Image'),
    '#description' => t('Upload a file'),
  );
  return $form;
}

It shows the Media file upload button, but the dialog does not popup (due to missing JavaScripts I suppose). Is there a better way to load this field with all required JS etc? I do suppose I need to at least use hook_form() assuming I can't display a form field outside form context.

Answer 1

It appeared I had been using the wrong form element. My custom form was created as below:

function mymodule_file_upload_form($form, &$form_state) {
  $form['file'] = array(
    '#type' => 'media',
    '#title' => t('Choose an image'),
    '#description' => t('Choose an image'),
    '#tree' => TRUE,
    '#input' => TRUE,
    '#media_options' => array(
      'global' => array(
        'file_extensions' => 'gif jpg jpeg png',
        'file_directory' => 'conferences',
        'types' => array(
          'image',
        ),
        'schemes' => array(
          'private' => 'private',
        ),
        'enabledPlugins' => array(
          'upload',
          'media_default--media_browser_my_files',
        ),
      ),
    ),
  );

  return $form;
}

And then with some javascript I manged to get the fid of the file

$("form").on("change", "input.upload", function() {
  var val = $(this).val();
  $.ajax({
    url: Drupal.settings.basePath + 'draw/file/' + val,
    success: function(data) {
      src = data
    }
  });
});

That path was registered in hook_menu() to return the path of the private file as per:

function mymodule_menu() {
  $items['draw/file/%file'] = array(
    'page callback' => 'mymodule_page_file',
    'page arguments' => array(2),
    'access arguments' => 'view own private files',
  );
  return $items;
}


function mymodule_page_file($file) {
  global $user;
  if($user->uid == $file->uid) {
    echo file_create_url($file->uri); // Use echo to prevent theme to appear.
  }
}