Add file upload on m2m (#5402)

* Show upload modal when using m2m to files

Fixes #5246

* Cleanup file check on drawer item

app/src/interfaces/many-to-many/many-to-many.vue

@@ -39,7 +39,7 @@
 		</v-list>
 
 		<div class="actions" v-if="!disabled">
-			<v-button v-if="enableCreate && createAllowed" @click="editModalActive = true">{{ $t('create_new') }}</v-button>
+			<v-button v-if="enableCreate && createAllowed" @click="showEditModal">{{ $t('create_new') }}</v-button>
 			<v-button v-if="enableSelect && selectAllowed" @click="selectModalActive = true">
 				{{ $t('add_existing') }}
 			</v-button>
@@ -67,11 +67,21 @@
 			@input="stageSelection"
 			multiple
 		/>
+
+		<v-dialog v-if="!disabled" v-model="showUpload">
+			<v-card>
+				<v-card-title>{{ $t('upload_file') }}</v-card-title>
+				<v-card-text><v-upload @input="onUpload" multiple from-url /></v-card-text>
+				<v-card-actions>
+					<v-button @click="showUpload = false">{{ $t('done') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, PropType, toRefs } from '@vue/composition-api';
+import { defineComponent, computed, PropType, toRefs, ref } from '@vue/composition-api';
 import DrawerItem from '@/views/private/components/drawer-item';
 import DrawerCollection from '@/views/private/components/drawer-collection';
 import { get } from 'lodash';
@@ -190,6 +200,8 @@ export default defineComponent({
 
 		const { createAllowed, selectAllowed } = usePermissions();
 
+		const { showUpload, onUpload } = useUpload();
+
 		return {
 			junction,
 			relation,
@@ -217,6 +229,9 @@ export default defineComponent({
 			templateWithDefaults,
 			createAllowed,
 			selectAllowed,
+			showEditModal,
+			onUpload,
+			showUpload,
 		};
 
 		function emitter(newVal: any[] | null) {
@@ -255,6 +270,33 @@ export default defineComponent({
 
 			return { createAllowed, selectAllowed };
 		}
+
+		function showEditModal() {
+			if (relationCollection.value.collection === 'directus_files') {
+				showUpload.value = true;
+			} else {
+				editModalActive.value = true;
+			}
+		}
+
+		function useUpload() {
+			const showUpload = ref(false);
+
+			return { showUpload, onUpload };
+
+			function onUpload(files: Record<string, any>[]) {
+				showUpload.value = false;
+				if (files.length === 0) return;
+				const { junctionField } = relationInfo.value;
+				const filesAsJunctionRows = files.map((file) => {
+					return {
+						[junctionField]: file.id,
+					};
+				});
+
+				emit('input', [...(props.value || []), ...filesAsJunctionRows]);
+			}
+		}
 	},
 });
 </script>

app/src/views/private/components/drawer-item/drawer-item.vue

@@ -180,7 +180,7 @@ export default defineComponent({
 				null
 		);
 
-		const { file } = useFile();
+		const { file, isDirectusFiles } = useFile();
 
 		return {
 			_active,
@@ -203,25 +203,24 @@ export default defineComponent({
 			templateDataLoading,
 			collectionInfo,
 			file,
+			isDirectusFiles,
 		};
 
 		function useFile() {
-			const file = ref(null);
-
-			watch([() => item.value, () => junctionRelatedCollection.value], () => {
-				const junctionItem = item.value;
-
-				if (junctionRelatedCollection.value === 'directus_files') {
-					const item = junctionItem?.[props.junctionField];
-					const src = addTokenToURL(getRootPath() + `assets/${item.id}?key=system-large-contain`);
-
-					file.value = { ...item, src };
-				} else {
-					file.value = null;
-				}
+			const isDirectusFiles = computed(() => {
+				return junctionRelatedCollection.value === 'directus_files';
 			});
 
-			return { file };
+			const file = computed(() => {
+				if (isDirectusFiles.value === false || !item.value) return null;
+				const fileData = item.value?.[props.junctionField];
+				if (!fileData) return null;
+
+				const src = addTokenToURL(getRootPath() + `assets/${fileData.id}?key=system-large-contain`);
+				return { ...fileData, src };
+			});
+
+			return { file, isDirectusFiles };
 		}
 
 		function useActiveState() {

app/src/views/private/components/file-preview/file-preview.vue

@@ -6,15 +6,7 @@
 			:class="{ svg: isSVG, 'max-size': inModal === false }"
 			@click="$emit('click')"
 		>
-			<img
-				:src="src"
-				:width="width"
-				:height="height"
-				:style="{
-					maxWidth: width ? width + 'px' : '100%',
-				}"
-				:alt="title"
-			/>
+			<img :src="src" :width="width" :height="height" :alt="title" />
 			<v-icon v-if="inModal === false" name="upload" />
 		</div>
 
@@ -93,7 +85,7 @@ img,
 video,
 audio {
 	width: 100%;
-	max-height: 100%;
+	max-height: 500px;
 	object-fit: contain;
 	border-radius: var(--border-radius);
 }
@@ -112,7 +104,6 @@ audio {
 	img {
 		z-index: 1;
 		display: block;
-		max-height: inherit;
 		margin: 0 auto;
 	}