IMCE 6.x

New features in 6.x

• Improved UI:
  • Tabbed interface for file operations.
  • Resizable workspaces.
  • Ftp-like directory navigation.
  • Log messages.
  • Additional keyboard shortcuts: home, end, ctrl+A, R(esize), T(humbnails), U(pload)
  • Multiple file selection(using ctrl or shift).
• Ajax file operations.
• Operate on multiple files at a time.
• Directory caching.
• Themable layout using tpl files.
• Improved configuration profiles.
• Multiple personal or shared directory assignments for users.
• Permissions per directory.
• Option to use total user quota together with the directory quota.
• Replace method options for existing files.
• Multiple thumbnail definitions.
• New integration API for wysiwyg editors.

WYSIWYG Integration

• WYSIWYG: Download IMCE WYSIWYG Bridge Module and enable IMCE in plug-in settings of WYSIWYG module.
• BUEditor: Integrated in image and link dialogs.
• FCKeditor: Fckeditor profile->File browser settings->IMCE integration
• Others??

Integration API

Let's create a CASE and embody the IMCE integration on it:

• An application named myApp
• Has an url field for file url:
  <input type="text" name="urlField" id="urlField">
• Has a browse button with click event: (This can be a text link or anything that is clickable)
  <input type="button" value="Browse" onclick="openFileBrowser()">

Now let's go through the integration methods and define the openFileBrowser function that opens IMCE and makes it fill our url field on file selection.

File property - Field ID method

When IMCE is opened using an url that contains
app=applicationName|fileProperty1@FieldId1|fileProperty2@FieldId2|...
the specified fields are filled with the specified properties of the selected file.

Avaliable file properties are:

• url
• name
• size(formatted)
• width
• height
• date(formatted)
• bytes(integer size in bytes)
• time(integer date timestamp)
• id(file id for newly uploaded files, 0 or integer)
• relpath(rawurlencoded path relative to file directory path.)

In our CASE, we should open IMCE using this URL: /?q=imce&app=myApp|url@urlField which contains our application name and our url field id

function openFileBrowser() {
  window.open('/?q=imce&app=myApp|url@urlField', '', 'width=760,height=560,resizable=1');
}

That's all we need. Leave the rest to IMCE.
It will automatically create an operation tab named "Send to myApp" that sends the file url to our url field.
Clicking the files in preview do the same thing as well.

- What if we had another field for another file property e.g, Size: <input type="text" id="file-size"> ?
- We should have opened imce using this URL: /?q=imce&app=myApp|url@urlField|size@file-size

imceload - Custom function method

You can point a predefined function to be executed when IMCE loads.
When the URL is like &app=myApp|imceload@myOnloadFunc, IMCE looks for myOnloadFunc in the parent window and executes it with the window parameter referring to IMCE window.

function myOnloadFunc (win) {//any method of imce is available through win.imce
  win.imce.setSendTo('Give it to myApplication baby', myFileHandler);//you should also define myFileHandler
}

sendto - Custom function method

You can point a predefined function to which the selected files are sent.
When the URL is like &app=myApp|sendto@myFileHandler, IMCE calls myFileHandler function of the parent window with file and window parameters.

function myFileHandler (file, win) {
  $('#urlFieldId').val(file.url);//insert file url into the url field
  win.close();//close IMCE
}

Usually sendto method is easier to implement, on the other hand imceload method is more flexible as you manually add your sento operator and also can do any modification before IMCE shows up.