feat(ui): file picker support (#9)

* chore: update npm packages

* feat(ui): impl simple NC File Picker support

* bumped Visionatrix to the latest version

Signed-off-by: bigcat88 <bigcat88@icloud.com>

* chore: add NEXTCLOUD_INTEGRATION=true flag for client

* chore: update screenshots

---------

Signed-off-by: bigcat88 <bigcat88@icloud.com>
Co-authored-by: Alexander Piskun <13381981+bigcat88@users.noreply.github.com>

Author: andrey18106

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.2.1 - 2025-02-23]
+
+The Visionatrix service has been updated from version `1.11.0` to `1.11.1`.
+
+## Added
+
+- Support for `File Picker` to select media files from a Nextcloud instance.
+
+### Fixed
+
+- Now works correctly on fresh installations with no flows installed.
+- Prompt translations using **Gemini** now works correctly.
+
 ## [1.2.0 - 2025-02-17]
 
 The Visionatrix service has been updated from version `1.9.0` to `1.11.0`.

Dockerfile

@@ -70,7 +70,7 @@ RUN cd /Visionatrix && \
     rm -rf visionatrix/client && \
     cd web && \
     npm ci && \
-    NUXT_APP_BASE_URL="/index.php/apps/app_api/proxy/visionatrix/" npm run build && \
+    NUXT_APP_BASE_URL="/index.php/apps/app_api/proxy/visionatrix/" NEXTCLOUD_INTEGRATION=true npm run build && \
 	cp -r .output/public ../visionatrix/client && \
     rm -rf node_modules
 

appinfo/info.xml

@@ -34,7 +34,7 @@ Share your custom workflows, big or small. For guidance on creating AI workflows
 
 📚 For more details, visit the [repository](https://github.com/cloud-py-api/visionatrix) readme.
 	]]></description>
-	<version>1.2.0</version>
+	<version>1.2.1</version>
 	<licence>MIT</licence>
 	<author mail="andrey18106x@gmail.com" homepage="https://github.com/andrey18106">Andrey Borysenko</author>
 	<author mail="bigcat88@icloud.com" homepage="https://github.com/bigcat88">Alexander Piskun</author>
@@ -55,7 +55,7 @@ Share your custom workflows, big or small. For guidance on creating AI workflows
 		<docker-install>
 			<registry>ghcr.io</registry>
 			<image>cloud-py-api/visionatrix</image>
-			<image-tag>1.11.0</image-tag>
+			<image-tag>1.11.1</image-tag>
 		</docker-install>
 		<routes>
 			<route>

ex_app/src/bootstrap.js

@@ -1,13 +1,10 @@
 import Vue from 'vue'
 import { translate, translatePlural } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
-import { APP_API_PROXY_URL_PREFIX, EX_APP_ID } from './constants/AppAPI.js'
-import { getRequestToken } from '@nextcloud/auth'
+import { getCSPNonce } from '@nextcloud/auth'
 
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 Vue.prototype.OC = window.OC
 Vue.prototype.OCA = window.OCA
 
-__webpack_public_path__ = generateUrl(`${APP_API_PROXY_URL_PREFIX}/${EX_APP_ID}/js/`) // eslint-disable-line
-__webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
+__webpack_nonce__ = getCSPNonce() // eslint-disable-line

ex_app/src/views/IframeView.vue

@@ -29,6 +29,9 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import { APP_API_PROXY_URL_PREFIX, EX_APP_ID } from '../constants/AppAPI.js'
 
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import '@nextcloud/dialogs/style.css'
+
 export default {
 	name: 'IframeView',
 	components: {
@@ -58,6 +61,38 @@ export default {
 			this.error = true
 			this.loading = false
 		})
+		window.addEventListener('message', (event) => {
+			if (event.data.type === 'openNextcloudFilePicker') {
+				this.showFilePicker(event)
+			}
+		})
+	},
+	methods: {
+		showFilePicker(event) {
+			if (!event.data.inputParamName) {
+				return
+			}
+			const inputParamName = event.data.inputParamName
+			getFilePickerBuilder(t('visionatrix', 'Select a file'))
+				.setMultiSelect(false)
+				.allowDirectories(false)
+				.addMimeTypeFilter('image/*')
+				.addButton({
+					label: t('visionatrix', 'Select'),
+					callback: (nodes) => {
+						this.sendSelectedFilesToIframe(nodes, inputParamName)
+					},
+				})
+				.build().pick().catch(() => {})
+		},
+		sendSelectedFilesToIframe(nodes, inputParamName) {
+			const files = nodes.map((node) => {
+				return {
+					...node?._data,
+				}
+			})
+			this.$refs.iframe.contentWindow.postMessage({ files, inputParamName }, '*')
+		},
 	},
 }
 </script>