pkp/pkp-lib#12262 [Frontend] Publication – Media Files

public/globals.js

@@ -161,6 +161,15 @@ window.pkp = {
 			ORCID: 4,
 			PROCESSED: 5,
 		},
+
+		// Genre categories
+		GENRE_CATEGORY_DOCUMENT: 1,
+		GENRE_CATEGORY_ARTWORK: 2,
+		GENRE_CATEGORY_SUPPLEMENTARY: 3,
+
+		// Media variant types
+		MEDIA_VARIANT_TYPE_WEB: 'web',
+		MEDIA_VARIANT_TYPE_HIGH_RESOLUTION: 'high_resolution',
 	},
 
 	/**
@@ -237,6 +246,7 @@ window.pkp = {
 		'common.cancel': 'Cancel',
 		'common.changeLanguage': 'Change Language',
 		'common.clearSearch': 'Clear search phrase',
+		'common.clickToUploadFiles': 'Click to upload files',
 		'common.close': 'Close',
 		'common.closed': 'Closed',
 		'common.commaListSeparator': ', ',
@@ -296,6 +306,7 @@ window.pkp = {
 		'common.numberedMore': '{$number} more',
 		'common.numero': 'No',
 		'common.ok': 'OK',
+		'common.or': 'or',
 		'common.oneMonth': '1 month',
 		'common.oneWeek': '1 week',
 		'common.order': 'Order',
@@ -322,12 +333,14 @@ window.pkp = {
 		'common.searchPhrase': 'Search Phrase',
 		'common.searching': 'Searching',
 		'common.selectAll': 'Select All',
+		'common.selectedFile': 'Selected File',
 		'common.selectNone': 'Select None',
 		'common.selectWithName': 'Select {$name}',
 		'common.semicolonListSeparator': '; ',
 		'common.showingSteps': '{$current}/{$total} steps',
 		'common.showingXofX':
 			'Showing <strong>{$start} to {$finish}</strong> of {$total}',
+		'common.size': 'Size',
 		'common.startDate': 'Start Date',
 		'common.status': 'Status',
 		'common.switchTo': 'Switch to',
@@ -339,6 +352,7 @@ window.pkp = {
 		'common.upload': 'Upload',
 		'common.upload.addFile': 'Add File',
 		'common.upload.addFile.description': 'Upload a file from your computer.',
+		'common.upload.addFiles': 'Add Files',
 		'common.uploadedBy': 'Uploaded by {$name}',
 		'common.uploadedByAndWhen': 'Uploaded by {$name} on {$date}',
 		'common.user': 'User',
@@ -670,12 +684,14 @@ window.pkp = {
 		'grid.action.deleteContributor': 'Delete Contributor',
 		'grid.action.deleteContributor.confirmationMessage':
 			'Are you sure you want to remove {$name} as a contributor? This action can not be undone.',
+		'grid.action.deleteFile': 'Delete File',
 		'grid.action.deleteReviewerRecommendation': 'Delete Recommendation',
 		'grid.action.deleteReviewerSuggestion': 'Delete Reviewer Suggestion',
 		'grid.action.deleteReviewerSuggestion.confirmationMessage':
 			'Are you sure you want to remove this suggestion? This action can not be undone.',
 		'grid.action.edit': 'Edit',
 		'grid.action.editFile': 'Edit a file',
+		'grid.action.editMetadata': 'Edit Metadata',
 		'grid.action.editReviewerRecommendation': 'Edit Recommendation',
 		'grid.action.logInAs': 'Login As',
 		'grid.action.mergeUser': 'Merge user',
@@ -685,6 +701,17 @@ window.pkp = {
 		'grid.action.sendToTextEditor': 'Send to Text Editor',
 		'grid.action.sort': 'Sort',
 		'grid.action.updateFile': 'Update File Details',
+		'grid.artworkFile.caption': 'Caption',
+		'grid.artworkFile.copyrightOwner': 'Copyright Owner',
+		'grid.artworkFile.credit': 'Credit',
+		'grid.artworkFile.permissionTerms': 'Permission Terms',
+		'grid.supplementaryFile.creator': 'Creator',
+		'grid.supplementaryFile.publisher': 'Publisher',
+		'grid.supplementaryFile.source': 'Source',
+		'grid.supplementaryFile.subject': 'Subject',
+		'grid.supplementaryFile.sponsor': 'Sponsor',
+		'grid.supplementaryFile.date': 'Date Created',
+		'grid.supplementaryFile.language': 'Language',
 		'grid.category.add': 'Add Category',
 		'grid.category.categories': 'Categories',
 		'grid.category.categoryName': 'Category Name',
@@ -984,6 +1011,46 @@ window.pkp = {
 		'publication.jats.confirmDeleteFileTitle': 'Confirm deleting JATS XML',
 		'publication.jats.lastModified':
 			'Last Modification at {$modificationDate} by {$username}',
+		'publication.mediaFiles': 'Media Files',
+		'publication.mediaFiles.add': 'Add Media File',
+		'publication.mediaFiles.batchLinkMedia': 'Batch Link Media',
+		'publication.mediaFiles.batchLinkMedia.description':
+			'Link web version media files to their high-resolution counterparts. Select a high-resolution file for each web version below.',
+		'publication.mediaFiles.confirmDelete':
+			'Are you sure you want to delete "{$fileName}"? This action cannot be undone. If this file is linked to other media, those links will be removed.',
+		'publication.mediaFiles.delete': 'Delete media file?',
+		'publication.mediaFiles.description':
+			'Upload media files in bulk, including high-resolution versions. After uploading, link each file to its web or high resolution counterpart by cliking Manually Link Media from the More Actions dropdown, or use Batch Link Media to link multiple files at once.',
+		'publication.mediaFiles.linkHighResolutionVersion':
+			'Link High-Resolution Version',
+		'publication.mediaFiles.linkMedia': 'Link Media',
+		'publication.mediaFiles.manuallyLinkMedia': 'Manually Link Media',
+		'publication.mediaFiles.metadataName': 'Name of the file',
+		'publication.mediaFiles.metadataNameDescription':
+			'(e.g., Manuscript; Table 1)',
+		'publication.mediaFiles.upload.noMediaTypes':
+			'No media types are configured. Please contact the system administrator.',
+		'publication.mediaFiles.noHighResolutionFile': 'No high-resolution file',
+		'publication.mediaFiles.noWebVersionFile': 'No web version file',
+		'publication.mediaFiles.selectHighResolutionFor':
+			'Select high-resolution version for {$fileName}',
+		'publication.mediaFiles.selectMediaFileToLink':
+			'Select the media file to link as its counterpart',
+		'publication.mediaFiles.selectMediaFileToLink.description':
+			'Only one file can be linked. The file types must differ (web <> high-res).',
+		'publication.mediaFiles.selectedWebVersion': 'Selected Web Version',
+		'publication.mediaFiles.upload': 'Upload Media File',
+		'publication.mediaFiles.upload.description':
+			'Upload image or multimedia files in bulk. The system will auto-link them to your HTML galley using matching filenames. You can manually adjust or link files later if needed.',
+		'publication.mediaFiles.upload.variantTypeWeb': 'Web resolution',
+		'publication.mediaFiles.upload.variantTypeHighRes': 'High resolution',
+		'publication.mediaFiles.upload.selectMediaType':
+			'What kind of media is this?',
+		'publication.mediaFiles.upload.selectMediaTypeDescription':
+			'Select a media type from the dropdown.',
+		'publication.mediaFiles.upload.fileResType': 'File resolution type',
+		'publication.mediaFiles.upload.fileResTypeDescription':
+			'Select a file resolution from the dropdown.',
 		'publication.publicationLicense': 'Permissions & Disclosure',
 		'publication.publish': 'Publish',
 		'publication.revisionSignificance.description':

src/components/Composer/Composer.vue

@@ -234,8 +234,8 @@
 								:key="i"
 								class="composer__attachment"
 							>
-								<Icon
-									:icon="getDocumentTypeIcon(attachment)"
+								<FileTypeIcon
+									:document-type="attachment.documentType"
 									:inline="true"
 									class="composer__attachment__documentType"
 								/>
@@ -280,6 +280,7 @@ import Panel from '@/components/Panel/Panel.vue';
 import PanelSection from '@/components/Panel/PanelSection.vue';
 import PkpButton from '@/components/Button/Button.vue';
 import Icon from '@/components/Icon/Icon.vue';
+import FileTypeIcon from '@/components/FileTypeIcon/FileTypeIcon.vue';
 import Badge from '@/components/Badge/Badge.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
 
@@ -300,6 +301,7 @@ export default {
 		Spinner,
 		PkpButton,
 		Icon,
+		FileTypeIcon,
 		Badge,
 	},
 	mixins: [ajaxErrorCallback, dialog, preparedContent],
@@ -782,21 +784,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Get the icon to match this document type,
-		 * such as PDF, Word, spreadsheet, etc.
-		 *
-		 * @param {Object} attachment The file attachment
-		 * @return {String}
-		 */
-		getDocumentTypeIcon(attachment) {
-			return !!pkp.documentTypeIcons &&
-				!!attachment.documentType &&
-				!!pkp.documentTypeIcons[attachment.documentType]
-				? pkp.documentTypeIcons[attachment.documentType]
-				: 'DefaultDocument';
-		},
-
 		/**
 		 * Emit an event to change a prop
 		 *

src/components/File/File.vue

@@ -1,6 +1,9 @@
 <template>
 	<div class="flex min-w-0 items-center">
-		<Icon :icon="documentTypeIcon" class="h-6 w-6 flex-none text-heading" />
+		<FileTypeIcon
+			:document-type="documentType"
+			class="h-6 w-6 flex-none text-heading"
+		/>
 		<span v-if="fileId" class="file__id">
 			{{ fileId }}
 		</span>
@@ -16,10 +19,10 @@
 </template>
 
 <script>
-import Icon from '@/components/Icon/Icon.vue';
+import FileTypeIcon from '@/components/FileTypeIcon/FileTypeIcon.vue';
 
 export default {
-	components: {Icon},
+	components: {FileTypeIcon},
 	props: {
 		/** Optional but recommended. Pass one of the `DOCUMENT_TYPE_` constants to show an icon that will match this document type. */
 		documentType: {
@@ -49,18 +52,5 @@ export default {
 			},
 		},
 	},
