Skip to content

Commit 93d7fa5

Browse files
author
Julien Veyssier
committed
loading animation when inserting image link or uploading image
Signed-off-by: Julien Veyssier <[email protected]>
1 parent 2661da8 commit 93d7fa5

File tree

3 files changed

+46
-45
lines changed

3 files changed

+46
-45
lines changed

‎lib/Controller/ImageController.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
use OCA\Text\Service\ImageService;
3030
use OCP\AppFramework\Controller;
3131
use OCP\AppFramework\Http\DataResponse;
32-
use OCP\AppFramework\Http\Response;
3332
use OCP\IRequest;
3433

3534
class ImageController extends Controller {

‎lib/Service/ImageService.php‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@
2727
namespace OCA\Text\Service;
2828

2929
use Exception;
30-
use OCP\Files\Node;
31-
use OCP\Files\FileInfo;
3230
use OCP\Files\Folder;
3331
use Throwable;
3432
use GuzzleHttp\Exception\ClientException;
@@ -82,41 +80,48 @@ public function __construct(IRootFolder $rootFolder,
8280
public function downloadImageLink(string $link, string $userId): array {
8381
$fileName = (string) time();
8482
$saveDir = $this->getOrCreateTextDirectory($userId);
85-
$savedFile = $saveDir->newFile($fileName);
86-
$resource = $savedFile->fopen('w');
87-
$res = $this->simpleDownload($link, $resource);
88-
if (is_resource($resource)) {
89-
fclose($resource);
90-
}
91-
$savedFile->touch();
92-
if (isset($res['Content-Type'])) {
93-
if ($res['Content-Type'] === 'image/jpg') {
94-
$fileName = $fileName . '.jpg';
95-
} elseif ($res['Content-Type'] === 'image/png') {
96-
$fileName = $fileName . '.png';
97-
} else {
83+
if ($saveDir !== null) {
84+
$savedFile = $saveDir->newFile($fileName);
85+
$resource = $savedFile->fopen('w');
86+
$res = $this->simpleDownload($link, $resource);
87+
if (is_resource($resource)) {
88+
fclose($resource);
89+
}
90+
$savedFile->touch();
91+
if (isset($res['Content-Type'])) {
92+
if ($res['Content-Type'] === 'image/jpg') {
93+
$fileName = $fileName . '.jpg';
94+
} elseif ($res['Content-Type'] === 'image/png') {
95+
$fileName = $fileName . '.png';
96+
} else {
97+
return [
98+
'error' => 'Unsupported file type',
99+
];
100+
}
101+
$targetPath = $saveDir->getPath() . '/' . $fileName;
102+
$savedFile->move($targetPath);
103+
$path = preg_replace('/^files/', '', $savedFile->getInternalPath());
104+
// get file type and name
98105
return [
99-
'error' => 'Unsupported file type',
106+
'name' => $fileName,
107+
'path' => $path,
100108
];
109+
} else {
110+
return $res;
101111
}
102-
$targetPath = $saveDir->getPath() . '/' . $fileName;
103-
$savedFile->move($targetPath);
104-
$path = preg_replace('/^files/', '', $savedFile->getInternalPath());
105-
// get file type and name
112+
} else {
106113
return [
107-
'name' => $fileName,
108-
'path' => $path,
114+
'error' => 'Impossible to create /Text directory',
109115
];
110-
} else {
111-
return $res;
112116
}
113117
}
114118

115-
private function getOrCreateTextDirectory(string $userId): ?Node {
119+
private function getOrCreateTextDirectory(string $userId): ?Folder {
116120
$userFolder = $this->rootFolder->getUserFolder($userId);
117121
if ($userFolder->nodeExists('/Text')) {
118122
$node = $userFolder->get('Text');
119-
if ($node->getType() === FileInfo::TYPE_FOLDER) {
123+
//if ($node->getType() === FileInfo::TYPE_FOLDER) {
124+
if ($node instanceof Folder) {
120125
return $node;
121126
} else {
122127
return null;
@@ -151,11 +156,11 @@ private function simpleDownload(string $url, $resource, array $params = [], stri
151156

152157
if ($method === 'GET') {
153158
$response = $client->get($url, $options);
154-
} else if ($method === 'POST') {
159+
} elseif ($method === 'POST') {
155160
$response = $client->post($url, $options);
156-
} else if ($method === 'PUT') {
161+
} elseif ($method === 'PUT') {
157162
$response = $client->put($url, $options);
158-
} else if ($method === 'DELETE') {
163+
} elseif ($method === 'DELETE') {
159164
$response = $client->delete($url, $options);
160165
} else {
161166
return ['error' => 'Bad HTTP method'];

‎src/components/MenuBar.vue‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
ref="imageActions"
4747
:default-icon="'icon-image'">
4848
<button slot="icon"
49-
class="icon-image"
49+
:class="{ 'icon-image': true, 'loading-small': uploadingImage }"
5050
:title="icon.label"
5151
:aria-label="icon.label"
5252
:aria-haspopup="true" />
@@ -183,6 +183,7 @@ export default {
183183
submenuVisibility: {},
184184
lastImagePath: null,
185185
showImageLinkPrompt: false,
186+
uploadingImage: false,
186187
icons: [...menuBarIcons],
187188
}
188189
},
@@ -310,61 +311,58 @@ export default {
310311
this.$set(this.submenuVisibility, icon.label, !lastValue)
311312
},
312313
onUploadImage(command) {
313-
console.debug('onUploadImage', command)
314314
this.imageCommand = command
315315
this.$refs.imageFileInput.click()
316316
},
317317
onImageFilePicked(event) {
318+
this.uploadingImage = true
319+
318320
const client = OC.Files.getClient()
319321
const uploadId = new Date().getTime()
320-
console.debug('onImageFilePicked', event)
321322
const files = event.target.files
322323
const filename = uploadId + '-' + files[0].name
323324
const targetDirectoryPath = '/Text'
324325
const targetFilePath = targetDirectoryPath + '/' + filename
325326
const image = files[0]
326-
console.debug('targetFilePath', targetFilePath)
327-
console.debug('image', image)
328327
329328
// Clear input to ensure that the change event will be emitted if
330329
// the same file is picked again.
331330
event.target.value = ''
332331
333332
// create /Text
334333
client.getFileInfo(targetDirectoryPath).then((status, fileInfo) => {
335-
console.debug('INFO SUCCESS!!', fileInfo)
336334
if (fileInfo.type === 'dir') {
337335
this.uploadImage(targetFilePath, image)
336+
} else {
337+
this.uploadingImage = false
338338
}
339339
}).catch((error) => {
340-
console.debug('INFO error', error)
340+
console.debug('/Text directory does not exist', error)
341341
client.createDirectory('/Text').then((response) => {
342-
console.debug('MKDIR SUCCESS!!')
343342
this.uploadImage(targetFilePath, image)
344343
}).catch((error) => {
345-
console.debug('MKDIR error')
346344
console.error(error)
345+
this.uploadingImage = false
347346
})
348347
})
349348
},
350349
uploadImage(targetFilePath, image) {
351350
const client = OC.Files.getClient()
352-
console.debug('OC.Files.getClient()', OC.Files.getClient())
353351
client.putFileContents(targetFilePath, image, {
354352
contentType: image.type,
355353
contentLength: image.size,
356354
overwrite: false,
357355
}).then((response) => {
358-
console.debug('file uploaded!!!!!!!!')
359356
this.insertImage(targetFilePath, this.imageCommand)
360357
}).catch((error) => {
361358
console.error(error)
362359
}).then(() => {
363-
console.debug('THEN')
364360
this.imageCommand = null
361+
this.uploadingImage = false
365362
})
366363
},
367364
onImageLinksubmit(event, command) {
365+
this.uploadingImage = true
368366
this.showImageLinkPrompt = false
369367
const link = event.target[1].value
370368
this.$refs.imageActions[0].closeMenu()
@@ -374,12 +372,11 @@ export default {
374372
}
375373
const url = generateUrl('/apps/text/image/link')
376374
axios.post(url, params).then((response) => {
377-
console.debug('link success', response.data)
378375
this.insertImage(response.data?.path, command)
379376
}).catch((error) => {
380-
console.debug('link error', error)
377+
console.error(error)
381378
}).then(() => {
382-
379+
this.uploadingImage = false
383380
})
384381
},
385382
showImagePrompt(command) {

0 commit comments

Comments
 (0)