├── .nvmrc
├── .gitignore
├── src
    ├── index.ts
    ├── get-root-path.ts
    ├── shims.d.ts
    └── interface.vue
├── package.json
├── tsconfig.json
└── Readme.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | v18.16.0


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .vscode
3 | .idea
4 | node_modules
5 | dist
6 | 
7 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { defineInterface } from '@directus/extensions-sdk';
 2 | import InterfaceComponent from './interface.vue';
 3 | 
 4 | export default defineInterface({
 5 | 	id: 'uuid-file-image',
 6 | 	name: 'UUID File Image',
 7 | 	icon: 'box',
 8 | 	description: 'Select image from Library in a UUID string field',
 9 | 	component: InterfaceComponent,
10 | 	options: null,
11 | 	types: ['uuid'],
12 | });
13 | 


--------------------------------------------------------------------------------
/src/get-root-path.ts:
--------------------------------------------------------------------------------
 1 | export function getRootPath(): string {
 2 | 	const path = window.location.pathname;
 3 | 	const parts = path.split('/');
 4 | 	const adminIndex = parts.indexOf('admin');
 5 | 	const rootPath = parts.slice(0, adminIndex).join('/') + '/';
 6 | 	return rootPath;
 7 | }
 8 | 
 9 | export function getPublicURL(): string {
10 | 	const path = window.location.href;
11 | 	const parts = path.split('/');
12 | 	const adminIndex = parts.indexOf('admin');
13 | 	const rootPath = parts.slice(0, adminIndex).join('/') + '/';
14 | 	return rootPath;
15 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "directus-interface-uuid-file-image",
 3 | 	"description": "",
 4 | 	"icon": "extension",
 5 | 	"version": "1.0.0",
 6 | 	"keywords": [
 7 | 		"directus",
 8 | 		"directus-extension",
 9 | 		"directus-custom-interface"
10 | 	],
11 | 	"type": "module",
12 | 	"directus:extension": {
13 | 		"type": "interface",
14 | 		"path": "dist/index.js",
15 | 		"source": "src/index.ts",
16 | 		"host": "^10.1.7"
17 | 	},
18 | 	"scripts": {
19 | 		"build": "directus-extension build",
20 | 		"dev": "directus-extension build -w --no-minify",
21 | 		"link": "directus-extension link"
22 | 	},
23 | 	"devDependencies": {
24 | 		"@directus/extensions-sdk": "^10.1.0",
25 | 		"typescript": "^5.1.6",
26 | 		"vue": "^3.3.4"
27 | 	},
28 | 	"dependencies": {
29 | 		"nanoid": "^4.0.2",
30 | 		"sass": "^1.64.1"
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "ES2019",
 4 | 		"lib": ["ES2019", "DOM"],
 5 | 		"moduleResolution": "node",
 6 | 		"strict": true,
 7 | 		"noFallthroughCasesInSwitch": true,
 8 | 		"esModuleInterop": true,
 9 | 		"noImplicitAny": true,
10 | 		"noImplicitThis": true,
11 | 		"noImplicitReturns": true,
12 | 		"noUnusedLocals": true,
13 | 		"noUncheckedIndexedAccess": true,
14 | 		"noUnusedParameters": true,
15 | 		"alwaysStrict": true,
16 | 		"strictNullChecks": true,
17 | 		"strictFunctionTypes": true,
18 | 		"strictBindCallApply": true,
19 | 		"strictPropertyInitialization": true,
20 | 		"resolveJsonModule": false,
21 | 		"skipLibCheck": true,
22 | 		"forceConsistentCasingInFileNames": true,
23 | 		"allowSyntheticDefaultImports": true,
24 | 		"isolatedModules": true,
25 | 		"rootDir": "./src"
26 | 	},
27 | 	"include": ["./src/**/*.ts"]
28 | }
29 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | # Installation
 2 | 
 3 | Switch to node v18.16.0 (using .nvmrc) :
 4 | ```bash
 5 | nvm use
 6 | ```
 7 | 
 8 | Install and build :
 9 | ```bash
10 | npm ci
11 | npm run build
12 | ```
13 | 
14 | Then, move the built `dist/index.js` file into a new directory of your `extensions/interfaces`, for example `extensions/interfaces/uuid-file-image/index.js`.
15 | 
16 | That's it!
17 | 
18 | If you use docker, don't forget to mount the `interfaces` volume pointing to the directory containing `uuid-file-image/index.js`:
19 | ```yaml
20 |     volumes:
21 |       - ./path/to/local/interfaces:/directus/extensions/interfaces/
22 | ```
23 | 
24 | # Example of usage in a JSON repeater field
25 | 
26 | ![Capture d’écran 2021-11-23 à 09 57 53](https://user-images.githubusercontent.com/17531455/142995390-b8484d50-d461-4e2a-a8a2-4ba7d7067c5d.png)
27 | 
28 | 
29 | # To do (next version)
30 | 
31 | When the file's selected, I currently set in uuid field the `filename_disk` key of the file. 
32 | 
33 | I wanted this to be set by the user into interface options (`props.file_key_to_get`: `String`), but I didn't added it yet in `src/index.ts`.
34 | 


--------------------------------------------------------------------------------
/src/shims.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.vue' {
 2 | 	import { DefineComponent } from 'vue';
 3 | 	const component: DefineComponent<{}, {}, any>;
 4 | 	export default component;
 5 | }
 6 | 
 7 | declare module '*.md' {
 8 | 	import { DefineComponent } from 'vue';
 9 | 	// eslint-disable-next-line @typescript-eslint/ban-types
10 | 	const component: DefineComponent<{}, {}, any>;
11 | 	export default component;
12 | }
13 | 
14 | declare module '*.yaml' {
15 | 	const value: Record<string, any>;
16 | 	export default value;
17 | }
18 | 
19 | declare module '*.json' {
20 | 	const value: Record<string, any>;
21 | 	export default value;
22 | }
23 | 
24 | declare module 'jsonlint-mod' {
25 | 	const x: any;
26 | 	export default x;
27 | }
28 | 
29 | declare module 'frappe-charts/src/js/charts/AxisChart' {
30 | 	export class Chart {
31 | 		constructor(element: string, options: Record<string, any>);
32 | 	}
33 | }
34 | 
35 | declare module '@directus-extensions-interface' {
36 | 	import { InterfaceConfig } from '@directus/shared/types';
37 | 	const interfaces: InterfaceConfig[];
38 | 	export default interfaces;
39 | }
40 | 
41 | declare module '@directus-extensions-display' {
42 | 	import { DisplayConfig } from './directus/app/shared/types';
43 | 	const displays: DisplayConfig[];
44 | 	export default displays;
45 | }
46 | 
47 | declare module '@directus-extensions-layout' {
48 | 	import { LayoutConfig } from './directus/app/shared/types';
49 | 	const layouts: LayoutConfig[];
50 | 	export default layouts;
51 | }
52 | 
53 | declare module '@directus-extensions-panel' {
54 | 	import { PanelConfig } from './directus/app/shared/types';
55 | 	const panel: PanelConfig[];
56 | 	export default panel;
57 | }
58 | 
59 | declare module '@directus-extensions-module' {
60 | 	import { ModuleConfig } from './directus/app/shared/types';
61 | 	const modules: ModuleConfig[];
62 | 	export default modules;
63 | }
64 | 


