Fix v-upload reading null file

Fixes #477

app/src/components/v-upload/v-upload.vue

@@ -159,7 +159,7 @@ export default defineComponent({
 					});
 
 					if (uploadedFiles) {
-						emit('upload', props.multiple ? uploadedFiles : uploadedFiles[0]);
+						emit('input', props.multiple ? uploadedFiles : uploadedFiles[0]);
 					}
 				} catch (err) {
 					console.error(err);
@@ -216,29 +216,17 @@ export default defineComponent({
 		}
 
 		function useSelection() {
-			const collection = ref('directus_files');
-			const image = ref<string | null>(null);
-			const { item, error, loading } = useItem(collection, image);
+			return { setSelection };
 
-			function setSelection(selection: string[]) {
+			async function setSelection(selection: string[]) {
 				if (selection[0]) {
-					image.value = selection[0];
+					const id = selection[0];
+					const fileResponse = await api.get(`/files/${id}`);
+					emit('input', fileResponse.data.data);
 				} else {
-					image.value = null;
-					emit('upload', null);
+					emit('input', null);
 				}
 			}
-
-			watch(
-				() => item.value,
-				(id) => {
-					if (error.value === null && loading.value === false) {
-						emit('upload', item.value);
-					}
-				}
-			);
-
-			return { setSelection };
 		}
 
 		function useURLImport() {
@@ -265,7 +253,7 @@ export default defineComponent({
 						url: url.value,
 					});
 
-					emit('upload', response.data.data);
+					emit('input', response.data.data);
 					activeDialog.value = null;
 					url.value = '';
 				} catch (err) {

app/src/interfaces/file/file.vue

@@ -71,7 +71,7 @@
 			<v-card>
 				<v-card-title>{{ $t('upload_from_device') }}</v-card-title>
 				<v-card-text>
-					<v-upload @upload="onUpload" from-url />
+					<v-upload @input="onUpload" from-url />
 				</v-card-text>
 				<v-card-actions>
 					<v-button @click="activeDialog = null" secondary>{{ $t('cancel') }}</v-button>

app/src/interfaces/files/files.vue

@@ -59,7 +59,7 @@
 		<v-dialog v-model="showUpload">
 			<v-card>
 				<v-card-title>{{ $t('upload_file') }}</v-card-title>
-				<v-card-text><v-upload @upload="onUpload" multiple from-url /></v-card-text>
+				<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>

app/src/interfaces/image/image.vue

@@ -45,7 +45,7 @@
 			/>
 			<file-lightbox v-model="lightboxActive" :id="image.id" />
 		</div>
-		<v-upload v-else @upload="setImage" from-library from-url />
+		<v-upload v-else @input="setImage" from-library from-url />
 	</div>
 </template>
 

app/src/modules/files/routes/add-new.vue

@@ -3,7 +3,7 @@
 		<v-card>
 			<v-card-title>{{ $t('add_file') }}</v-card-title>
 			<v-card-text>
-				<v-upload :preset="preset" multiple @upload="close" from-url />
+				<v-upload :preset="preset" multiple @input="close" from-url />
 			</v-card-text>
 			<v-card-actions>
 				<v-button secondary @click="close">{{ $t('done') }}</v-button>