Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
lukastransom opened this issue Jun 22, 2023 · 1 comment
Open

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

lukastransom opened this issue Jun 22, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@lukastransom
Copy link

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)
  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
@lukastransom lukastransom changed the title SVG Upload Failure: 'Unable to generate file Blob' Error [Firefox] SVG Upload Failure: 'Unable to generate file Blob' Error Jun 22, 2023
@lukastransom
Copy link
Author

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.

@robinpyon robinpyon added the bug Something isn't working label Jul 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@robinpyon @lukastransom