--------------------------------------------------------------------------------
/src/interface.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="image">
  3 |     <v-skeleton-loader v-if="loading" type="input-tall" />
  4 | 
  5 |     <v-notice v-else-if="disabled && !image" class="disabled-placeholder" center icon="block">
  6 |       {{ 'disabled' }}
  7 |     </v-notice>
  8 | 
  9 |     <div v-else-if="image" class="image-preview" :class="{ 'is-svg': image.type && image.type.includes('svg') }">
 10 |       <div v-if="imageError" class="image-error">
 11 |         <v-icon large :name="imageError === 'UNKNOWN' ? 'error_outline' : 'info_outline'" />
 12 | 
 13 |         <span class="message">
 14 | 					{{ `errors.${imageError}` }}
 15 | 				</span>
 16 |       </div>
 17 |       <img v-else :src="src" alt="" role="presentation" @error="imageErrorHandler" />
 18 | 
 19 |       <div class="shadow" />
 20 | 
 21 |       <div v-if="!disabled" class="actions">
 22 |         <v-button v-tooltip="'zoom'" icon rounded @click="lightboxActive = true">
 23 |           <v-icon name="zoom_in" />
 24 |         </v-button>
 25 |         <v-button v-tooltip="'download'" icon rounded :href="downloadSrc" :download="image.filename_download">
 26 |           <v-icon name="get_app" />
 27 |         </v-button>
 28 |         <v-button v-tooltip="'edit'" icon rounded @click="editDrawerActive = true">
 29 |           <v-icon name="open_in_new" />
 30 |         </v-button>
 31 |         <v-button v-tooltip="'deselect'" icon rounded @click="deselect">
 32 |           <v-icon name="close" />
 33 |         </v-button>
 34 |       </div>
 35 | 
 36 |       <div class="info">
 37 |         <div class="title">{{ image.title }}</div>
 38 |         <div class="meta">{{ meta }}</div>
 39 |       </div>
 40 | 
 41 |       <drawer-item
 42 |           v-if="!disabled && image"
 43 |           v-model:active="editDrawerActive"
 44 |           collection="directus_files"
 45 |           :primary-key="image.id"
 46 |           :edits="edits"
 47 |           @input="stageEdits"
 48 |       />
 49 | 
 50 |       <file-lightbox :id="image.id" v-model="lightboxActive" />
 51 |     </div>
 52 |     <v-upload v-else from-library from-url :folder="folder" @input="setImage" />
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script lang="ts">
 57 | import { defineComponent, ref, watch, computed, PropType } from 'vue';
 58 | import { nanoid } from 'nanoid';
 59 | import { useApi } from '@directus/extensions-sdk';
 60 | import { getRootPath } from './get-root-path';
 61 | 
 62 | function addQueryToPath(path: string, query: Record<string, string>): string {
 63 |   const queryParams = [];
 64 | 
 65 |   for (const [key, value] of Object.entries(query)) {
 66 |     queryParams.push(`${key}=${value}`);
 67 |   }
 68 | 
 69 |   return path.includes('?') ? `${path}&${queryParams.join('&')}` : `${path}?${queryParams.join('&')}`;
 70 | }
 71 | 
 72 | function getToken(api: any): string | null {
 73 |   return api.defaults.headers.common['Authorization']?.split(' ')[1] || null;
 74 | }
 75 | 
 76 | function addTokenToURL(api: any, url: string, token?: string): string {
 77 |   const accessToken = token || getToken(api);
 78 |   if (!accessToken) return url;
 79 | 
 80 |   return addQueryToPath(url, { access_token: accessToken });
 81 | }
 82 | 
 83 | type Image = {
 84 |   id: string; // uuid
 85 |   type: string;
 86 |   filesize: number;
 87 |   width: number;
 88 |   height: number;
 89 |   filename_download: string;
 90 | };
 91 | export default defineComponent({
 92 |   components: {},
 93 |   props: {
 94 |     value: {
 95 |       type: [String, Object] as PropType<string | Record<string, any>>,
 96 |       default: null,
 97 |     },
 98 |     disabled: {
 99 |       type: Boolean,
100 |       default: false,
101 |     },
102 |     folder: {
103 |       type: String,
104 |       default: undefined,
105 |     },
106 |     file_key_to_get: {
107 |       type: String,
108 |       default: "filename_disk",
109 |     }
110 |   },
111 |   emits: ['input'],
112 |   setup(props, {emit}) {
113 |     const loading = ref(false);
114 |     const image = ref<Image | null>(null);
115 |     const lightboxActive = ref(false);
116 |     const editDrawerActive = ref(false);
117 |     const imageError = ref<string | null>(null);
118 |     const cacheBuster = ref(nanoid());
119 | 
120 |     const api = useApi();
121 | 
122 |     const src = computed(() => {
123 |       if (!image.value) return null;
124 |       if (image.value.type.includes('svg')) {
125 |         return addTokenToURL(api, getRootPath() + `assets/${image.value.id}`);
126 |       }
127 |       if (image.value.type.includes('image')) {
128 |         const url = getRootPath() + `assets/${image.value.id}?key=system-large-cover&cache-buster=${cacheBuster.value}`;
129 |         return addTokenToURL(api, url);
130 |       }
131 |       return null;
132 |     });
133 |     const downloadSrc = computed(() => {
134 |       if (!image.value) return null;
135 |       return addTokenToURL(api, getRootPath() + `assets/${image.value.id}`);
136 |     });
137 |     const meta = computed(() => {
138 |       if (!image.value) return null;
139 |       const { filesize, width, height, type } = image.value;
140 |       if (width && height) {
141 |         return `${width}x${height} • ${filesize} • ${type}`;
142 |       }
143 |       return `${filesize} • ${type}`;
144 |     });
145 |     watch(
146 |         () => props.value,
147 |         (newValue, oldValue) => {
148 |           if (newValue === oldValue) return;
149 |           if (newValue) {
150 |             fetchImage();
151 |           }
152 |           if (oldValue && newValue === null) {
153 |             deselect();
154 |           }
155 |         },
156 |         { immediate: true }
157 |     );
158 |     const { edits, stageEdits } = useEdits();
159 | 
160 |     return {
161 |       // t,
162 |       loading,
163 |       image,
164 |       src,
165 |       imageError,
166 |       imageErrorHandler,
167 |       meta,
168 |       lightboxActive,
169 |       editDrawerActive,
170 |       changeCacheBuster,
171 |       setImage,
172 |       deselect,
173 |       downloadSrc,
174 |       edits,
175 |       stageEdits,
176 |     };
177 |     async function fetchImage() {
178 |       loading.value = true;
179 |       try {
180 |         let id = typeof props.value === 'string' ? props.value : props.value?.id;
181 | 
182 |         // Trick to handle the case when file_key_to_get is `filename_disk`
183 |         id = id.split('.').slice(0, -1).join('.');
184 | 
185 |         const response = await api.get(`/files/${id}`, {
186 |           params: {
187 |             fields: ['id', 'title', 'width', 'height', 'filesize', 'type', 'filename_download'],
188 |           },
189 |         });
190 |         if (props.value !== null && typeof props.value === 'object') {
191 |           image.value = {
192 |             ...response.data.data,
193 |             ...props.value,
194 |           };
195 |         } else {
196 |           image.value = response.data.data;
197 |         }
198 |       } catch (err: any) {
199 |         // unexpectedError(err);
200 |         console.log(err);
201 |       } finally {
202 |         loading.value = false;
203 |       }
204 |     }
205 |     async function imageErrorHandler() {
206 |       if (!src.value) return;
207 |       try {
208 |         await api.get(src.value);
209 |       } catch (err: any) {
210 |         imageError.value = err.response?.data?.errors[0]?.extensions?.code;
211 |         if (!imageError.value /*|| !te('errors.' + imageError.value)*/) {
212 |           imageError.value = 'UNKNOWN';
213 |         }
214 |       }
215 |     }
216 |     function changeCacheBuster() {
217 |       cacheBuster.value = nanoid();
218 |     }
219 |     function setImage(data: Image) {
220 |       console.log('setImage', data)
221 |       image.value = data;
222 |       emit('input', data[props.file_key_to_get]);
223 |     }
224 |     function deselect() {
225 |       emit('input', null);
226 |       loading.value = false;
227 |       image.value = null;
228 |       lightboxActive.value = false;
229 |       editDrawerActive.value = false;
230 |     }
231 |     function useEdits() {
232 |       const edits = computed(() => {
233 |         // If the current value isn't a primitive, it means we've already staged some changes
234 |         // This ensures we continue on those changes instead of starting over
235 |         if (props.value && typeof props.value === 'object') {
236 |           return props.value;
237 |         }
238 |         return {};
239 |       });
240 |       return { edits, stageEdits };
241 |       function stageEdits(newEdits: Record<string, any>) {
242 |         if (!image.value) return;
243 | 
244 |         console.log(newEdits);
245 | 
246 |         emit('input', image.value[props.file_key_to_get]);
247 |         /*
248 |         emit('input', {
249 |           id: image.value.id,
250 |           ...newEdits,
251 |         }); */
252 |       }
253 |     }
254 |   },
255 | });
256 | </script>
257 | 
258 | <style lang="scss" scoped>
259 | .image-preview {
260 |   position: relative;
261 |   width: 100%;
262 |   height: var(--input-height-tall);
263 |   overflow: hidden;
264 |   background-color: var(--background-subdued);
265 |   border-radius: var(--border-radius);
266 | }
267 | img {
268 |   z-index: 1;
269 |   width: 100%;
270 |   height: 100%;
271 |   object-fit: cover;
272 | }
273 | .is-svg {
274 |   padding: 32px;
275 |   background-color: var(--background-normal-alt);
276 |   img {
277 |     object-fit: contain;
278 |   }
279 | }
280 | .image-error {
281 |   display: flex;
282 |   flex-direction: column;
283 |   align-items: center;
284 |   justify-content: center;
285 |   // width: 100%;
286 |   height: 100%;
287 |   color: var(--foreground-subdued);
288 |   background-color: var(--background-normal);
289 |   .v-icon {
290 |     margin-bottom: 6px;
291 |   }
292 |   .message {
293 |     max-width: 300px;
294 |     padding: 0 16px;
295 |     text-align: center;
296 |   }
297 | }
298 | .shadow {
299 |   position: absolute;
300 |   bottom: 0;
301 |   left: 0;
302 |   z-index: 2;
303 |   width: 100%;
304 |   height: 40px;
305 |   overflow: hidden;
306 |   line-height: 1;
307 |   white-space: nowrap;
308 |   text-overflow: ellipsis;
309 |   background: linear-gradient(180deg, rgba(38, 50, 56, 0) 0%, rgba(38, 50, 56, 0.25) 100%);
310 |   transition: height var(--fast) var(--transition);
311 | }
312 | .actions {
313 |   --v-button-color: var(--foreground-subdued);
314 |   --v-button-background-color: var(--white);
315 |   --v-button-color-hover: var(--foreground-normal);
316 |   --v-button-background-color-hover: var(--white);
317 |   position: absolute;
318 |   top: 30%;
319 |   left: 0;
320 |   z-index: 3;
321 |   display: flex;
322 |   justify-content: center;
323 |   width: 100%;
324 |   .v-button {
325 |     margin-right: 12px;
326 |     transform: translateY(10px);
327 |     opacity: 0;
328 |     transition: var(--medium) var(--transition);
329 |     transition-property: opacity transform;
330 |     @for $i from 0 through 4 {
331 |       &:nth-of-type(#{$i + 1}) {
332 |         transition-delay: $i * 25ms;
333 |       }
334 |     }
335 |   }
336 |   .v-button:last-child {
337 |     margin-right: 0px;
338 |   }
339 | }
340 | .info {
341 |   position: absolute;
342 |   bottom: 0;
343 |   left: 0;
344 |   z-index: 3;
345 |   width: 100%;
346 |   padding: 8px 12px;
347 |   line-height: 1.2;
348 | }
349 | .title {
350 |   color: var(--white);
351 | }
352 | .meta {
353 |   height: 17px;
354 |   max-height: 0;
355 |   overflow: hidden;
356 |   color: rgba(255, 255, 255, 0.75);
357 |   transition: max-height var(--fast) var(--transition);
358 | }
359 | .image-preview:hover {
360 |   .shadow {
361 |     height: 100%;
362 |     background: linear-gradient(180deg, rgba(38, 50, 56, 0) 0%, rgba(38, 50, 56, 0.5) 100%);
363 |   }
364 |   .actions .v-button {
365 |     transform: translateY(0px);
366 |     opacity: 1;
367 |   }
368 |   .meta {
369 |     max-height: 17px;
370 |   }
371 | }
372 | .disabled-placeholder {
373 |   height: var(--input-height-tall);
374 | }
375 | </style>


--------------------------------------------------------------------------------