Skip to content

Commit dcf6f3e

Browse files
amir78729amir78729
authored
fix(file-input): resolve preview section re-render issues (#507)
* fix(file-input): resolve preview section re-render issues * docs: update changeset
1 parent f19ed7c commit dcf6f3e

3 files changed

Lines changed: 37 additions & 34 deletions

File tree

‎.changeset/rare-jobs-play.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@tapsioss/web-components": patch
3+
---
4+
5+
Resolve file input's preview section re-render issues.
6+

‎packages/web-components/CHANGELOG.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55

66

77

8-
- [`1d78185`](https://github.com/Tap30/web-components/commit/1d781852c2ab35cf9de8cc49b40a64d6141b7d74) Thanks [@mimshins](https://github.com/mimshins)! - Update button styles
8+
- [`1d78185`](https://github.com/Tap30/web-components/commit/1d781852c2ab35cf9de8cc49b40a64d6141b7d74) Thanks [@mimshins](https://github.com/mimshins)! - Update button styles.
99

1010

1111

12-
- [`33d0dfa`](https://github.com/Tap30/web-components/commit/33d0dfa7aeb157cfb7478fd4e0c6d2723ac6a2d8) Thanks [@mimshins](https://github.com/mimshins)! - Update discount card styles
12+
- [`33d0dfa`](https://github.com/Tap30/web-components/commit/33d0dfa7aeb157cfb7478fd4e0c6d2723ac6a2d8) Thanks [@mimshins](https://github.com/mimshins)! - Update discount card styles.
1313

1414
## 0.17.3
1515
### Patch Changes
@@ -35,96 +35,96 @@
3535

3636

3737

38-
- [#495](https://github.com/Tap30/web-components/pull/495) [`ec68346`](https://github.com/Tap30/web-components/commit/ec68346ab16d15c04fdc2213b2fd8776cbfcc0f6) Thanks [@mimshins](https://github.com/mimshins)! - Resolve issues with stacking context layers in button
38+
- [#495](https://github.com/Tap30/web-components/pull/495) [`ec68346`](https://github.com/Tap30/web-components/commit/ec68346ab16d15c04fdc2213b2fd8776cbfcc0f6) Thanks [@mimshins](https://github.com/mimshins)! - Resolve issues with stacking context layers in button.
3939

4040
## 0.17.1
4141
### Patch Changes
4242

4343

4444

45-
- [#491](https://github.com/Tap30/web-components/pull/491) [`61c768d`](https://github.com/Tap30/web-components/commit/61c768d65b222d98544aaf6a7784f4b65c5adea0) Thanks [@mimshins](https://github.com/mimshins)! - Improve selection controllers to take their parents into account
45+
- [#491](https://github.com/Tap30/web-components/pull/491) [`61c768d`](https://github.com/Tap30/web-components/commit/61c768d65b222d98544aaf6a7784f4b65c5adea0) Thanks [@mimshins](https://github.com/mimshins)! - Improve selection controllers to take their parents into account.
4646

4747
## 0.17.0
4848
### Minor Changes
4949

5050

5151

52-
- [#488](https://github.com/Tap30/web-components/pull/488) [`fa0ea8c`](https://github.com/Tap30/web-components/commit/fa0ea8cc4b5f49a0181bcaba61ce2ad873b78898) Thanks [@mimshins](https://github.com/mimshins)! - Remove unnecessary `reflect` behaviors
52+
- [#488](https://github.com/Tap30/web-components/pull/488) [`fa0ea8c`](https://github.com/Tap30/web-components/commit/fa0ea8cc4b5f49a0181bcaba61ce2ad873b78898) Thanks [@mimshins](https://github.com/mimshins)! - Remove unnecessary `reflect` behaviors.
5353

5454

5555

56-
- [#485](https://github.com/Tap30/web-components/pull/485) [`ccf32c4`](https://github.com/Tap30/web-components/commit/ccf32c462726b4a70b604d3008bd5078bc212fd3) Thanks [@mimshins](https://github.com/mimshins)! - Update `value` property to be readonly in pinwheel
56+
- [#485](https://github.com/Tap30/web-components/pull/485) [`ccf32c4`](https://github.com/Tap30/web-components/commit/ccf32c462726b4a70b604d3008bd5078bc212fd3) Thanks [@mimshins](https://github.com/mimshins)! - Update `value` property to be readonly in pinwheel.
5757

5858

5959
### Patch Changes
6060

6161

6262

63-
- [#486](https://github.com/Tap30/web-components/pull/486) [`76bb65f`](https://github.com/Tap30/web-components/commit/76bb65f9354f7877863d916bbca99b055a58b448) Thanks [@mimshins](https://github.com/mimshins)! - Remove iOS-specific behaviors for scroll locker
63+
- [#486](https://github.com/Tap30/web-components/pull/486) [`76bb65f`](https://github.com/Tap30/web-components/commit/76bb65f9354f7877863d916bbca99b055a58b448) Thanks [@mimshins](https://github.com/mimshins)! - Remove iOS-specific behaviors for scroll locker.
6464

6565

6666

67-
- [#489](https://github.com/Tap30/web-components/pull/489) [`43ee3d2`](https://github.com/Tap30/web-components/commit/43ee3d25c173209b716c525cfb4f917af36907c7) Thanks [@mimshins](https://github.com/mimshins)! - Forward necessary host click events to root elements
67+
- [#489](https://github.com/Tap30/web-components/pull/489) [`43ee3d2`](https://github.com/Tap30/web-components/commit/43ee3d25c173209b716c525cfb4f917af36907c7) Thanks [@mimshins](https://github.com/mimshins)! - Forward necessary host click events to root elements.
6868

6969
## 0.16.0
7070
### Minor Changes
7171

7272

7373

74-
- [#476](https://github.com/Tap30/web-components/pull/476) [`420924b`](https://github.com/Tap30/web-components/commit/420924bed71a6e4efa55a4f3a21dfdd445f0f262) Thanks [@amir78729](https://github.com/amir78729)! - Expose file input's clear event
74+
- [#476](https://github.com/Tap30/web-components/pull/476) [`420924b`](https://github.com/Tap30/web-components/commit/420924bed71a6e4efa55a4f3a21dfdd445f0f262) Thanks [@amir78729](https://github.com/amir78729)! - Expose file input's clear event.
7575

7676

7777
### Patch Changes
7878

7979

8080

81-
- [#478](https://github.com/Tap30/web-components/pull/478) [`4b62a11`](https://github.com/Tap30/web-components/commit/4b62a1145f65e081cc332497edb9689c44baf120) Thanks [@mimshins](https://github.com/mimshins)! - Fix issues with syncing height in auto-resizable mode in text-area
81+
- [#478](https://github.com/Tap30/web-components/pull/478) [`4b62a11`](https://github.com/Tap30/web-components/commit/4b62a1145f65e081cc332497edb9689c44baf120) Thanks [@mimshins](https://github.com/mimshins)! - Fix issues with syncing height in auto-resizable mode in text-area.
8282

8383
## 0.15.0
8484
### Minor Changes
8585

8686

8787

88-
- [#474](https://github.com/Tap30/web-components/pull/474) [`1f4b1e3`](https://github.com/Tap30/web-components/commit/1f4b1e3c8d3d4a4c21f934dc4f6f5a06d00d6e67) Thanks [@mimshins](https://github.com/mimshins)! - Add auto-resize feature to text-area component
88+
- [#474](https://github.com/Tap30/web-components/pull/474) [`1f4b1e3`](https://github.com/Tap30/web-components/commit/1f4b1e3c8d3d4a4c21f934dc4f6f5a06d00d6e67) Thanks [@mimshins](https://github.com/mimshins)! - Add auto-resize feature to text-area component.
8989

9090
## 0.14.0
9191
### Minor Changes
9292

9393

9494

95-
- [#472](https://github.com/Tap30/web-components/pull/472) [`ba17f66`](https://github.com/Tap30/web-components/commit/ba17f66db91a2cd90191cbde14864fe47463b52c) Thanks [@mimshins](https://github.com/mimshins)! - Remove cjs exports
95+
- [#472](https://github.com/Tap30/web-components/pull/472) [`ba17f66`](https://github.com/Tap30/web-components/commit/ba17f66db91a2cd90191cbde14864fe47463b52c) Thanks [@mimshins](https://github.com/mimshins)! - Remove cjs exports.
9696

9797

9898

99-
- [#462](https://github.com/Tap30/web-components/pull/462) [`e4906fe`](https://github.com/Tap30/web-components/commit/e4906fe2e461be2d0fa525f8e7292a84927bf565) Thanks [@hossein-nas](https://github.com/hossein-nas)! - Add discount card component
99+
- [#462](https://github.com/Tap30/web-components/pull/462) [`e4906fe`](https://github.com/Tap30/web-components/commit/e4906fe2e461be2d0fa525f8e7292a84927bf565) Thanks [@hossein-nas](https://github.com/hossein-nas)! - Add discount card component.
100100

101101

102102
### Patch Changes
103103

104104

105105

106-
- [#468](https://github.com/Tap30/web-components/pull/468) [`ecc07f6`](https://github.com/Tap30/web-components/commit/ecc07f6cf773a995dade9b3571e752bab57856f0) Thanks [@amir78729](https://github.com/amir78729)! - Resolve tooltip size issue
106+
- [#468](https://github.com/Tap30/web-components/pull/468) [`ecc07f6`](https://github.com/Tap30/web-components/commit/ecc07f6cf773a995dade9b3571e752bab57856f0) Thanks [@amir78729](https://github.com/amir78729)! - Resolve tooltip size issue.
107107

108108
## 0.13.1
109109
### Patch Changes
110110

111111

112112

113-
- [`e7cdebf`](https://github.com/Tap30/web-components/commit/e7cdebf48f26dfecef97c180b97f65362a7336e3) Thanks [@mimshins](https://github.com/mimshins)! - Fix endpoints of the 'esm' exports
113+
- [`e7cdebf`](https://github.com/Tap30/web-components/commit/e7cdebf48f26dfecef97c180b97f65362a7336e3) Thanks [@mimshins](https://github.com/mimshins)! - Fix endpoints of the 'esm' exports.
114114

115115
## 0.13.0
116116
### Minor Changes
117117

118118

119119

120-
- [`eeec57f`](https://github.com/Tap30/web-components/commit/eeec57fcd4a10113b84eb8cda693e35529763e8d) Thanks [@mimshins](https://github.com/mimshins)! - Update build target (es8) and environments (cjs, esm)
120+
- [`eeec57f`](https://github.com/Tap30/web-components/commit/eeec57fcd4a10113b84eb8cda693e35529763e8d) Thanks [@mimshins](https://github.com/mimshins)! - Update build target (es8) and environments (cjs, esm).
121121

122122
## 0.12.3
123123
### Patch Changes
124124

125125

126126

127-
- [#457](https://github.com/Tap30/web-components/pull/457) [`4f56395`](https://github.com/Tap30/web-components/commit/4f56395039478b65ed9d551ef1eaa71ce352fb5c) Thanks [@mimshins](https://github.com/mimshins)! - Fix: expose `main` and `types` endpoints
127+
- [#457](https://github.com/Tap30/web-components/pull/457) [`4f56395`](https://github.com/Tap30/web-components/commit/4f56395039478b65ed9d551ef1eaa71ce352fb5c) Thanks [@mimshins](https://github.com/mimshins)! - Fix: expose `main` and `types` endpoints.
128128

129129

130130

‎packages/web-components/src/file-input/file-input.ts‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -314,9 +314,6 @@ export class FileInput extends BaseClass {
314314
@state()
315315
private _nativeError = false;
316316

317-
@state()
318-
private _previewSrc: null | string = null;
319-
320317
@state()
321318
private _nativeErrorText = "";
322319

@@ -404,11 +401,7 @@ export class FileInput extends BaseClass {
404401
private _handleInput() {
405402
if (!this._isInteractable) return;
406403

407-
const file = this.files?.[0];
408-
409-
if (file) {
410-
this._previewSrc = URL.createObjectURL(file);
411-
} else this._previewSrc = null;
404+
this.requestUpdate();
412405
}
413406

414407
private _handleChange(event: Event) {
@@ -441,8 +434,6 @@ export class FileInput extends BaseClass {
441434

442435
input.files = files;
443436

444-
this._previewSrc = URL.createObjectURL(files[0]!);
445-
446437
this.dispatchEvent(new Event("change", { bubbles: true }));
447438
this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
448439
}
@@ -558,11 +549,13 @@ export class FileInput extends BaseClass {
558549
public reset(): void {
559550
if (this._input) {
560551
this._input.value = "";
552+
this._input.files = null;
561553
}
562554

563-
this._previewSrc = null;
564555
this._nativeError = false;
565556
this._nativeErrorText = "";
557+
558+
this.requestUpdate();
566559
}
567560

568561
private _getErrorText() {
@@ -649,14 +642,18 @@ export class FileInput extends BaseClass {
649642
}
650643

651644
private _renderPreview() {
652-
if (!this.files) return null;
645+
const files = this.files;
646+
647+
if (!files) return null;
648+
649+
if (files.length === 1) {
650+
const file = files[0]!;
653651

654-
if (this.files.length === 1) {
655-
const file = this.files[0]!;
652+
if (isFileImage(file.name)) {
653+
const previewSrc = URL.createObjectURL(file);
656654

657-
if (isFileImage(file.name) && this._previewSrc) {
658655
return html`<img
659-
src=${this._previewSrc}
656+
src=${previewSrc}
660657
alt="preview"
661658
class="preview"
662659
part="preview"
@@ -673,7 +670,7 @@ export class FileInput extends BaseClass {
673670
return html`<span
674671
class="text"
675672
part="text"
676-
>${toFaNumber(this.files.length.toString())} فایل انتخاب شده</span
673+
>${toFaNumber(files.length.toString())} فایل انتخاب شده</span
677674
>`;
678675
}
679676

0 commit comments

Comments
 (0)