fix: explicitly list allowed image types for upload

[rexxars]

Description

We're currently allowing image/* in the image input, but only a certain types are allowed by our backend. In particular, we recently added support for AVIF images to be output, but we don't yet support them to be uploaded. Instead of letting users upload the entire image before they get a message saying they are not supported, we should flag our support in the image selection dialog.

Also fixed a race condition issue with the clearUploadStatus callback - when the image fails to be uploaded, eg rejected because of an unsupported format, the value doesn't seem to have a value - and thus does not get unset. Instead it is stuck in the pending state (100% done) until someone resets it. I don't quite see the need to check before unsetting - but let me know if I am overlooking something.

Did some minor typing/lint cleanups along the way.

What to review

• Do image uploads still work as expected?
• Are there dragons to be aware of?
• There are so many layers I had to add these types to - are some of these meant to be "backend agnostic" and thus I should only apply it to the ones that deals with the Sanity CDN specifically?

Testing

Ideally there should be a test to ensure that you can't select eg an AVIF, but I couldn't find a good way of doing so at the moment :/

Notes for release

• Fixed an issue where unsupported image types would be uploaded but then rejected by the server. Only accepted image file types are now

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2024 0:00am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2024 0:00am
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2024 0:00am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2024 0:00am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2024 0:00am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)			Nov 15, 2024 0:00am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Nov 15, 2024 12:05 AM (UTC)

❌ Failed Tests (3) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	45s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	9s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	32s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	❌ Failed (Inspect)	1m 0s	9	7	2
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	18s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	11s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	2m 32s	1	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	46s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 45s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 17s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	26s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	19s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	❌ Failed (Inspect)	45s	11	0	1
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

[github-actions]

⚡️ Editor Performance Report

Updated Fri, 15 Nov 2024 00:07:53 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	16.4 efps (61ms)	16.4 efps (61ms)	+0ms (-/-%)	✅
article (body)	56.5 efps (18ms)	56.2 efps (18ms)	+0ms (+0.6%)	✅
article (string inside object)	18.2 efps (55ms)	17.9 efps (56ms)	+1ms (+1.8%)	✅
article (string inside array)	15.4 efps (65ms)	15.2 efps (66ms)	+1ms (+1.5%)	✅
recipe (name)	31.3 efps (32ms)	31.3 efps (32ms)	+0ms (-/-%)	✅
recipe (description)	33.3 efps (30ms)	35.1 efps (29ms)	-2ms (-5.0%)	✅
recipe (instructions)	99.9+ efps (6ms)	99.9+ efps (6ms)	+0ms (-/-%)	✅
synthetic (title)	14.9 efps (67ms)	15.5 efps (65ms)	-3ms (-3.7%)	✅
synthetic (string inside object)	15.3 efps (66ms)	15.3 efps (66ms)	+0ms (-/-%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	61ms	67ms	72ms	221ms	422ms	13.5s
article (body)	18ms	20ms	38ms	202ms	328ms	6.1s
article (string inside object)	55ms	57ms	63ms	113ms	253ms	8.5s
article (string inside array)	65ms	68ms	78ms	239ms	845ms	9.5s
recipe (name)	32ms	35ms	38ms	103ms	14ms	9.5s
recipe (description)	30ms	31ms	36ms	53ms	0ms	6.1s
recipe (instructions)	6ms	8ms	8ms	12ms	0ms	3.3s
synthetic (title)	67ms	72ms	76ms	388ms	1287ms	14.7s
synthetic (string inside object)	66ms	70ms	77ms	341ms	1942ms	10.1s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	61ms	64ms	72ms	293ms	453ms	13.1s
article (body)	18ms	20ms	37ms	272ms	331ms	6.1s
article (string inside object)	56ms	62ms	71ms	193ms	349ms	8.6s
article (string inside array)	66ms	73ms	81ms	395ms	1080ms	9.7s
recipe (name)	32ms	34ms	42ms	60ms	0ms	9.4s
recipe (description)	29ms	30ms	31ms	62ms	0ms	5.8s
recipe (instructions)	6ms	8ms	9ms	53ms	15ms	3.3s
synthetic (title)	65ms	69ms	72ms	388ms	1423ms	15.5s
synthetic (string inside object)	66ms	69ms	86ms	467ms	1447ms	10.0s

📚 Glossary

column definitions

• benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".
• latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.
• p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.
• p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.
• p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.
• blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.
• test duration — how long the test run took to complete.