Fix fileName not respect when the image is drag&dropped (#6960)

Contrary to all the other uploads we have, when uploading an image to the editor via drag&drop without an image block previously created the file name of the image we upload is not respect.

The fileName is now passed from the transform to the region where we upload via the al attribute. using the alt attribute seems the best approach because using the URL attribute is not possible. Url is being used to store the blob and if we change like append '?fileName=' the browsers start ignoring the blob URL. Given that we pass the file via URL attribute from the transform to the upload code passing the fileName in the alt attribute seems the most logical way.

core-blocks/image/edit.js

@@ -73,19 +73,21 @@ class ImageEdit extends Component {
 
 	componentDidMount() {
 		const { attributes, setAttributes } = this.props;
-		const { id, url = '' } = attributes;
+		const { id, url = '', alt: fileName } = attributes;
 
 		if ( ! id && url.indexOf( 'blob:' ) === 0 ) {
 			getBlobByURL( url )
 				.then(
-					( file ) =>
+					( file ) => {
+						file.name = fileName;
 						editorMediaUpload( {
 							filesList: [ file ],
 							onFileChange: ( [ image ] ) => {
 								setAttributes( { ...image } );
 							},
 							allowedType: 'image',
-						} )
+						} );
+					}
 				);
 		}
 	}

core-blocks/image/index.js

@@ -128,6 +128,7 @@ export const settings = {
 					// It's already done as part of the `componentDidMount`
 					// int the image block
 					const block = createBlock( 'core/image', {
+						alt: file.name,
 						url: window.URL.createObjectURL( file ),
 					} );
 

utils/mediaupload.js

@@ -53,14 +53,12 @@ export function mediaUpload( {
 		return createMediaFromFile( mediaFile, additionalData ).then(
 			( savedMedia ) => {
 				const mediaObject = {
+					alt: savedMedia.alt_text,
+					caption: get( savedMedia, [ 'caption', 'raw' ], '' ),
 					id: savedMedia.id,
-					url: savedMedia.source_url,
 					link: savedMedia.link,
+					url: savedMedia.source_url,
 				};
-				const caption = get( savedMedia, [ 'caption', 'raw' ] );
-				if ( caption ) {
-					mediaObject.caption = [ caption ];
-				}
 				setAndUpdateFiles( idx, mediaObject );
 			},
 			() => {