Fixed content type issue (#25702)

Author: MackinnonBuck

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -14,7 +14,7 @@ interface BrowserFile {
   lastModified: string;
   name: string;
   size: number;
-  type: string;
+  contentType: string;
   readPromise: Promise<ArrayBuffer> | undefined;
   arrayBuffer: ArrayBuffer | undefined;
 }
@@ -42,7 +42,7 @@ function init(callbackWrapper: any, elem: InputElement): void {
         lastModified: new Date(file.lastModified).toISOString(),
         name: file.name,
         size: file.size,
-        type: file.type,
+        contentType: file.type,
         readPromise: undefined,
         arrayBuffer: undefined,
       };
@@ -86,7 +86,7 @@ async function toImageFile(elem: InputElement, fileId: number, format: string, m
     lastModified: originalFile.lastModified,
     name: originalFile.name,
     size: resizedImageBlob?.size || 0,
-    type: format,
+    contentType: format,
     readPromise: undefined,
     arrayBuffer: undefined,
   };

src/Components/Web.JS/dist/Release/blazor.webassembly.js

@@ -7,7 +7,6 @@
 using System.Text;
 using BasicTestApp;
 using BasicTestApp.FormsTest;
-using Microsoft.AspNetCore.Components.E2ETest;
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure;
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
 using Microsoft.AspNetCore.E2ETesting;
@@ -50,11 +49,17 @@ public void CanUploadSingleSmallFile()
             inputFile.SendKeys(file.Path);
 
             var fileContainer = Browser.FindElement(By.Id($"file-{file.Name}"));
+            var fileNameElement = fileContainer.FindElement(By.Id("file-name"));
+            var fileLastModifiedElement = fileContainer.FindElement(By.Id("file-last-modified"));
             var fileSizeElement = fileContainer.FindElement(By.Id("file-size"));
+            var fileContentTypeElement = fileContainer.FindElement(By.Id("file-content-type"));
             var fileContentElement = fileContainer.FindElement(By.Id("file-content"));
 
-            // Validate that the file was uploaded correctly
+            // Validate that the file was uploaded correctly and all fields are present
+            Browser.False(() => string.IsNullOrWhiteSpace(fileNameElement.Text));
+            Browser.NotEqual(default, () => DateTimeOffset.Parse(fileLastModifiedElement.Text));
             Browser.Equal(file.Contents.Length.ToString(), () => fileSizeElement.Text);
+            Browser.Equal("text/plain", () => fileContentTypeElement.Text);
             Browser.Equal(file.Text, () => fileContentElement.Text);
         }
 
@@ -77,11 +82,17 @@ public void CanUploadSingleLargeFile()
             inputFile.SendKeys(file.Path);
 
             var fileContainer = Browser.FindElement(By.Id($"file-{file.Name}"));
+            var fileNameElement = fileContainer.FindElement(By.Id("file-name"));
+            var fileLastModifiedElement = fileContainer.FindElement(By.Id("file-last-modified"));
             var fileSizeElement = fileContainer.FindElement(By.Id("file-size"));
+            var fileContentTypeElement = fileContainer.FindElement(By.Id("file-content-type"));
             var fileContentElement = fileContainer.FindElement(By.Id("file-content"));
 
-            // Validate that the file was uploaded correctly
+            // Validate that the file was uploaded correctly and all fields are present
+            Browser.False(() => string.IsNullOrWhiteSpace(fileNameElement.Text));
+            Browser.NotEqual(default, () => DateTimeOffset.Parse(fileLastModifiedElement.Text));
             Browser.Equal(file.Contents.Length.ToString(), () => fileSizeElement.Text);
+            Browser.Equal("text/plain", () => fileContentTypeElement.Text);
             Browser.Equal(file.Text, () => fileContentElement.Text);
         }
 
@@ -97,14 +108,21 @@ public void CanUploadMultipleFiles()
             var inputFile = Browser.FindElement(By.Id("input-file"));
             inputFile.SendKeys(string.Join("\n", files.Select(f => f.Path)));
 
-            // VAlidate that each file was uploaded correctly
+            // Validate that each file was uploaded correctly
             Assert.All(files, file =>
             {
                 var fileContainer = Browser.FindElement(By.Id($"file-{file.Name}"));
+                var fileNameElement = fileContainer.FindElement(By.Id("file-name"));
+                var fileLastModifiedElement = fileContainer.FindElement(By.Id("file-last-modified"));
                 var fileSizeElement = fileContainer.FindElement(By.Id("file-size"));
+                var fileContentTypeElement = fileContainer.FindElement(By.Id("file-content-type"));
                 var fileContentElement = fileContainer.FindElement(By.Id("file-content"));
 
+                // Validate that the file was uploaded correctly and all fields are present
+                Browser.False(() => string.IsNullOrWhiteSpace(fileNameElement.Text));
+                Browser.NotEqual(default, () => DateTimeOffset.Parse(fileLastModifiedElement.Text));
                 Browser.Equal(file.Contents.Length.ToString(), () => fileSizeElement.Text);
+                Browser.Equal("text/plain", () => fileContentTypeElement.Text);
                 Browser.Equal(file.Text, () => fileContentElement.Text);
             });
         }

src/Components/Web.JS/src/InputFile.ts

@@ -27,9 +27,11 @@ Max allowed files:
 @foreach (var (file, content) in loadedFiles)
 {
     <p id="file-@(file.Name)">
-        <strong>File name:</strong> @(file.Name)<br />
-        <strong>File size (bytes):</strong> <span id="file-size">@(file.Size)</span><br />
-        <strong>File content:</strong> <span id="file-content">@content</span><br />
+        <strong>Name:</strong> <span id="file-name">@(file.Name)</span><br />
+        <strong>Last modified:</strong> <span id="file-last-modified">@(file.LastModified.ToString())</span><br />
+        <strong>Size (bytes):</strong> <span id="file-size">@(file.Size)</span><br />
+        <strong>Content type:</strong> <span id="file-content-type">@(file.ContentType)</span><br />
+        <strong>Content:</strong> <span id="file-content">@content</span><br />
     </p>
 }