loading animation when inserting image link or uploading image

Signed-off-by: Julien Veyssier <[email protected]>

lib/Controller/ImageController.php

@@ -29,7 +29,6 @@
 use OCA\Text\Service\ImageService;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\DataResponse;
-use OCP\AppFramework\Http\Response;
 use OCP\IRequest;
 
 class ImageController extends Controller {

lib/Service/ImageService.php

@@ -27,8 +27,6 @@
 namespace OCA\Text\Service;
 
 use Exception;
-use OCP\Files\Node;
-use OCP\Files\FileInfo;
 use OCP\Files\Folder;
 use Throwable;
 use GuzzleHttp\Exception\ClientException;
@@ -82,41 +80,48 @@ public function __construct(IRootFolder $rootFolder,
 	public function downloadImageLink(string $link, string $userId): array {
 		$fileName = (string) time();
 		$saveDir = $this->getOrCreateTextDirectory($userId);
-		$savedFile = $saveDir->newFile($fileName);
-		$resource = $savedFile->fopen('w');
-		$res = $this->simpleDownload($link, $resource);
-		if (is_resource($resource)) {
-			fclose($resource);
-		}
-		$savedFile->touch();
-		if (isset($res['Content-Type'])) {
-			if ($res['Content-Type'] === 'image/jpg') {
-				$fileName = $fileName . '.jpg';
-			} elseif ($res['Content-Type'] === 'image/png') {
-				$fileName = $fileName . '.png';
-			} else {
+		if ($saveDir !== null) {
+			$savedFile = $saveDir->newFile($fileName);
+			$resource = $savedFile->fopen('w');
+			$res = $this->simpleDownload($link, $resource);
+			if (is_resource($resource)) {
+				fclose($resource);
+			}
+			$savedFile->touch();
+			if (isset($res['Content-Type'])) {
+				if ($res['Content-Type'] === 'image/jpg') {
+					$fileName = $fileName . '.jpg';
+				} elseif ($res['Content-Type'] === 'image/png') {
+					$fileName = $fileName . '.png';
+				} else {
+					return [
+						'error' => 'Unsupported file type',
+					];
+				}
+				$targetPath = $saveDir->getPath() . '/' . $fileName;
+				$savedFile->move($targetPath);
+				$path = preg_replace('/^files/', '', $savedFile->getInternalPath());
+				// get file type and name
 				return [
-					'error' => 'Unsupported file type',
+					'name' => $fileName,
+					'path' => $path,
 				];
+			} else {
+				return $res;
 			}
-			$targetPath = $saveDir->getPath() . '/' . $fileName;
-			$savedFile->move($targetPath);
-			$path = preg_replace('/^files/', '', $savedFile->getInternalPath());
-			// get file type and name
+		} else {
 			return [
-				'name' => $fileName,
-				'path' => $path,
+				'error' => 'Impossible to create /Text directory',
 			];
-		} else {
-			return $res;
 		}
 	}
 
-	private function getOrCreateTextDirectory(string $userId): ?Node {
+	private function getOrCreateTextDirectory(string $userId): ?Folder {
 		$userFolder = $this->rootFolder->getUserFolder($userId);
 		if ($userFolder->nodeExists('/Text')) {
 			$node = $userFolder->get('Text');
-			if ($node->getType() === FileInfo::TYPE_FOLDER) {
+			//if ($node->getType() === FileInfo::TYPE_FOLDER) {
+			if ($node instanceof Folder) {
 				return $node;
 			} else {
 				return null;
@@ -151,11 +156,11 @@ private function simpleDownload(string $url, $resource, array $params = [], stri
 
 			if ($method === 'GET') {
 				$response = $client->get($url, $options);
-			} else if ($method === 'POST') {
+			} elseif ($method === 'POST') {
 				$response = $client->post($url, $options);
-			} else if ($method === 'PUT') {
+			} elseif ($method === 'PUT') {
 				$response = $client->put($url, $options);
-			} else if ($method === 'DELETE') {
+			} elseif ($method === 'DELETE') {
 				$response = $client->delete($url, $options);
 			} else {
 				return ['error' => 'Bad HTTP method'];

src/components/MenuBar.vue

@@ -46,7 +46,7 @@
 						ref="imageActions"
 						:default-icon="'icon-image'">
 						<button slot="icon"
-							class="icon-image"
+							:class="{ 'icon-image': true, 'loading-small': uploadingImage }"
 							:title="icon.label"
 							:aria-label="icon.label"
 							:aria-haspopup="true" />
@@ -190,6 +190,7 @@ export default {
 			submenuVisibility: {},
 			lastImagePath: null,
 			showImageLinkPrompt: false,
+			uploadingImage: false,
 			icons: [...menuBarIcons],
 		}
 	},
@@ -329,61 +330,58 @@ export default {
 			this.$set(this.submenuVisibility, icon.label, !lastValue)
 		},
 		onUploadImage(command) {
-			console.debug('onUploadImage', command)
 			this.imageCommand = command
 			this.$refs.imageFileInput.click()
 		},
 		onImageFilePicked(event) {
+			this.uploadingImage = true
+
 			const client = OC.Files.getClient()
 			const uploadId = new Date().getTime()
-			console.debug('onImageFilePicked', event)
 			const files = event.target.files
 			const filename = uploadId + '-' + files[0].name
 			const targetDirectoryPath = '/Text'
 			const targetFilePath = targetDirectoryPath + '/' + filename
 			const image = files[0]
-			console.debug('targetFilePath', targetFilePath)
-			console.debug('image', image)
 
 			// Clear input to ensure that the change event will be emitted if
 			// the same file is picked again.
 			event.target.value = ''
 
 			// create /Text
 			client.getFileInfo(targetDirectoryPath).then((status, fileInfo) => {
-				console.debug('INFO SUCCESS!!', fileInfo)
 				if (fileInfo.type === 'dir') {
 					this.uploadImage(targetFilePath, image)
+				} else {
+					this.uploadingImage = false
 				}
 			}).catch((error) => {
-				console.debug('INFO error', error)
+				console.debug('/Text directory does not exist', error)
 				client.createDirectory('/Text').then((response) => {
-					console.debug('MKDIR SUCCESS!!')
 					this.uploadImage(targetFilePath, image)
 				}).catch((error) => {
-					console.debug('MKDIR error')
 					console.error(error)
+					this.uploadingImage = false
 				})
 			})
 		},
 		uploadImage(targetFilePath, image) {
 			const client = OC.Files.getClient()
-			console.debug('OC.Files.getClient()', OC.Files.getClient())
 			client.putFileContents(targetFilePath, image, {
 				contentType: image.type,
 				contentLength: image.size,
 				overwrite: false,
 			}).then((response) => {
-				console.debug('file uploaded!!!!!!!!')
 				this.insertImage(targetFilePath, this.imageCommand)
 			}).catch((error) => {
 				console.error(error)
 			}).then(() => {
-				console.debug('THEN')
 				this.imageCommand = null
+				this.uploadingImage = false
 			})
 		},
 		onImageLinksubmit(event, command) {
+			this.uploadingImage = true
 			this.showImageLinkPrompt = false
 			const link = event.target[1].value
 			this.$refs.imageActions[0].closeMenu()
@@ -393,12 +391,11 @@ export default {
 			}
 			const url = generateUrl('/apps/text/image/link')
 			axios.post(url, params).then((response) => {
-				console.debug('link success', response.data)
 				this.insertImage(response.data?.path, command)
 			}).catch((error) => {
-				console.debug('link error', error)
+				console.error(error)
 			}).then(() => {
-
+				this.uploadingImage = false
 			})
 		},
 		showImagePrompt(command) {