MODX Revolution Multifile - Uploader for NewsPublisher. Uploads images to a MIGX-TV from frontend, based on FineUploader

migxFineUploader lets you upload one or multiple files from Frontpage with NewsPublisher into a MIGX-TV. You can use drag/drop to change the sortorder of the uploaded items.

MIGX and NewsPublisher has to be installed, before you can use migxFineUploader

Install MIGX and newsPublisher

Install the transport-package with package-manager of MODX Revolution

• Create a dynamic resource-specific mediasource with basePath and baseUrl of

[[!migxResourceMediaPath? &createFolder=`1` &pathTpl=`assets/resourceimages/{id}/`]]

• remember the id fo this mediasource

• Go to the MIGX - CMP to the tab 'MIGX'

• Click the button 'Import from package'

• package is 'migxfineuploader'

• This imports a new MIGX-config with name 'mfu_images'

• right-click that item in the grid and 'edit' this config

• Go to the tab formtabs -> Edit the tab 'image' -> Edit the field 'image'

• Go to the tab 'Mediasources' and change the 'Source ID' for both contexts (mgr and web) to the id of the mediasource, you have created before

• If you have another context, add this context to the list.

• Save everything.

• Create a new MIGX-TV for your template.

• Name it 'images'

• Put into the input-options 'configs' the name of your MIGX-config: 'images'

• Add the images - TV to your NewsPublisher - snippet-call

Newspublisher - Example:

[[!NewsPublisher?
&show=`pagetitle,longtitle,content,images`
]]

Now. you should be able to upload images with NewsPublisher to your MIGX-TV, reorder them with drag/drop and delete them.

If you need your own set of fileUploader - options, for example changing the maxFiles or allowedExtenstions, Edit the MIGX - config and change the snippet-name under 'Hook - Snippets' under the tab MIGXdb - Settings.

Change the value for:

{"mfugetproperties":"mfuUploaderGetProperties"}

and create a copy of the snippet 'mfuUploaderGetProperties' with your modified options.

If you need more customization, you can create your own UI - template by creating a chunk with the name in this section:

$prop['tplUiTemplate'] = 'mfu.migx.template';

you can of course also change the name of that chunk within your customized getproperties - snippet

To change the initialization of FineUploader completely to your needs, create a chunk with the name, found in this section:

$prop['tplInitUploader'] = 'mfu.inituploader';

you can find the default code for both chunks in this files: https://github.com/Bruno17/migxFineUploader/blob/master/core/components/migxfineuploader/elements/chunks/mfu.migx.template.chunk.html https://github.com/Bruno17/migxFineUploader/blob/master/core/components/migxfineuploader/elements/chunks/mfu.inituploader.chunk.html

Read more about FineUploader here: http://fineuploader.com/

and about uikit, which is used for drag/drop - sorting of items and maybe more in the future: https://getuikit.com/v2/docs/documentation_get-started.html