Make WordPress Core

Opened 5 months ago

Closed 3 months ago

Last modified 18 hours ago

#61948 closed defect (bug) (fixed)

Uploading WAV files fail in Gutenberg editor on Firefox browser when drag-dropped

Reported by: imranh920's profile imranh920 Owned by: ramonopoly's profile ramonopoly
Milestone: 6.8 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch, gutenberg-merge
Focuses: Cc:

Description

When uploading WAV audio files by drag-dropping, it fails in Firefox, but works as without issue on Chrome and other browsers. This issue doesn't happen for other media or audio formats.

Attachments (1)

61948.diff (655 bytes) - added by imranh920 5 months ago.

Download all attachments as: .zip

Change History (14)

@imranh920
5 months ago

This ticket was mentioned in PR #7265 on WordPress/wordpress-develop by @imranh920.


5 months ago
#2

  • Keywords has-patch added

Farther details can be found here https://github.com/Automattic/wp-calypso/issues/93778 .

When we upload the wav file here, Chrome and all other browsers identify the mimetype of the file to be audio/wav, but Firefox, identifies the mimetype as audio/x-wav.

WordPress core has a default (extensible) set of mime-type that it allows uploading. You can find them here https://github.com/WordPress/wordpress-develop/blob/3b1e57752d5dd737477873b6797e3f8209aec078/src/wp-includes/functions.php#L3392-L3513 . You’ll notice that there is the audio/wav mime-type there, but not audio/x-wav.
So when Gutenberg tries to check the mimetype of the file in Firefox here https://github.com/WordPress/gutenberg/blob/5773ae60ca33bda03f2a35e6707d961b8db3af18/packages/media-utils/src/utils/upload-media.js#L91-L118, it sees that the mime-type (audio/x-wav) isn’t one of the allowed ones.
So it throws an error.

Here we are including the x-wav mime type.

Before applying this patch -

  • Use Firefox browser
  • Open a page or a post in Gutenberg editor.
  • Try to drag and drop this WAV file in the editor https://tinyurl.com/24tkan96
  • You should see an error like below

https://github.com/user-attachments/assets/d5a47f79-aa6e-417a-a7e5-93203cad38e3

After applying this patch -

  • Try to do the same drag-and-drop operation as before
  • You should not see an error this time
  • Also try the same in Chrome and other browsers, make sure no error is thrown
  • Try uploading this file in Media Uploader and make sure no error is thrown
  • Try with other wav files and media files too

Trac ticket: https://core.trac.wordpress.org/ticket/61948

#4 @miguelsansegundo
5 months ago

Nice find!
I tested this small change and fixes the issue.

@ramonopoly commented on PR #7265:


3 months ago
#5

Good call @Imran92!

I've opened the equivalent Gutenberg backport here:

@ramonopoly commented on PR #7265:


3 months ago
#6

I think maybe this needs a rebase or at least the tests restarted. 👍🏻

@imranh920 commented on PR #7265:


3 months ago
#7

I think maybe this needs a rebase or at least the tests restarted. 👍🏻

Thanks! I synced the branch with my fork and all the tests are passing now

@imranh920 commented on PR #7265:


3 months ago
#8

Tested and LGTM

Should we add a version annotation in the function comment docs?

@since 6.8.0 Support was added for `audio/x-wav`.

Thanks @ramonjd ! I've added a comment here https://github.com/WordPress/wordpress-develop/pull/7265/commits/adbe059d44445c90c4db0aed6f639bef952c71ec, should I just go ahead and update the patch on the tracks ticket?

@ramonopoly commented on PR #7265:


3 months ago
#9

Thank you @Imran92 !! This all LGTM.

I can commit later today.

should I just go ahead and update the patch on the tracks ticket?

I don't think it's necessary. When you have already linked a Github PR to the trac ticket, there's not need for a patch file.

The Github PR is the "patch".

See: https://make.wordpress.org/core/handbook/contribute/git/github-pull-requests-for-code-review/

#10 @ramonopoly
3 months ago

  • Owner set to ramonopoly
  • Resolution set to fixed
  • Status changed from assigned to closed

In 59389:

Mime Types: support uploading wav files in Firefox

When uploading wav files in the editor, Chrome and other browsers identify the mime type of the file as audio/wav. Firefox, however, identifies the mime type as audio/x-wav.

This commit updates the 'wav' mime type key in wp_get_mime_types() to support x-wav so that uploading wav files work in Firefox. Previously, the editor reported an unsupported mime type error.

Props imranh920, ramonopoly.
Fixes #61948.

#11 @ramonopoly
3 months ago

  • Milestone changed from Awaiting Review to 6.8

@ramonopoly commented on PR #7265:


3 months ago
#12

Committed in r59389 / 6f47a2c453e5e272c3f33cc5438c51e20a95d7f2

#13 @joemcgill
18 hours ago

  • Keywords gutenberg-merge added
Note: See TracTickets for help on using tickets.