Skip to content

Commit 8a4ef5d

Browse files
JulienVannier66JulienVannier66
committed
Update u-edit file-uploader to use OSS::Upload area component
1 parent 9999b41 commit 8a4ef5d

File tree

10 files changed

+90
-123
lines changed

10 files changed

+90
-123
lines changed

‎addon/components/drag-and-drop/component.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,16 @@ export default Component.extend({
1717
if (this._onDragElement && this.onDragClass) {
1818
return this.onDragClass;
1919
}
20+
21+
return;
2022
}),
2123

2224
dragElementInZoneClass: computed('_onDragElementInZone', 'onDragInZoneClass', function () {
2325
if (this._onDragElementInZone && this.onDragInZoneClass) {
2426
return this.onDragInZoneClass;
2527
}
28+
29+
return;
2630
}),
2731

2832
didInsertElement() {

‎addon/components/layout/side-hover-panel.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class={{this.computedClassNames}} {{did-insert this.initialize}} {{will-destroy this.teardown}} ...attributes>
2-
<div role="button" class="panel-backdrop hidden" {{on 'click' this.backdrop}}></div>
2+
<div role="button" class="panel-backdrop hidden" {{on "click" this.backdrop}}></div>
33
<div class="hover-panel">{{yield}}</div>
44
</div>
55

‎addon/components/layout/side-hover-panel.ts

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface SideHoverPanelArgs {
99
disableScrolling: boolean;
1010
isOverContent: boolean;
1111
shouldAnimate: boolean;
12-
backdropAction: () => void;
12+
backdropAction?(): void;
1313
}
1414

1515
export default class SideHoverPanel extends Component<SideHoverPanelArgs> {
@@ -24,10 +24,6 @@ export default class SideHoverPanel extends Component<SideHoverPanelArgs> {
2424
return classes.join(' ');
2525
}
2626

27-
get backdropAction(): () => void {
28-
return this.args.backdropAction;
29-
}
30-
3127
get side(): string {
3228
return this.args.side ?? 'right';
3329
}
@@ -52,7 +48,8 @@ export default class SideHoverPanel extends Component<SideHoverPanelArgs> {
5248
return this.args.stickTo ?? 'right';
5349
}
5450

55-
initialize(element: HTMLElement) {
51+
@action
52+
initialize(element: HTMLElement): void {
5653
this.hoverPanel = element.querySelector('.hover-panel')! as HTMLElement;
5754
this.hoverPanel.classList.add(this.side + '_side');
5855
this.hoverPanel.classList.add(this.stickTo + '_align');
@@ -63,7 +60,7 @@ export default class SideHoverPanel extends Component<SideHoverPanelArgs> {
6360

6461
this.hoverPanel.classList.add(this.side + '_transform');
6562

66-
if (this.backdropAction != null) {
63+
if (this.args.backdropAction) {
6764
this.panelBackdrop = element.querySelector('.panel-backdrop');
6865
this.panelBackdrop!.classList.remove('hidden');
6966
}
@@ -76,7 +73,8 @@ export default class SideHoverPanel extends Component<SideHoverPanelArgs> {
7673
}
7774
}
7875

79-
teardown() {
76+
@action
77+
teardown(): void {
8078
this.hoverPanel?.remove();
8179
this.panelBackdrop?.classList.add('hidden');
8280
if (this.disableScrolling) {

‎addon/components/u-edit/shared-triggers/modals/file-uploader.hbs

Lines changed: 13 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,61 +7,27 @@
77
</div>
88
{{/if}}
99
<div class="form-group">
10-
<label>{{t (concat "uedit_editor.toolbar." this.titleKey ".by_url.label")}}</label>
10+
<label>{{t (concat "uedit_editor.toolbar.by_url")}}</label>
1111
<Input
12-
@value={{this.directURL}} @placeholder={{t (concat "uedit_editor.toolbar." this.titleKey ".by_url.placeholder")}}
12+
@value={{this.directURL}} @placeholder={{t (concat "uedit_editor.toolbar." this.titleKey ".placeholder")}}
1313
class="form-control upf-input" />
1414
</div>
1515

16-
{{#drag-and-drop
17-
class="drop-zone upf-align--center" onDragClass="drop-zone-active" onDropFiles=this.onDropFiles}}
18-
<img src="/@upfluence/ember-upf-utils/images/upload.svg" alt={{t (concat "uedit_editor.toolbar." this.titleKey ".title")}} />
19-
20-
<br/>
21-
22-
{{#if this.processing}}
23-
<h4>{{t (concat "uedit_editor.toolbar." this.titleKey ".processing") filename=this.file.name}}</h4>
24-
{{/if}}
25-
26-
<div class={{if this.processing 'hidden'}}>
27-
<h3>{{t (concat "uedit_editor.toolbar." this.titleKey ".drop_file")}}</h3>
28-
29-
<p>
30-
{{t (concat "uedit_editor.toolbar." this.titleKey ".or")}} <br />
31-
32-
{{file-uploader
33-
file=this.droppedFile allowedExtensions=this.allowedExtensions headers=this.uploaderHeaders
34-
extra=this.uploaderExtra maxSize="10 MB" text=(t (concat "uedit_editor.toolbar." this.titleKey ".browse"))
35-
beforeUpload=this.beforeUpload didError=this.onError didUpload=this.didUpload}}
36-
</p>
37-
</div>
38-
{{/drag-and-drop}}
39-
40-
{{#if (and this.file.name (not this.processing))}}
41-
<div class="uploaded-files margin-top-x-sm">
42-
<label>{{t (concat "uedit_editor.toolbar." this.titleKey ".processed_file.title")}}</label>
43-
44-
<div class="file">
45-
<div class="fx-row fx-gap-px-9 fx-xalign-center">
46-
<OSS::Icon @icon="fa-file-alt" class="text-size-7" />
47-
48-
<div>
49-
<span class="text-ellipsis-140">{{this.file.name}}</span>
50-
</div>
51-
</div>
52-
53-
<div class="status">
54-
<OSS::Icon @icon="fa-check-circle" class="font-color-success-500 font-size-lg" />
55-
</div>
56-
</div>
57-
</div>
58-
{{/if}}
16+
<OSS::UploadArea
17+
@size="lg"
18+
@uploader={{this.uploader}}
19+
@subtitle={{t (concat "uedit_editor.toolbar." this.titleKey ".subtitle")}}
20+
@rules={{this.fileUploadRules}}
21+
@onUploadSuccess={{this.onSuccessfulFileUpload}}
22+
@onFileDeletion={{this.onFileDeletion}}
23+
@privacy={{this.privacy}}
24+
@scope={{this.scope}}
25+
/>
5926
</:content>
6027

61-
6228
<:footer>
6329
<div class="fx-row fx-1 fx-malign-end fx-gap-px-10">
64-
<OSS::Button @label={{t (concat "uedit_editor.toolbar." this.titleKey ".cancel")}} {{on "click" @closeAction}} />
30+
<OSS::Button @label={{t (concat "uedit_editor.toolbar.cancel")}} {{on "click" @closeAction}} />
6531
<OSS::Button
6632
@skin="primary" @label={{t (concat "uedit_editor.toolbar." this.titleKey ".title")}}
6733
disabled={{and (not this.fileURL) (not this.directURL)}}

‎addon/components/u-edit/shared-triggers/modals/file-uploader.js

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎addon/components/u-edit/shared-triggers/modals/file-uploader.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
3+
import { action } from '@ember/object';
4+
import { inject as service } from '@ember/service';
5+
6+
import UploaderInterface from '@upfluence/oss-components/types/uploader';
7+
import { FileArtifact } from '@upfluence/oss-components/types/uploader';
8+
9+
interface UEditFileUploaderSignature {
10+
insertFile(fileURL: string): void;
11+
}
12+
13+
export default class UEditFileUploader extends Component<UEditFileUploaderSignature> {
14+
@service declare uploader: UploaderInterface;
15+
16+
privacy: string = 'public';
17+
scope: string = 'anonymous';
18+
19+
@tracked directURL: string | null = null;
20+
@tracked fileURL: string | null = null;
21+
22+
@action
23+
onSuccessfulFileUpload(artifact: FileArtifact): void {
24+
this.fileURL = artifact.url;
25+
}
26+
27+
@action
28+
onFileDeletion(): void {
29+
this.fileURL = null;
30+
}
31+
32+
@action
33+
addFile(): void {
34+
if (this.directURL) {
35+
this.args.insertFile(this.directURL);
36+
} else if (this.fileURL) {
37+
this.args.insertFile(this.fileURL);
38+
}
39+
this.directURL = this.fileURL = null;
40+
}
41+
}

‎addon/components/u-edit/shared-triggers/modals/image-upload.js renamed to ‎addon/components/u-edit/shared-triggers/modals/image-upload.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import UEDitFileUploader from '@upfluence/ember-upf-utils/components/u-edit/shared-triggers/modals/file-uploader';
2+
import { FileValidator } from '@upfluence/oss-components/addon/types/uploader';
23

34
export default class UEditImageUploadComponent extends UEDitFileUploader {
4-
allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'].join(',');
55
titleKey = 'image';
6+
fileUploadRules: FileValidator[] = [
7+
{
8+
type: 'filetype',
9+
value: ['jpg', 'jpeg', 'png', 'gif']
10+
}
11+
];
612
}

‎addon/components/u-edit/shared-triggers/modals/pdf-upload.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎addon/components/u-edit/shared-triggers/modals/pdf-upload.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import UEDitFileUploader from '@upfluence/ember-upf-utils/components/u-edit/shared-triggers/modals/file-uploader';
2+
import { FileValidator } from '@upfluence/oss-components/types/uploader';
3+
4+
export default class UEditPDFUploadComponent extends UEDitFileUploader {
5+
titleKey: string = 'pdf';
6+
fileUploadRules: FileValidator[] = [
7+
{
8+
type: 'filetype',
9+
value: ['pdf']
10+
}
11+
];
12+
}

‎translations/en-us.yaml

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -57,30 +57,16 @@ file_uploader:
5757
upload: Upload
5858
uedit_editor:
5959
toolbar:
60+
cancel: Cancel
61+
by_url: 'By URL:'
6062
image:
6163
title: Add Image
62-
by_url:
63-
label: 'By URL:'
64-
placeholder: https://example.org/image.png
65-
processing: 'Processing {filename}...'
66-
processed_file:
67-
title: Uploaded Files
68-
drop_file: Drop your file here
69-
or: or
70-
browse: Browse
71-
cancel: Cancel
64+
subtitle: File must be in jpg, jpeg, png, or gif format
65+
placeholder: https://example.org/image.png
7266
pdf:
7367
title: Add PDF
74-
by_url:
75-
label: 'By URL:'
76-
placeholder: https://example.org/file.pdf
77-
processing: 'Processing {filename}...'
78-
processed_file:
79-
title: Uploaded Files
80-
drop_file: Drop your file here
81-
or: or
82-
browse: Browse
83-
cancel: Cancel
68+
subtitle: File must be in pdf format
69+
placeholder: https://example.org/file.pdf
8470
alert:
8571
title: PDF display optimization
8672
subtitle: Some mobile browsers may have trouble displaying PDFs correctly. For a better experience, we recommend using the native PDF upload feature.

0 commit comments

Comments
 (0)