Dashboard: Single file mode #4188

arturi · 2022-11-04T16:48:02Z

With only one file / image selected, display it large and centered, and re-generate image preview so it's 600px large.

Fixes #3970.

elliotsayes · 2022-11-07T01:28:04Z

Awesome! I would love to have this for my app

nqst

I like it! 👍

One nitpick:

Think there's no need to trim the filename the way we do it in the multi-file mode. Do you think we can increase the visible filename length?

Murderlon

LGTM if @nqst's nitpick is also done

Murderlon · 2022-11-08T21:11:32Z

packages/@uppy/dashboard/src/components/Dashboard.jsx

@@ -138,6 +138,7 @@ export default function Dashboard (props) {
 <FileList
 // eslint-disable-next-line react/jsx-props-no-spreading
 {...props}
+ singleFile={singleFile}


can't we use itemsPerRow instead of a new prop? If that's 1 it means the same.

No, it's based on width, so it's 3 for single file on full-width Dashboard for me.

oalexdoda · 2022-11-10T00:09:47Z

Does this also fix that cancel event @arturi ? Thanks!

| Package | Version | Package | Version | | ---------------------- | ------- | ---------------------- | ------- | | @uppy/angular | 0.5.0 | @uppy/image-editor | 2.1.0 | | @uppy/aws-s3-multipart | 3.1.0 | @uppy/locales | 3.0.4 | | @uppy/companion | 4.1.0 | @uppy/tus | 3.0.5 | | @uppy/companion-client | 3.1.0 | @uppy/utils | 5.1.0 | | @uppy/dashboard | 3.2.0 | uppy | 3.3.0 | - @uppy/companion: change default S3 expiry from 300 to 800 seconds (Merlijn Vos / #4206) - @uppy/dashboard: Single file mode (Artur Paikin / #4188) - @uppy/locales: Fix UZ locale (Merlijn Vos / #4178) - @uppy/utils: update typings for `RateLimitedQueue` (Antoine du Hamel / #4204) - @uppy/aws-s3-multipart: empty the queue when pausing (Antoine du Hamel / #4203) - @uppy/image-editor: add checkered background (Livia Medeiros / #4194) - @uppy/aws-s3-multipart: refactor rate limiting approach (Antoine du Hamel / #4187) - @uppy/companion: send expiry time along side S3 signed requests (Antoine du Hamel / #4202) - @uppy/companion-client: add support for `AbortSignal` (Antoine du Hamel / #4201) - @uppy/companion-client: prevent preflight race condition (Mikael Finstad / #4182) - @uppy/aws-s3-multipart: change limit to 6 (Antoine du Hamel / #4199) - @uppy/utils: add `cause` support for `AbortError`s (Antoine du Hamel / #4198) - meta: Fix bad example for setFileState (Tim Whitney / #4191) - meta: Update code example for getFiles (Tim Whitney / #4189) - meta: Fix issue with outdated comment. (Tim Whitney / #4192) - @uppy/aws-s3-multipart: remove unused `timeout` option (Antoine du Hamel / #4186) - meta: Remove dollar sign from command for easier copy/pasting (Youssef Victor / #4180) - @uppy/aws-s3-multipart,@uppy/tus: fix `Timed out waiting for socket` (Antoine du Hamel / #4177) - meta: Add note about facebook approval (Mikael Finstad / #4172) - meta: add a manual deploy for website (Antoine du Hamel / #4171)

* main: (110 commits) @uppy/aws-s3-multipart: handle slow connections better (#4213) @uppy/companion-client: treat `*` the same as missing header (#4221) @uppy/utils: fix types (#4212) @uppy/companion: send expire info for non-multipart uploads (#4214) docs: fix `allowedMetaFields` documentation (#4216) meta: add more bundlers for automated testing (#4100) @uppy/aws-s3-multipart: Fix typo in url check (#4211) meta: use current version of packages when testing bundlers (#4208) meta: do not use the set-output command in workflows (#4175) Release: uppy@3.3.0 (#4207) Companion: change default S3 expiry from 300 to 800 seconds (#4206) Dashboard: Single file mode (#4188) Fix UZ locale (#4178) @uppy/utils: update typings for `RateLimitedQueue` (#4204) @uppy/aws-s3-multipart: empty the queue when pausing (#4203) image-editor: add checkered background (#4194) @uppy/aws-s3-multipart: refactor rate limiting approach (#4187) @uppy/companion: send expiry time along side S3 signed requests (#4202) @uppy/companion-client: add support for `AbortSignal` (#4201) @uppy/companion-client: prevent preflight race condition (#4182) ...

jdcalvin · 2023-01-19T19:34:04Z

@arturi How do you disable this feature? I need to bump dashboard to latest, but this does not render correctly for my implementation with the only added option disableThumbnailGenerator set to true. It does not render the dimensions properly.

arturi · 2023-02-07T14:14:19Z

Hi @jdcalvin, it’s indeed a bug with the layout, I’m working on fixing it. As for the option to disable Single File mode altogether — we’ll consider it.

jdcalvin · 2023-03-13T20:20:33Z

@arturi any update on this, or is there a issue tracked somewhere for it?

Murderlon · 2023-03-14T08:46:28Z

@arturi is currently working on it :)

| Package | Version | Package | Version | | ---------------------- | ------- | ---------------------- | ------- | | @uppy/angular | 0.5.0 | @uppy/image-editor | 2.1.0 | | @uppy/aws-s3-multipart | 3.1.0 | @uppy/locales | 3.0.4 | | @uppy/companion | 4.1.0 | @uppy/tus | 3.0.5 | | @uppy/companion-client | 3.1.0 | @uppy/utils | 5.1.0 | | @uppy/dashboard | 3.2.0 | uppy | 3.3.0 | - @uppy/companion: change default S3 expiry from 300 to 800 seconds (Merlijn Vos / transloadit#4206) - @uppy/dashboard: Single file mode (Artur Paikin / transloadit#4188) - @uppy/locales: Fix UZ locale (Merlijn Vos / transloadit#4178) - @uppy/utils: update typings for `RateLimitedQueue` (Antoine du Hamel / transloadit#4204) - @uppy/aws-s3-multipart: empty the queue when pausing (Antoine du Hamel / transloadit#4203) - @uppy/image-editor: add checkered background (Livia Medeiros / transloadit#4194) - @uppy/aws-s3-multipart: refactor rate limiting approach (Antoine du Hamel / transloadit#4187) - @uppy/companion: send expiry time along side S3 signed requests (Antoine du Hamel / transloadit#4202) - @uppy/companion-client: add support for `AbortSignal` (Antoine du Hamel / transloadit#4201) - @uppy/companion-client: prevent preflight race condition (Mikael Finstad / transloadit#4182) - @uppy/aws-s3-multipart: change limit to 6 (Antoine du Hamel / transloadit#4199) - @uppy/utils: add `cause` support for `AbortError`s (Antoine du Hamel / transloadit#4198) - meta: Fix bad example for setFileState (Tim Whitney / transloadit#4191) - meta: Update code example for getFiles (Tim Whitney / transloadit#4189) - meta: Fix issue with outdated comment. (Tim Whitney / transloadit#4192) - @uppy/aws-s3-multipart: remove unused `timeout` option (Antoine du Hamel / transloadit#4186) - meta: Remove dollar sign from command for easier copy/pasting (Youssef Victor / transloadit#4180) - @uppy/aws-s3-multipart,@uppy/tus: fix `Timed out waiting for socket` (Antoine du Hamel / transloadit#4177) - meta: Add note about facebook approval (Mikael Finstad / transloadit#4172) - meta: add a manual deploy for website (Antoine du Hamel / transloadit#4171)

lakesare · 2024-07-19T19:07:48Z

packages/@uppy/dashboard/src/Dashboard.jsx

+ })
+ }
+ }
+


