MIGX multifile-uploader and select mediasource

[ndcstudio]

Hi, I would like to create in MIGX a multifile-uploader (images) that would work the same as for a single file (image). That is, I can select few images from disk and choose the source where to save them and then select few images at once from which items will be created in migx.

I tried in the “Actionbuttons” tab to add buttons: “upload”, ‘uploadfiles’ but each of them does not have the ability to choose where to save the files, they are rigidly saved in the selected source or in a folder with a document id according to :

https://docs.modx.com/3.x/en/extras/migx/migx.tutorials/use-resource-specific-mediasource-and-multifile-uploader

https://docs.modx.com/current/en/extras/migxdb/migxdb.tutorials/create-a-basic-gallery-management-from-scratch-with-migxdb/add-resource-specific-mediasource-and-multifile-uploader-to-the-gallery

I tried in the “Actionbuttons” tab to add a button: “loadfromsource” but it loads all images from one source, you can’t select the source.

In other words, I would like to add a button “Upload files” in MIGX that will open Browse files (web)

Upload few photos to the CMS at once or choose from existing photos

And I will select a few photos (or a folder)

And add the photos to the MIGX gallery.

[halftrainedharry]

I don’t think there is build-in functionality in MIGX for this use case.

But you could try creating a custom action-button.
Here is an example (that may or may not work for your use case):

1. Create a custom folder in core/components. For example with the name “mymigx”.
2. In this folder create a file grid.config.inc.php in the subfolder migxconfigs/grid ( → core/components/mymigx/migxconfigs/grid/grid.config.inc.php.
3. Add the code below to this file grid.config.inc.php.
4. In the MIGX configuration → tab “MIGXdb-Settings” → set the field “Package” to the name of the folder. (“mymigx” in this case.)
5. Save the MIGX config, open it again and choose the (newly added) option “multiselect” in the tab “Actionbuttons”.

grid.config.inc.php

<?php
$gridactionbuttons['multiselect']['text'] = "'Multiselect'";
$gridactionbuttons['multiselect']['handler'] = 'this.selectMultipleImages';
$gridactionbuttons['multiselect']['scope'] = 'this';
$gridactionbuttons['multiselect']['standalone'] = '1';

$gridfunctions['this.selectMultipleImages'] = "
	selectMultipleImages: function(btn,e) {
		this.browser = MODx.load({
			xtype: 'modx-browser'
			,closeAction: 'close'
			,id: Ext.id()
			,multiple: true
			,source: [[+config.media_source_id]] || MODx.config.default_media_source
			,hideFiles: this.config.hideFiles || false
			,rootVisible: this.config.rootVisible || false
			,allowedFileTypes: this.config.allowedFileTypes || ''
			,wctx: this.config.wctx || 'web'
			,openTo: this.config.openTo || ''
			,rootId: this.config.rootId || '/'
			,hideSourceCombo: this.config.hideSourceCombo || false
			,listeners: {
				'select': {fn: function(data) { // 'data' only contains the first selected file
					nodes = this.browser.win.view.getSelectedNodes(); // Get all the selected files from the browser
					for (var i = 0; i < nodes.length; i++) {
						var data = this.browser.win.view.lookup[nodes[i].id];
						var img_path = data['fullRelativeUrl'];
						this.addNewItem({ img: img_path}); // Assuming 'img' is the name of the image field in the MIGX config
					}
				}, scope:this}
			}
		});
        this.browser.show(btn);
        return true;
	}
";

Adapt this code to your needs.
The code is based on the action-button “importcsvmigx” in the MIGX code:

Bruno17/MIGX/blob/99fb2148135cc1c10d7a8dbf6cd2a02618fd4067/core/components/migx/configs/grid/grid.config.inc.php#L815-L842

The xtype modx-browser is the MODX file browser (in your 2nd screenshot). The listener “select” runs, when the OK-button in the MODX browser is clicked.

[ndcstudio]

Thank you very much, this does exactly what I wanted!

All I changed in your code was:

var img_path = data[‘fullRelativeUrl’];
this.addNewItem({ img: img_path});

to

var img_path = data[‘relativeUrl’];
this.addNewItem({ image: img_path});

It would be useful to have such a function in the MIGX standard

[bobray]

A feature request here might make that happen (a pull request even more so).