Not sure this would be implemented as a feature request on this module.

However, what i would like to do is maybe reuse the work you've already done to help create a custom module of my own.

What i'd like to do is be able to use IMCE as is to select files already uploaded on the server. However, instead of inserting them as img tags in the node BODY, i want to use it to fill in the path to the field in an img field i have defined for my custom node type.

Ideally I'd like to be able to find a way, to allow my custom node to use imce to select mutliple files at once, populate an 'associated imgs' field on my custom node type. Then my code would create a series of records in a lookup table that associates the nid with the file path.

I guess what i'm asking is how i would go about integrating the imce with another form field other than node body? i need to browse your code. essentially it would require merging your existing code into my own module. OR copying it, and slightly rewriting it to still use nodeapi but instead of working on the node-> body field, i guess i'd make it work with customnode -> custom field.

does that sound reasonable?
any suggestions or thoughts?

thanks

Comments

ufku’s picture

ufku commented

IMCE's javascript API allows you to use the file browser from any page for any purpose.
You simply call IMCE using window.open() method of javascript with a window name and then define your custom function which will handle the file data sent by IMCE.

IMCE window will stay opened as long as it is not closed by the user or your custom function. This may be an answer for your 'multiple file selection' question.

Here is a code you can add as a node(Full HTML) and see the action.

<a href="#" onclick="openImce(); return false;">Show an image below</a>:
<div id="image-container"></div>

<script type="text/javascript">

//opens IMCE in a window named "myName".
function openImce() {
window.open('/imce/browse', 'myName', 'width=640,height=480');
}

//custom function. named "myName+ImceFinish".
function myNameImceFinish(path, width, height, size, imceWin) {
document.getElementById('image-container').innerHTML = '<img src="'+path+'" width="'+width+'" height="'+height+'" />';//put the image inside image container.
imceWin.close();//close IMCE window.
}

</script>
newdru’s picture

newdru commented

ufku,

thanks for your quick response on this.. This is pretty cool. i've been busy so haven't had time to get back on this until now.

Qs:

1) since 'myNameImceFinish' is what is called when i click 'add' AND if i disable the close function in THAT FUNCTION SO THAT I CAN KEEP ADDING MORE AND MORE FILES... how i actually enable the close AND OR how do i reset some other widget on the window (like a 'close' button) to actually assume the close function?

a) I could probably set some kind of count but i want to make the adding of multiple files as many or as little as one wants so that's kind of out of the question.

b) I know i can just close the file browser by clicking the X in the upper right of the browser window but for a user, they might want something more "userfreindly and official".

2) I don't see any imce js files in my html source header eventhough the pasted code works in my node.. so where are the imce js libs getting downloaded on the page?

3) Where (what files) does the DEFAULT Finish function definition exist for imce.. i'm searching in your module files and can't find it.. I want to see what you normally do when someone clicks add in your file browser.

4) The method you've outlined here would allow me to keep appending img files to the SAME DIV or if i modified teh code to the SAME TEXT FIELD IN A FORM...

OK.. would it be possible to have the code instead of APPEND TO SAME TEXTFIELD, DYNAMICALLY CREATE A NEW TEXTFIELD EVER TIME YOU CLICK THE ADD AND THEN POPULATE WITH THE FILEPATH? Actually i'm sure it would.

It probably would require that an index or some kind be assigned to each field so that each field could be uniquely stored as a separate item for that node (one to many) in the db by extra code in a module somewhere on the backend..

OK my wheels are in motion.. do you have any thoughts on this or maybe some sample code that i might be able to leverage?

btw, thanks for the module. it's simple, sweet and works!

Ok, this method would allow me to

ufku’s picture

ufku commented

1- You can use focus() and blur() methods for imitating window opening and closing.
For this to happen you should check if IMCE window is open, then focus if it is open or open if it closed. Possible code representation of the case:

//we use a javascipt variable(imceJsWin) to track IMCE window's state.
function openImce() {
 //never opened imce window or it has been closed by the user. then, open it
 if (typeof imceJsWin == 'undefined' || imceJsWin.closed) {
  imceJsWin = window.open('/imce/browse', 'myName', 'width=640,height=480');
 }
 //now we are sure it is open. then, just focus.
 imceJsWin.focus();
}

Now what we have to do is to make blur(instead of closing) this window when the user adds an image.