The need for const LARGE_THUMBNAIL = 600 is not evident for all images, so here is one example where it does matter.

Without #generateLargeThumbnailIfSingleFile:

With#generateLargeThumbnailIfSingleFile:

arturi added 5 commits November 3, 2022 16:08

progress pause/resume should be white

e3e74ad

add uppy-c-btn to remaining buttons

396e995

Single file mode: large preview thumbnail for single file

a1363f7

tweak icon and FileItem sizes

56717da

check for single file mode when files are added or removed

ea80f81

arturi requested review from nqst and aduh95 November 4, 2022 17:30

nqst requested changes Nov 7, 2022

View reviewed changes

Murderlon approved these changes Nov 7, 2022

View reviewed changes

arturi removed the request for review from aduh95 November 7, 2022 17:33

arturi added 2 commits November 8, 2022 18:54

Don't shorted file names in single file mode

2e8db05

Refactor a bit

1bc09da

Murderlon reviewed Nov 8, 2022

View reviewed changes

remove events on uninstall

b276986

arturi merged commit a2a265a into main Nov 10, 2022

arturi deleted the dashboard-single-img branch November 10, 2022 00:05

github-actions bot mentioned this pull request Nov 10, 2022

Release: uppy@3.3.0 #4207

Merged

lakesare reviewed Jul 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard: Single file mode #4188

Dashboard: Single file mode #4188

arturi commented Nov 4, 2022 •

edited

Loading

elliotsayes commented Nov 7, 2022

nqst left a comment

Murderlon left a comment

Murderlon Nov 8, 2022

arturi Nov 10, 2022

oalexdoda commented Nov 10, 2022

jdcalvin commented Jan 19, 2023 •

edited

Loading

arturi commented Feb 7, 2023

jdcalvin commented Mar 13, 2023

Murderlon commented Mar 14, 2023

lakesare Jul 19, 2024

Dashboard: Single file mode #4188

Dashboard: Single file mode #4188

Conversation

arturi commented Nov 4, 2022 • edited Loading

elliotsayes commented Nov 7, 2022

nqst left a comment

Choose a reason for hiding this comment

Murderlon left a comment

Choose a reason for hiding this comment

Murderlon Nov 8, 2022

Choose a reason for hiding this comment

arturi Nov 10, 2022

Choose a reason for hiding this comment

oalexdoda commented Nov 10, 2022

jdcalvin commented Jan 19, 2023 • edited Loading

arturi commented Feb 7, 2023

jdcalvin commented Mar 13, 2023

Murderlon commented Mar 14, 2023

lakesare Jul 19, 2024

Choose a reason for hiding this comment

arturi commented Nov 4, 2022 •

edited

Loading

jdcalvin commented Jan 19, 2023 •

edited

Loading