Merge pull request #14 from Ellested/folderUpload

Added folder upload feature, supported by Chrome, Edge, FireFox

Author: SteveSandersonMS

BlazorInputFile/FileListEntryImpl.cs

@@ -23,6 +23,8 @@ public class FileListEntryImpl : IFileListEntry
 
         public string Type { get; set; }
 
+        public string RelativePath { get; set; }
+
         public Stream Data
         {
             get

BlazorInputFile/IFileListEntry.cs

@@ -13,6 +13,8 @@ public interface IFileListEntry
 
         string Type { get; }
 
+        public string RelativePath { get; set; }
+
         Stream Data { get; }
 
         event EventHandler OnDataRead;

BlazorInputFile/wwwroot/inputfile.js

@@ -12,7 +12,8 @@
                         lastModified: new Date(file.lastModified).toISOString(),
                         name: file.name,
                         size: file.size,
-                        type: file.type
+                        type: file.type,
+                        relativePath: file.webkitRelativePath
                     };
                     elem._blazorFilesById[result.id] = result;
 

samples/Sample.Core/Pages/MultiFile.razor

@@ -4,7 +4,11 @@
 
 <p>A multi-file picker that displays information about selection and shows progress as each one is loaded.</p>
 
-<InputFile multiple OnChange="HandleSelection" />
+<label for="uploadFiles">Select File(s)</label>
+<InputFile id="uploadFiles" multiple OnChange="HandleSelection" />
+
+<label for="uploadFolder">Select Folder</label>
+<InputFile id="uploadFolder" multiple webkitdirectory OnChange="HandleSelection" />
 
 @if (selectedFiles != null)
 {
@@ -19,6 +23,7 @@
                 Size: <strong>@file.Size bytes</strong>;
                 Last modified: <strong>@file.LastModified.ToShortDateString()</strong>;
                 Type: <strong>@file.Type</strong>
+                Relative Path: <strong>@file.RelativePath</strong>
             </div>
 
             <!-- Upload button -->