Merge pull request #2378 from nextcloud/enh/2339/non-image-media-attachments

Non-image media attachments

Author: Julien Veyssier

appinfo/routes.php

@@ -27,9 +27,12 @@
 
 return [
 	'routes' => [
-		['name' => 'Image#insertImageFile', 'url' => '/image/filepath', 'verb' => 'POST'],
-		['name' => 'Image#uploadImage', 'url' => '/image/upload', 'verb' => 'POST'],
-		['name' => 'Image#getImage', 'url' => '/image', 'verb' => 'GET'],
+		['name' => 'Attachment#insertAttachmentFile', 'url' => '/attachment/filepath', 'verb' => 'POST'],
+		['name' => 'Attachment#uploadAttachment', 'url' => '/attachment/upload', 'verb' => 'POST'],
+		['name' => 'Attachment#getImageFile', 'url' => '/image', 'verb' => 'GET'],
+		['name' => 'Attachment#getMediaFile', 'url' => '/media', 'verb' => 'GET'],
+		['name' => 'Attachment#getMediaFilePreview', 'url' => '/mediaPreview', 'verb' => 'GET'],
+		['name' => 'Attachment#getMediaFileMetadata', 'url' => '/mediaMetadata', 'verb' => 'GET'],
 
 		['name' => 'Session#create', 'url' => '/session/create', 'verb' => 'PUT'],
 		['name' => 'Session#fetch', 'url' => '/session/fetch', 'verb' => 'POST'],

cypress/e2e/images.spec.js cypress/e2e/attachments.spec.jscypress/e2e/images.spec.js renamed to cypress/e2e/attachments.spec.js

@@ -28,20 +28,19 @@ const randUser2 = randHash()
 let currentUser = randUser
 const attachmentFileNameToId = {}
 
-const ACTION_UPLOAD_LOCAL_FILE = 'insert-image-upload'
-const ACTION_INSERT_FROM_FILES = 'insert-image-insert'
-// const ACTION_INSERT_FROM_LINK = 3
+const ACTION_UPLOAD_LOCAL_FILE = 'insert-attachment-upload'
+const ACTION_INSERT_FROM_FILES = 'insert-attachment-insert'
 
 /**
  * @param {string} name name of file
  * @param {string|null} requestAlias alias name
  */
 function attachFile(name, requestAlias = null) {
 	if (requestAlias) {
-		cy.intercept({ method: 'POST', url: '**/upload' }).as(requestAlias)
+		cy.intercept({ method: 'POST', url: '**/text/attachment/upload?**' }).as(requestAlias)
 	}
 	return cy.getEditor()
-		.find('input[type="file"][data-text-el="image-file-input"]')
+		.find('input[type="file"][data-text-el="attachment-file-input"]')
 		.attachFile(name)
 }
 
@@ -56,12 +55,12 @@ function fixedEncodeURIComponent(str) {
 }
 
 /**
- * Open the image action menu and click one action
+ * Open the attachment action menu and click one action
  *
  * @param {string} actionName position of the action to be clicked
  */
-const clickOnImageAction = (actionName) => {
-	cy.getActionEntry('insert-image')
+const clickOnAttachmentAction = (actionName) => {
+	cy.getActionEntry('insert-attachment')
 		.click()
 
 	return cy.get('.v-popper__wrapper .open')
@@ -70,69 +69,79 @@ const clickOnImageAction = (actionName) => {
 }
 
 /**
- * Check if an image is visible in the document
+ * Check if an attachment is visible in the document
  *
  * @param {number} documentId file ID of the current document
- * @param {string} imageName file name to be checked
- * @param {number} imageId file id
- * @param {number|undefined} index index of image in the document
+ * @param {string} fileName attachment file name to be checked
+ * @param {number} fileId attachment file id
+ * @param {number|undefined} index index of the attachment in the document
+ * @param {boolean} isImage is the attachment an image or a media file?
  */
-const checkImage = (documentId, imageName, imageId, index) => {
-	const encodedName = fixedEncodeURIComponent(imageName)
+const checkAttachment = (documentId, fileName, fileId, index, isImage = true) => {
+	const encodedName = fixedEncodeURIComponent(fileName)
 	const src = `.attachments.${documentId}/${encodedName}`
 
-	cy.log('Check the image is visible and well formed', documentId, imageName, imageId, index, encodedName)
+	cy.log('Check the attachment is visible and well formed', documentId, fileName, fileId, index, encodedName)
 	return new Cypress.Promise((resolve, reject) => {
 		cy.get(`#editor [data-component="image-view"][data-src="${src}"]`)
 			.find('.image__view') // wait for load finish
 			.within(($el) => {
-				// keep track that we have created this image in the attachment dir
+				// keep track that we have created this attachment in the attachment dir
 				if (!attachmentFileNameToId[documentId]) {
 					attachmentFileNameToId[documentId] = {}
 				}
 
-				attachmentFileNameToId[documentId][imageName] = imageId
+				attachmentFileNameToId[documentId][fileName] = fileId
 
 				if (index > 0) {
-					expect(imageName).include(`(${index + 1})`)
+					expect(fileName).include(`(${index + 1})`)
 				}
 
+				const srcPathEnd = isImage ? 'image' : 'mediaPreview'
+				const srcFileNameParam = isImage ? 'imageFileName' : 'mediaFileName'
+
 				cy.wrap($el)
 					.should('be.visible')
 					.find('img')
 					.should('have.attr', 'src')
-					.should('contain', 'apps/text/image?documentId=' + documentId)
-					.should('contain', 'imageFileName=' + encodeURIComponent(imageName))
-
-				return cy.wrap($el)
-					.find('.image__caption input')
-					.should('be.visible')
-					.should('have.value', imageName)
+					.should('contain', 'apps/text/' + srcPathEnd + '?documentId=' + documentId)
+					.should('contain', srcFileNameParam + '=' + encodeURIComponent(fileName))
+
+				return isImage
+					? cy.wrap($el)
+						.find('.image__caption input')
+						.should('be.visible')
+						.should('have.value', fileName)
+					: cy.wrap($el)
+						.find('.metadata .name')
+						.should('be.visible')
+						.should('have.text', fileName)
 
 			})
 			.then(resolve, reject)
 	})
 }
 
 /**
- * Wait for the image insertion request to finish and check if the image is visible
+ * Wait for the attachment insertion request to finish and check if the attachment is visible
  *
  * @param {string} requestAlias Alias of the request we are waiting for
- * @param {number|undefined} index of image
+ * @param {number|undefined} index of the attachment
+ * @param {boolean} isImage is the attachment an image or a media file?
  */
-const waitForRequestAndCheckImage = (requestAlias, index) => {
+const waitForRequestAndCheckAttachment = (requestAlias, index, isImage = true) => {
 	return cy.wait('@' + requestAlias)
 		.then((req) => {
 			// the name of the created file on NC side is returned in the response
 			const fileId = req.response.body.id
 			const fileName = req.response.body.name
 			const documentId = req.response.body.documentId
 
-			return checkImage(documentId, fileName, fileId, index)
+			return checkAttachment(documentId, fileName, fileId, index, isImage)
 		})
 }
 
-describe('Test all image insertion methods', () => {
+describe('Test all attachment insertion methods', () => {
 	before(() => {
 		initUserAndFiles(randUser, 'test.md', 'empty.md')
 
@@ -154,10 +163,10 @@ describe('Test all image insertion methods', () => {
 		cy.showHiddenFiles()
 	})
 
-	it('Insert an image from files', () => {
+	it('Insert an image file from Files', () => {
 		cy.openFile('test.md')
 
-		clickOnImageAction(ACTION_INSERT_FROM_FILES)
+		clickOnAttachmentAction(ACTION_INSERT_FROM_FILES)
 			.then(() => {
 				const requestAlias = 'insertPathRequest'
 				cy.intercept({ method: 'POST', url: '**/filepath' }).as(requestAlias)
@@ -167,27 +176,43 @@ describe('Test all image insertion methods', () => {
 				cy.log('Click OK in the filepicker')
 				cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
 
-				return waitForRequestAndCheckImage(requestAlias)
+				return waitForRequestAndCheckAttachment(requestAlias)
 			})
 	})
 
-	it('Upload a local image', () => {
+	it('Upload a local image file', () => {
 		cy.openFile('test.md')
 		// in this case we almost could just attach the file to the input
 		// BUT we still need to click on the action because otherwise the command
 		// is not handled correctly when the upload has been done in <MenuBar>
-		clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE)
+		clickOnAttachmentAction(ACTION_UPLOAD_LOCAL_FILE)
 			.then(() => {
 				const requestAlias = 'uploadRequest'
 				cy.log('Upload the file through the input')
 
 				attachFile('table.png', requestAlias)
 
-				return waitForRequestAndCheckImage(requestAlias)
+				return waitForRequestAndCheckAttachment(requestAlias)
+			})
+	})
+
+	it('Upload a local media file', () => {
+		cy.openFile('test.md')
+		// in this case we almost could just attach the file to the input
+		// BUT we still need to click on the action because otherwise the command
+		// is not handled correctly when the upload has been done in <MenuBar>
+		clickOnAttachmentAction(ACTION_UPLOAD_LOCAL_FILE)
+			.then(() => {
+				const requestAlias = 'uploadMediaRequest'
+				cy.log('Upload the file through the input')
+
+				attachFile('file.txt.gz', requestAlias)
+
+				return waitForRequestAndCheckAttachment(requestAlias, undefined, false)
 			})
 	})
 
-	it('Upload images with the same name', () => {
+	it('Upload image files with the same name', () => {
 		// make sure we start from an emtpy file even on retries
 		const filename = randHash() + '.md'
 
@@ -196,14 +221,14 @@ describe('Test all image insertion methods', () => {
 		cy.openFile(filename)
 
 		const assertImage = index => {
-			return clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE)
+			return clickOnAttachmentAction(ACTION_UPLOAD_LOCAL_FILE)
 				.then(() => {
 					const requestAlias = `uploadRequest${index}`
 					cy.log('Upload the file through the input', { index })
 
 					attachFile('github.png', requestAlias)
 
-					return waitForRequestAndCheckImage(requestAlias, index)
+					return waitForRequestAndCheckAttachment(requestAlias, index)
 				})
 		}
 
@@ -219,15 +244,15 @@ describe('Test all image insertion methods', () => {
 			})
 	})
 
-	it('test if image files are in the attachment folder', () => {
-		// check we stored the image names/ids
+	it('test if attachment files are in the attachment folder', () => {
+		// check we stored the attachment names/ids
 
 		cy.get('.files-fileList tr[data-file="test.md"]', { timeout: 10000 })
 			.should('have.attr', 'data-id')
 			.then((documentId) => {
 				const files = attachmentFileNameToId[documentId]
 
-				cy.expect(Object.keys(files)).to.have.lengthOf(2)
+				cy.expect(Object.keys(files)).to.have.lengthOf(3)
 				cy.openFolder('.attachments.' + documentId)
 				cy.screenshot()
 				for (const name in files) {
@@ -277,7 +302,7 @@ describe('Test all image insertion methods', () => {
 						.should('exist')
 						.should('have.attr', 'data-id')
 						// these are new copied attachment files
-						// so they should not have the same IDs than the ones created when uploading the images
+						// so they should not have the same IDs than the ones created when uploading the files
 						.should('not.eq', String(files[name]))
 				}
 			})
@@ -339,7 +364,7 @@ describe('Test all image insertion methods', () => {
 						.should('exist')
 						.should('have.attr', 'data-id')
 						// these are new copied attachment files
-						// so they should not have the same IDs than the ones created when uploading the images
+						// so they should not have the same IDs than the ones created when uploading the files
 						.should('not.eq', String(files[name]))
 				}
 			})

cypress/fixtures/file.txt.gz

@@ -13,7 +13,7 @@
 	OC = { webroot: '/OC_WEBROOT' }
 	</script>
     <script type="module">
-	    import { RichTextReader, ImageResolver, IMAGE_RESOLVER } from './src/package.js'
+	    import { RichTextReader, AttachmentResolver, ATTACHMENT_RESOLVER } from './src/package.js'
 		import Vue from 'vue'
 		import content from './src/tests/fixtures/basic.md?raw'
 		const app = new Vue({
@@ -25,7 +25,7 @@
 			provide() {
 				const val = {}
 				Object.defineProperties(val, {
-					[IMAGE_RESOLVER]: { get: () => this.$imageResolver },
+					[ATTACHMENT_RESOLVER]: { get: () => this.$attachmentResolver },
 				})
 				return val
 			},
@@ -47,7 +47,7 @@
 				}),
 			]),
 			created() {
-				this.$imageResolver = new ImageResolver({
+				this.$attachmentResolver = new AttachmentResolver({
 					currentDirectory: '/dir/',
 					shareToken: 'SHARE_TOKEN',
 					user: { uid: 'USER_UID' },