-	computed: {
-		/**
-		 * The icon to match this document type
-		 *
-		 * @return {String}
-		 */
-		documentTypeIcon() {
-			return !!pkp.documentTypeIcons &&
-				!!pkp.documentTypeIcons[this.documentType]
-				? pkp.documentTypeIcons[this.documentType]
-				: 'DocumentDefault';
-		},
-	},
 };
 </script>

src/components/FileMediaUploader/FileMediaUploader.mdx

@@ -0,0 +1,97 @@
+import {Meta, ArgTypes, Canvas} from '@storybook/addon-docs/blocks';
+import * as FileMediaUploaderStories from './FileMediaUploader.stories';
+
+<Meta of={FileMediaUploaderStories} />
+
+# FileMediaUploader
+
+A file upload component for media files with drag-and-drop support, progress tracking, genre selection, and resolution type selection.
+
+## Usage
+
+The `FileMediaUploader` component allows users to upload files via drag-and-drop or by clicking to browse. After each file is uploaded, users must select a genre and resolution type before submitting.
+
+Genre options should be filtered to only include dependent genres (e.g., Image, Multimedia). Each genre option includes a `supportsFileVariants` flag that controls whether the resolution type dropdown is enabled.
+
+### Basic usage
+
+```vue
+<template>
+	<FileMediaUploader
+		id="mediaUploader"
+		api-url="/api/v1/temporaryFiles"
+		:genre-options="genreOptions"
+		@uploaded="handleUploaded"
+	/>
+</template>
+
+<script setup>
+const genreOptions = [
+	{value: 9, label: 'Multimedia', supportsFileVariants: true},
+	{value: 10, label: 'Image', supportsFileVariants: true},
+	{value: 11, label: 'HTML Stylesheet', supportsFileVariants: false},
+];
+
+function handleUploaded(files) {
+	// files: [{fileId, genreId, variantType, name, mimetype, ...}]
+	console.log('Uploaded files:', files);
+}
+</script>
+```
+
+### Tracking unsaved changes
+
+Listen to `file-count-change` to know when the user has staged at least one file. Useful for warning before closing a modal with pending uploads.
+
+```vue
+<FileMediaUploader
+	id="mediaUploader"
+	api-url="/api/v1/temporaryFiles"
+	:genre-options="genreOptions"
+	@uploaded="handleUploaded"
+	@file-count-change="handleFileCountChange"
+/>
+```
+
+## Features
+
+- **Drag and Drop**: Users can drag files directly onto the dropzone area
+- **Click to Upload**: Users can click to open the file browser
+- **Progress Tracking**: Shows upload progress with a progress bar and percentage
+- **Genre Selection**: After upload, users select a genre from a dropdown (required)
+- **Resolution Type Selection**: Users select a resolution type (Web or High-resolution). The dropdown is disabled for genres that do not support high-resolution versions
+- **File Removal**: Users can remove files before uploading
+- **Error Handling**: Displays error messages when uploads fail
+
+## Props
+
+<ArgTypes />
+
+## Events
+
+### `uploaded`
+
+Emitted when the user clicks the "Upload Files" button after all files have been uploaded and assigned a genre and resolution type.
+
+**Payload**: An array of file objects with the following structure:
+
+```js
+[
+	{
+		fileId: 123,
+		genreId: 10,
+		variantType: 'web',
+		name: 'photo.jpg',
+		mimetype: 'image/jpeg',
+		// ...other server response fields
+	},
+];
+```
+
+### `fileCountChange`
+
+Emitted on file count changes (add/remove/failed upload). Useful for parents that need to know if anything is staged - e.g., to trigger an "unsaved changes" warning before closing a modal.
+
+**Payload**: `Number` — current file count.
+
+<Canvas of={FileMediaUploaderStories.Default} />