function myNameImceFinish(path, width, height, size, imceWin) {
document.getElementById('image-container').innerHTML = '<img src="'+path+'" width="'+width+'" height="'+height+'" />';
imceWin.blur();//unfocus IMCE window.
}

2- All IMCE js scripts are loaded within the pop-up. It, then, interacts with its parent window, looking for the custom function (window name + 'ImceFinish')

3- It's the imceFinitor function in imce_browse.js

4- Using javascript DOM, you can dynamically create form elements. However drupal's form api wouldnt include them in form_elements variable in form submit function. You should use $_POST to get values of them(you can see what i mean if you're familiar with forms in drupal.)
For the javascript part there is no difference between creating a form element and creating an image.
For instance, a little change in the finishing function is sufficient to add text fields having paths inside them

if (typeof fIndex == 'undefined') fIndex = 0; // your index idea
document.getElementById('image-container').innerHTML += '<div class="form-item"><input type="text" name="edit[custom_field]['+ (fIndex++) +']" value="'+ path +'" class="form-text" /></div>';

After form submission, values of these fields can be accessed through the numbered array $_POST['edit']['custom_field'] ( that is the array('path0', 'path1', ...) )

newdru’s picture

newdru commented

Alright!

1) I've implemented what you said and the chang focus is really cool, but it still doesn't solve the problem of a way to close the window. one still needs to click the x to close the file browser. I guess there's no way to do this without either editing your imce browser itself (e.g. add a close/finish button) or use the dom to add that button. i'm being picky here just trying to figure out ways to do this. your method works fine though!

2 points:

a) when you blur, if one is using firefox with multi tabs open, blur will not "activate" the tab if it isn't already the active tab. not sure there is a js workaround for this or not but just thought i'd bring it up. however, if the active tab is the one you ran the imce off of it blurs fine.

That probably has to do with what you mention in #2 which is that the imce browser is hard coded to communicate with the parent WINDOW and not necessarily a WINDOW *TAB* (which i'm not even sure if that functionality exists in js)

b) i think your code example uses "imceWin.blur()" and it should be " imceJsWin.blur();"

2) Got it! Ah, that makes sense! duh!

3) Got it.

4) Beautiful! that works!

Regarding #4, if you have the time i'd appreciate a little more assistance with that.

I've been exploring the forms api and it changed from 4.7 to 5. I think i actually understand 4.7 better than 5.

I believe i understand what you're saying here, but i thought if you structured (used the appropriate ids/classes) the form elements correctly using js that they WOULD be picked up by form hooks.. but i'm sure your take on that is correct..

OK. so i've dynamically added the form elements with js. I understand how you pull them using the POST global. The question is how to hook this functionality in with the existing submit of the node form? I guess what i'm looking for is the skeleton hooks/functions i'd need to make this work. Let me run my logic by you and see if you can add to it:

a) create a nodeapi type module - lets call it example.module
b) in example module i have function example_nodeapi and then switch on op 'submit'?

rather than have true drupal hooks like validate, i would just create a local function that validates and then local update/inserts, etc? does that make sense.

c) Also, once i'm switching on op 'submit', I need to make sure that this is actually a NODE SUBMIT OF A GIVEN CONTENT TYPE.. e.g there is a unique way to do that by using the form id (even though i'm not using form api per se).. could you provide the logic necessary to make sure i'm only executing my submit code when i should be and not on every generic submit?

Super thanks ufku! You've been great help!

ufku’s picture

ufku commented

1) Yes, you can manipulate the DOM of the pop-up through the variable imceJsWin.

a) I, too, don't know a way to handle tabs using javascript.
b) Both imceWin and imceJsWin refer to the same window object with a difference that imceWin is accessible only inside that function.

4) you're in the right direction.
you should check the value of $node->type to see if it is the correct node type.
Note that each form element that is created by the original form function will be a propety of the $node object, however your dynamic fields wont. They will only be accessible throug $_POST.
And for validation, as you know "validate" is another "op" that is executed before "submit" in nodeapi, you dont have the chance for marking your dynamic fields as invalid, like in regular fields, becouse, you cant use form_set_error as it works on real form elements. Also note that you'll lose your dynamic form elements on the next page if the form cant pass validation(becouse of any other field). This will force you to send previously entered values to the next page(as an inline script, for example). then your original script will automatically create the fields for the values coming from the previous page. This will continue until the form passes validation and you save your data in 'submit' hook.

ufku’s picture

ufku commented
Status: Active » Closed (fixed)