Use IMCE on custom page | Drupal 8

Use IMCE on custom page

Submitted by editor on Mon, 09/18/2017 - 16:52
Question

How to insert IMCE file browser to a custom form or a custom page.

Example 1 (for drupal 7)

Step 1. Add file brows

Create a simple js file in your module directory (called yourModuleName.js) and enter the following Javascript.

function openFileBrowser() {
  window.open('/imce?app=yourApp|url@your-input-id', '', 'width=760,height=560,resizable=1');
}

2) Make sure to include your js file:

$path = drupal_get_path('module', 'yourModuleName');
drupal_add_js($path . '/yourModuleName.js');

3) Create the form element where you want the path to the file to be generated:

$form['your-input-name'] = array(   
  '#title' => t('Your Title'),  
  '#type' => 'textfield',   
  '#attributes' => array('readonly' => 'readonly'), // So that the user cannot manually enter a value  
> );

 

4) Create a button that will execute the Javascript function:

$form['your-button-name'] = array(
  '#type' => 'submit',
  '#value' => t('Browse Server'),
  '#attributes' => array('onclick' => 'openFileBrowser();'),
);

Example 2 using inline JS (for drupal 7)

$inlinejs = <<<JS
function openFileBrowser() {
  window.open('/imce?app=yourApp|url@file-input-id', '', 'width=760,height=560,resizable=1');
}
JS;
drupal_add_js($inlinejs, ['type' => 'inline', 'scope' => 'footer', 'weight' => 5]);

$output = [];
$output['open-imce-btn'] = [
  '#type' => 'submit',
  '#value' => t('Open IMCE'),
  '#attributes' => ['onclick' => 'openFileBrowser();'],
];

Add new comment