 readme  id readmetxt v 11129 20100201 154258 ufku exp imce is an image file uploader and browser that supports personal directories and quota imce can easily be integrated into any wysiwyg editor or any web application that needs a file browser see integration methods for more information features basic file operations upload delete image jpg png gif operations resize create thumbnails preview support for private downloads configurable limits for user roles file size per upload total directory size quota file extensions and image dimensions personal or shared folders for users userfriendly interface directory and file listing file sorting by name size dimensions date selecting preview keyboard shortcuts up down insert or enter delete builtin support for inline image file insertion into textareas new in 6x improved ui tabbed interface for file operations resizable workspaces ftplike 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 installation 1 copy imce directory to your modules directory 2 enable the module at admin build modules 3 create configuration profiles and assign them to user roles at admin settings imce 4 test it at user userid imce or imce 5 see integration methods to make imce collaborate with your application if it s not already integrated notes when you configure imce for inline image file insertion into textareas there should appear an imce link under each textarea you specified if you are uploading files containing unicode characters it is strongly recommended to use the transliteration module that sanitizes filenames by converting characters from unicode to usascii http drupalorg project transliteration if you are using cck you may want to check the imce cck image module at http drupalorg project imceimage or the file field sources module at http drupalorg project filefieldsources frequently faced issues inaccessible invalid directory or subdirectory in some server configurations manually ftp or directly created directories may not be writable by php by imce in this case you have to set the chmod permissions of the directory to 0777 in order to make it writable by anyone you should also make sure that in each configuration profile all of the defined directories are located under drupal s file system path which is usually files and also if safe mode restriction is active in your server don t expect imce to run flawlessly disappearing images after node submission having nothing to do with imce it appeared many times in issue queues this is an input filtering issue that can be resolved by adding tag into the default input format using full html is another solution see admin settings filters no browse button in ie ff at all probably talking about tinymce or fckeditor see integration methods to learn to integrate it by yourself upload does not work in opera jquery form plugin before version 209 has problems with opera 92 replace drupal s misc jqueryformjs with the one at http jquerymalsupcom form download imce may have problem working with google analytics and secure pages modules just make sure to add imce path to the exceptions list of these modules integration methods if you are using wysiwyg module you must also download and install http drupalorg project imcewysiwyg bridge module and enable imce as a plugin in wysiwyg settings here are the applications whose users are lucky that they don t have to read the details of integration methods bueditor obviously the author knows how to integrate imce to his application users need nothing to do fckeditor without wysiwyg another module from another blessed author which makes imce integration as simple as a single click fckeditor profile file browser settings imce integration note one can also override the settings at advanced settings custom javascript configuration here are the lines that force imce integration don t force unless you need to linkbrowser true imagebrowser true flashbrowser true linkbrowserurl q imce app fckeditor url txturl imagebrowserurl q imce app fckeditor url txturl width txtwidth height txtheight flashbrowserurl q imce app fckeditor url txturl there may be other applications that integrated imce already if your application is not one of them please keep reading let s create a case and embody the imce integration on it an application named myapp has an url field for file url has a browse button with click event this can be a text link or anything that is clickable 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 integration by url 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 windowopen 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 eg size we should have opened imce using this url q imce app myapp url urlfield size filesize using imceload 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 winimce winimcesetsendto give it to myapplication baby myfilehandler you should also define myfilehandler using sendto 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 fileurl insert file url into the url field winclose 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 advanced integration in case your application wants to go beyond the simple give me that file property interaction with imce your application wants imce to send multiple files to it eg a gallery application your application wants to gain total control over imce then you should consider applying advanced integration the initial step of advanced integration is the same as imceloadintegration above we open imce and set its onload function windowopen q imce app myapp imceload initiatemyapp width 760 height 560 resizable 1 initiatemyapp win will run when imce loads now we define our initiator function in which we do the necessary manipulations to imce interface initiatemyapp function win var imce winimce use imce methods to add remove change things allright but what do we add romeve change in imce depends on our goal here are some properties and methods that can help us to achieve it hooks imcehooksload an array of functions that run after imce loads they are called with the window parameter imcehookslist an array of functions that run while processing the file list each row of the file list is sent to these functions imcehooksnavigate an array of functions that run after a directory is loaded parameters sent are data from ajax or cache olddirectory cached boolean that states the data is from the cache or not imcehookscache an array of functions that run just before a new directory is loaded parameters are cacheddata and newdirectory directory related properties imcetree stores the directory list where imcetree is the root element directory related methods imcediradd directoryname parentelement clickable adds directoryname under parentelement ex imcediradd foo imcedir true imcedirsubdirs directoryname subdirectories adds each subdirectory in subdirectories array under directoryname ex imcedirsubdirs foo bar baz file related properties imcefindex indexed array of files table rows that contain file properties imcefids object containing fileid file name file row pairs imceselected object containing currently selected fileid file name file row pairs file related methods imcefileadd file adds the file object to the list file object has the properties name size bytes width height date timestamp fsize formatted fdate formatted imcefileremove fiileid removes the file having the fileid from the list imcefileget fileid returns the file object having the fileid file object contains name url size bytes width height date time id file id for newly uploaded files 0 or integer relpath rawurlencoded path relative to file directory path file operations imceopadd op adds an operation tab to the interface op contains name title content optional func optional onclick function imceopenable name imceopdisable name enable disable operation tabs miscellaneous imcesetmessage msg type logs a message of the type status warning error note all url strings in the examples start with considering the base path is in case your drupal is running on a sub directory eg http localhost drupal these urls should start with drupal there is a safer solution that does not require manual url fixing if the drupal javascript object is avaliable in your page you can use drupalsettingsbasepath at the beginning of urls drupalsettingsbasepath q imce note that this won t work with multilingual paths with language prefixes file and directory ids names used in imcejs are url encoded forms of original names they are decoded using imcedecode and displayed in the lists 