Better Support for Multiple File Managers on a Single Page

[stevelittlefish]

In raising this issue, I confirm the following (please check boxes):

• [x] I have read and understood the Wiki. Especially deploy and configuration articles.
• [x] I have checked that the bug I am reporting can be replicated, or that the feature I am suggesting isn't already present.
• [x] I have checked the pull requests tab for existing solutions/implementations to my issue/suggestion.
• [x] I realise that server-side connectors are provided by various contributors. The implementations are vary due to programming language features/limitations or other factors. Thus a particular connector may not implement, or partially implement, the API features.
• [x] I realise that any changes in configuration options and/or plugin parameters affect the plugin behavior. I specified all the differences from defaults in details.

I use the following server-side connector (check one):

• [ ] PHP connector by servocoder
• [ ] Java connector by fabriceci
• [ ] Python3 Flask connector by jsooter
• [x] Python3 Flask connector by stevelittlefish
• [ ] NodeJs connector by jlaustill and forestlake
• [ ] ASP.NET Core connector by sinanbozkus
• [ ] ASHX connector by richeflits
• [ ] Other (specified below)

My familiarity with the project is as follows (check one):

• [ ] I have never used the project.
• [ ] I have used the project briefly.
• [x] I have used the project extensively, but have not contributed previously.
• [ ] I am an active contributor to the project.

---

I have been using your filemanager successfully, but have come up against a problem that I can't solve at the moment. I am using the following method to get the URL of the selected file and apply it into a text input:

From filemanager.js:

	// sending post message to the context window
        if (contextWindow) {
            contextWindow.postMessage(
            	{
                    source: 'richfilemanager',
                    resourceObject: resourceObject,
                    preview_url: previewUrl
                }, '*'
            );
		}

		fm.settings.callbacks.afterSelectItem(resourceObject, previewUrl, contextWindow);
	};

My code does something like this:

var handleFileManagerMessage = function (event) {
				var data = event.data;
				if (data.source != "richfilemanager") {
					console.log("Unknown source '" + data.source + "' - ignoring");
					return;
				}

				$("#{{ field.id }}").val(data.preview_url);
				cleanUp();
			};

			window.addEventListener("message", handleFileManagerMessage, false);

What I'd like to be able to do is the following:

• Set the "source" that is returned to be unique. At the moment the source is always "richfilemanager" but I'd like to be able to pass something into the filemanager as a get parameter and receive it back in the message, for example I could open my iframe to "index.html?callbackSource=filemanager123" and get "filemanager123" back in the source field or some other field.
• Return the width and height of the selected file if it is an image

I'm happy to make the changes myself if needed. How should I proceed?

[stevelittlefish]

And also, I only figured out how to handle this message by diving into the source code! It would be great if this could be documented.

[psolom]

Sorry, I'm busy on other projects at the moment. If you could solve it by your own I would gladly accept your PR.