File block: Handle drag-and-drop errors

[noisysocks]

Description

Fixes #8025.

Handle any errors that occur when a File block is created via a files transform. That is, when a file is drag-and-dropped into the editor.

How has this been tested?

1. Drag an unsupported file (e.g. .js, .diff, .json, .exe) into the editor
2. Insert a File block and drag an unsupported file onto the block
3. Drag a supported file (e.g. .zip, .pdf) into the editor
4. Insert a File block and drag a supported file onto the block

Screenshots

[noisysocks]

I had to use local state here instead of setAttributes( { href: undefined } ) because we don't support calling setAttributes() in componentDidMount.

(Also, we probably shouldn't be using attributes for this anyway—see #3553.)

[talldan]

Looks good. 👍

I did wonder if isMatch could be used to disallow the transform, but I think showing an appropriate error and the behaviour being similar to when using the MediaPlaceholder are benefits to this approach.

[talldan]

Actually - I did spot an issue. Not caused by this, but related.

If you drag an unsupported file type, then update the post and refresh you see a message that the block has encountered an error. Looks like the blob is revoked but the href is still set as an attribute, so it goes through the whole editorMediaUpload call again when mounting, but fails:
https://github.com/WordPress/gutenberg/blob/master/core-blocks/file/edit.js#L55

I can create it as a separate issue if you want to get this PR merged. (edit, issue here #8155)

[noisysocks]

Good spotting! There's a whole lot of bugs that exist because we store blob URLs in blocks attributes. We definitely should move away from doing this. #8119 was created as an umbrella issue for this.

[noisysocks]

I did wonder if isMatch could be used to disallow the transform, but I think showing an appropriate error and the behaviour being similar to when using the MediaPlaceholder are benefits to this approach.

Yeah, totally. I experimented with not allowing the drag-and-drop at all if it's an invalid transform, but decided against it because it makes it feel like the browser is not responsive.