sanity-plugin-media icon indicating copy to clipboard operation
sanity-plugin-media copied to clipboard

Published 20 hours ago • verified publisher icon sanity-io

[Firefox] SVG Upload Failure: 'Unable to generate file Blob' Error

Open lukastransom opened this issue 1 year ago • 1 comments

Describe the bug When attempting to upload an SVG image, the file fails to upload and I'm presented with the following error from NextJS's error modal:

Unhandled Runtime Error

Error: Unable to generate file Blob
Call Stack
wl
node_modules/sanity-plugin-media/lib/index.esm.js (1:68852)
More verbose stack trace 
Unhandled Runtime Error

Error: Unable to generate file Blob
Call Stack
wl
node_modules/sanity-plugin-media/lib/index.esm.js (1:68852)
async*io</</</</<
node_modules/sanity-plugin-media/lib/index.esm.js (1:96250)
doInnerSub
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (19:17)
outerNext
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (14:39)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
fromArrayLike/<
node_modules/rxjs/dist/esm5/internal/observable/innerFrom.js (51:0)
Observable.prototype._trySubscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (38:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (32:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
mergeInternals
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (53:0)
mergeMap/<
node_modules/rxjs/dist/esm5/internal/operators/mergeMap.js (14:72)
operate/</<
node_modules/rxjs/dist/esm5/internal/util/lift.js (10:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (27:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
doInnerSub
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (19:17)
outerNext
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (14:39)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
fromArrayLike/<
node_modules/rxjs/dist/esm5/internal/observable/innerFrom.js (51:0)
Observable.prototype._trySubscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (38:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (32:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
mergeInternals
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (53:0)
mergeMap/<
node_modules/rxjs/dist/esm5/internal/operators/mergeMap.js (14:72)
operate/</<
node_modules/rxjs/dist/esm5/internal/util/lift.js (10:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (27:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
mergeInternals
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (53:0)
mergeMap/<
node_modules/rxjs/dist/esm5/internal/operators/mergeMap.js (14:72)
operate/</<
node_modules/rxjs/dist/esm5/internal/util/lift.js (10:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (27:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
doInnerSub
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (19:17)
outerNext
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (14:39)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
fromArrayLike/<
node_modules/rxjs/dist/esm5/internal/observable/innerFrom.js (51:0)
Observable.prototype._trySubscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (38:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (32:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
mergeInternals
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (53:0)
mergeMap/<
node_modules/rxjs/dist/esm5/internal/operators/mergeMap.js (14:72)
operate/</<
node_modules/rxjs/dist/esm5/internal/util/lift.js (10:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (27:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
doInnerSub
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (19:17)
outerNext
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (14:39)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
filter/</<
node_modules/rxjs/dist/esm5/internal/operators/filter.js (6:81)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
observeOn/</</<
node_modules/rxjs/dist/esm5/internal/operators/observeOn.js (7:141)
executeSchedule/scheduleSubscription<
node_modules/rxjs/dist/esm5/internal/util/executeSchedule.js (5:0)
AsyncAction.prototype._execute
node_modules/rxjs/dist/esm5/internal/scheduler/AsyncAction.js (62:0)
QueueAction.prototype.execute
node_modules/rxjs/dist/esm5/internal/scheduler/QueueAction.js (22:0)
AsyncScheduler.prototype.flush
node_modules/rxjs/dist/esm5/internal/scheduler/AsyncScheduler.js (21:0)
QueueAction.prototype.schedule
node_modules/rxjs/dist/esm5/internal/scheduler/QueueAction.js (18:0)
Scheduler.prototype.schedule
node_modules/rxjs/dist/esm5/internal/Scheduler.js (10:0)
executeSchedule
node_modules/rxjs/dist/esm5/internal/util/executeSchedule.js (4:0)
observeOn/</<
node_modules/rxjs/dist/esm5/internal/operators/observeOn.js (7:103)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
doInnerSub/<
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (25:0)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
doInnerSub/<
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (25:0)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
doInnerSub/<
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (25:0)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
fromArrayLike/<
node_modules/rxjs/dist/esm5/internal/observable/innerFrom.js (51:0)
Observable.prototype._trySubscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (38:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (32:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
doInnerSub
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (19:17)
outerNext
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (14:39)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
filter/</<
node_modules/rxjs/dist/esm5/internal/operators/filter.js (6:81)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
doInnerSub/<
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (25:0)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
map/</<
node_modules/rxjs/dist/esm5/internal/operators/map.js (7:0)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
doInnerSub/<
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (25:0)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
fromPromise/</<
node_modules/rxjs/dist/esm5/internal/observable/innerFrom.js (61:0)
promise callback*fromPromise/<
node_modules/rxjs/dist/esm5/internal/observable/innerFrom.js (59:0)
Observable.prototype._trySubscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (38:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (32:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
doInnerSub
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (19:17)
outerNext
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (14:39)
OperatorSubscriber/_this._next<
node_modules/rxjs/dist/esm5/internal/operators/OperatorSubscriber.js (15:0)
Subscriber.prototype.next
node_modules/rxjs/dist/esm5/internal/Subscriber.js (34:0)
_l/</</n.onload
node_modules/sanity-plugin-media/lib/index.esm.js (1:69629)
EventHandlerNonNull*_l/</<
node_modules/sanity-plugin-media/lib/index.esm.js (1:69608)
Observable.prototype._trySubscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (38:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (32:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
mergeInternals
node_modules/rxjs/dist/esm5/internal/operators/mergeInternals.js (53:0)
mergeMap/<
node_modules/rxjs/dist/esm5/internal/operators/mergeMap.js (14:72)
operate/</<
node_modules/rxjs/dist/esm5/internal/util/lift.js (10:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (27:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)
Observable.prototype.subscribe
node_modules/rxjs/dist/esm5/internal/Observable.js (23:20)
map/<
node_modules/rxjs/dist/esm5/internal/operators/map.js (6:0)
operate/</<
node_modules/rxjs/dist/esm5/internal/util/lift.js (10:0)
Observable.prototype.subscribe/<
node_modules/rxjs/dist/esm5/internal/Observable.js (27:0)
errorContext
node_modules/rxjs/dist/esm5/internal/util/errorContext.js (19:0)

To Reproduce

  1. Open Sanity Studio
  2. Click on "Media" in the top toolbar
  3. Drag-and-drop an SVG onto the media grid ("drop files to upload" message appears)
    • Same result (error) via "Upload Assets" button
    • Any SVG will do (e.g. https://openmoji.org/library/emoji-1F680/)
  4. See error

Expected behavior Media file to upload successfully without errors and be available for use inside Sanity Studio.

Environment (desktop)

  • OS: macOS Ventura 13.4 (22F66)
  • Browser: Firefox Developer Edition 115.0b7 (64-bit)
  • node --version v16.16.0
  • yarn --version 1.22.19

Package Versions

  • sanity-plugin-media 2.0.5
  • next 13.4.6

npx sanity versions

  • @sanity/cli (global) 3.12.2 (up to date)
  • @sanity/asset-utils 1.3.0 (up to date)
  • @sanity/dashboard 3.1.4 (up to date)
  • @sanity/image-url 1.0.2 (up to date)
  • @sanity/preview-kit 1.5.4 (latest: 2.2.2)
  • @sanity/server 3.1.4 (up to date)
  • @sanity/table 1.0.1 (up to date)
  • @sanity/vision 3.12.1 (latest: 3.12.2)
  • sanity 3.12.2 (up to date)

Additional context

  • Uploads work with PNG (e.g. PNG version of same SVG here: https://openmoji.org/library/emoji-1F680/)
  • Same result in local-dev as in production builds on Vercel.
  • This may be related to #164 but the error message is slightly different.

lukastransom avatar Jun 22 '23 08:06 lukastransom

It looks like this problem is restricted to Firefox. I've tried the same setup in Opera GX LVL4 (Chromium version:113.0.5672.127) and SVGs upload without error.

lukastransom avatar Jun 22 '23 16:06 lukastransom