src/components/FileMediaUploader/FileMediaUploader.stories.js

@@ -0,0 +1,73 @@
+import FileMediaUploader from './FileMediaUploader.vue';
+import {http, HttpResponse, delay} from 'msw';
+import dropzoneOptions from '@/mocks/dropzoneOptions';
+import articleComponentGenres from '@/mocks/articleComponentGenres';
+import {useLocalize} from '@/composables/useLocalize';
+
+export default {
+	title: 'Components/FileMediaUploader',
+	component: FileMediaUploader,
+};
+
+const {localize} = useLocalize();
+
+const genreOptions = articleComponentGenres
+	.filter((genre) => genre.dependent)
+	.map((genre) => ({
+		value: genre.id,
+		label: localize(genre.name),
+		supportsFileVariants: genre.supportsFileVariants,
+	}));
+
+export const Default = {
+	render: (args) => ({
+		components: {FileMediaUploader},
+		setup() {
+			function onUploaded(files) {
+				console.log('Uploaded files:', JSON.stringify(files, null, 2));
+				alert(
+					`Uploaded ${files.length} file(s):\n${files.map((f) => `- ${f.name} (genreId: ${f.genreId})`).join('\n')}`,
+				);
+			}
+
+			return {args, onUploaded};
+		},
+		template: `
+			<FileMediaUploader
+				v-bind="args"
+				@uploaded="onUploaded"
+			/>
+		`,
+	}),
+	args: {
+		id: 'fileMediaUploader',
+		apiUrl: 'https://mock/index.php/publicknowledge/api/v1/temporaryFiles',
+		genreOptions,
+		options: dropzoneOptions,
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/temporaryFiles',
+					async ({request}) => {
+						// Simulate upload delay
+						await delay(1500);
+
+						const formData = await request.formData();
+						const file = formData.get('file');
+						const fileName =
+							file?.name || formData.get('name') || 'uploaded-file';
+
+						return HttpResponse.json({
+							id: Math.floor(Math.random() * 1000) + 1,
+							name: fileName,
+							mimetype: file?.type || 'application/octet-stream',
+							documentType: 'default',
+						});
+					},
+				),
+			],
+		},
+	},
+};