Browse Button of MediaPickerField is not working in custom Module

[orchardbot]

2LM created: https://orchard.codeplex.com/workitem/19033

I have created my own controller for administering certain content types as per the Webshop Tutorial of sfmskywalker, Part 10. My content type contains a MediaPicker Field which I render using ContentManager.BuildEditor. Everything renders fine, but when debugging the MediaPicker.js code executed when clicking the Browse button, I can see that it specifically checks whether it's called fron a url containing "/admin/", otherwise it simply returns:

MediaPicker.js:

jQuery(function ($) { $("form").bind("orchard-admin-pickimage-open", function (ev, data) { data = data || {}; // the popup will be doing full page reloads, so will not be able to retain // a pointer to the callback. We will generate a temporary callback // with a known/unique name and pass that in on the querystring so it // is remembers across reloads. Once executed, it calls the real callback // and removes itself. var callbackName = "pickimage" + new Date().getTime(); data.callbackName = callbackName; $[callbackName] = function (returnData) { delete $[callbackName]; data.callback(returnData); }; $[callbackName].data = data;

// ISSUE here: var adminIndex = location.href.toLowerCase().indexOf("/admin/"); if (adminIndex === -1) return; // END ISSUE var url = location.href.substr(0, adminIndex)

• "/Admin/MediaPicker?uploadpath=" + (data.uploadMediaPath || "")
• "&callback=" + callbackName
• "&editmode=" + (!!(data.img && data.img.src))
• "&" + (new Date() - 0); var w = window.open(url, "_blank", data.windowFeatures || "width=685,height=540,status=no,toolbar=no,location=no,menubar=no,resizable=no"); }); });

[orchardbot]

2LM commented:

I have made a fix that works for me, but I don't know what the impact may be for different hosting scenario's:

jQuery(function ($) { $("form").bind("orchard-admin-pickimage-open", function (ev, data) { data = data || {}; // the popup will be doing full page reloads, so will not be able to retain // a pointer to the callback. We will generate a temporary callback // with a known/unique name and pass that in on the querystring so it // is remembers across reloads. Once executed, it calls the real callback // and removes itself. var callbackName = "pickimage" + new Date().getTime(); data.callbackName = callbackName; $[callbackName] = function (returnData) { delete $[callbackName]; data.callback(returnData); }; $[callbackName].data = data;

// ISSUE here: //var adminIndex = location.href.toLowerCase().indexOf("/admin/"); //if (adminIndex === -1) return; //var url = location.href.substr(0, adminIndex) var url = location.protocol + "//" + location.host

• "/Admin/MediaPicker?uploadpath=" + (data.uploadMediaPath || "")
• "&callback=" + callbackName
• "&editmode=" + (!!(data.img && data.img.src))
• "&" + (new Date() - 0); // END ISSUE var w = window.open(url, "_blank", data.windowFeatures || "width=685,height=540,status=no,toolbar=no,location=no,menubar=no,resizable=no"); }); });

[orchardbot]

@sebastienros commented:

I don't want to change anything right now on this one as it's too risky. Why don't you have you controller using a /admin/ route instead ?

[orchardbot]

@bleroy commented:

Maybe because it's on the front-end?

[orchardbot]

2LM commented:

No, this one is indeed a controller in the back-end. So the suggestion is to create a Routes.cs file specifying a /admin/ route for this controller rather than updating the *.js file?

While this might indeed be feasible for this controller, it won't be for front-end controllers that allow to upload an image...