{"id":13466665,"url":"https://github.com/jburman/W8lessLabs.Blazor.LocalFiles","last_synced_at":"2025-03-26T00:31:20.240Z","repository":{"id":139105602,"uuid":"159272254","full_name":"jburman/W8lessLabs.Blazor.LocalFiles","owner":"jburman","description":"A Blazor component that makes it super simple to load local files into your .NET code running on WASM.","archived":false,"fork":false,"pushed_at":"2021-12-31T20:45:04.000Z","size":318,"stargazers_count":52,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-21T18:08:28.000Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jburman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-27T03:45:28.000Z","updated_at":"2025-03-19T21:37:06.000Z","dependencies_parsed_at":"2024-01-22T07:10:02.938Z","dependency_job_id":"6e591474-d988-458b-a261-0517abc49222","html_url":"https://github.com/jburman/W8lessLabs.Blazor.LocalFiles","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jburman%2FW8lessLabs.Blazor.LocalFiles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jburman%2FW8lessLabs.Blazor.LocalFiles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jburman%2FW8lessLabs.Blazor.LocalFiles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jburman%2FW8lessLabs.Blazor.LocalFiles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jburman","download_url":"https://codeload.github.com/jburman/W8lessLabs.Blazor.LocalFiles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245566098,"owners_count":20636390,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T15:00:48.019Z","updated_at":"2025-03-26T00:31:19.825Z","avatar_url":"https://github.com/jburman.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Tools \u0026 Utilities"],"readme":"## Local file support for Blazor (Wasm only) [![NuGet](https://img.shields.io/nuget/v/W8lessLabs.Blazor.LocalFiles.svg)](https://www.nuget.org/packages/W8lessLabs.Blazor.LocalFiles/)\n\nThe LocalFiles library contains a Blazor component that makes it super simple to load local files into your .NET code running on Wasm.\nUnleash your .NET code to do all kinds of wonderful things with files - e.g. parsing, scanning, modifying etc. without ever having to send the data to a server first!\n\n**Note**: This component is currently limited to Wasm use only. For an alternative approach that supports both \nclient side and server side file inputs, see Steve Sanderson's [BlazorInputFile component](http://blog.stevensanderson.com/2019/09/13/blazor-inputfile/).\n\n## Getting Started\n\nSee the [test project](https://github.com/jburman/W8lessLabs.Blazor.LocalFiles/tree/master/test/W8lessLabs.Blazor.LocalFilesTest) for several working examples with code. \nThere is now also a [live demo site](https://jburman.github.io/BlazorLocalFilesExample/) on Github Pages.\n\nFirst, install the [W8lessLabs.Blazor.LocalFiles nuget package](https://www.nuget.org/packages/W8lessLabs.Blazor.LocalFiles).\n\n**If you are upgrading from a Preview release,** please see the Change Log below.\n\n```\ndotnet add package W8lessLabs.Blazor.LocalFiles --version 3.0.0\n```\n\nSecond, add a using reference in your **_Imports.razor**.\n\n```\n@using W8lessLabs.Blazor.LocalFiles\n```\n\nUpdate the **index.html** and add a reference to a .js file included in the W8lessLabs.Blazor.LocalFiles package.\n```\n\u003cscript src=\"_content/W8lessLabs.Blazor.LocalFiles/js/fileupload.js\"\u003e\u003c/script\u003e\n```\n\nNext, in your Blazor .cshtml page or component add the **FileSelect** component tag.\n\n\n```\n\u003cFileSelect @ref=\"fileSelect\" FilesSelected=\"FilesSelectedHandler\"\u003e\u003c/FileSelect\u003e\n```\n\nThe FileSelect component is a non-visual component that will wire up the necessary plumbing to select and open files. Next, bind an event handler to respond to the file selections.\n\n\n```\n@* onclick triggers the file selector's file picker dialog *@\n\u003cbutton @onclick=\"SelectFiles\"\u003eSelect Files\u003c/button\u003e\n\n@code \n{\n    // Component reference\n    FileSelect fileSelect;\n    \n    void SelectFiles() =\u003e\n        fileSelect.SelectFiles();\n\n    // Handle the file selection event\n    async Task FilesSelectedHandler(SelectedFile[] selectedFiles)\n    {\n        // example of opening a selected file...\n        var selectedFile = selectedFiles[0];\n        using (var fileStream = await fileSelect.OpenFileStreamAsync(selectedFile.Name))\n        {\n            // read from file stream here...\n        }\n\n        // alternatively, load all the bytes at once\n        var fileBytes = await fileSelect.GetFileBytesAsync(selectedFile.Name);\n        \n        // or, get a retrieve the underlying blob url\n        string fileBlobUrl = await fileSelect.GetFileBlobUrlAsync(selectedFile.Name);\n    }\n}\n```\n## Configuration Options\nWithout any additional configuration (as in the example above), you'll get a file picker that allows a single file to be selected with any extension. This behavior can be controlled via the **IsMultiple** and **Accept** properties, respectively.\n\n```\n\u003cFileSelect @ref=\"imageFileSelect\" IsMultiple=\"true\" Accept=\".jpg,.png\" FilesSelected=\"ImagesSelected\"\u003e\u003c/FileSelect\u003e\n```\nThe file selector above allows multiple files to be selected at once, and filters to .jpg and .png file extensions.\n\n- Reference for Accept values: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept\n\nFor a more detailed example [see the Test project](https://github.com/jburman/W8lessLabs.Blazor.LocalFiles/tree/master/test/W8lessLabs.Blazor.LocalFilesTest) in GitHub.\n\n## FileSelectList\nNew with 1.0.0 release, is a **FileSelectList** component that acts as a re-usable file selector. The regular FileSelect is designed to \nonly remember the last set of files that the user selected. The FileSelectList component provides a similar API surface but acts as \ncontainer of selected files that is appended to each time SelectFiles is called.\n\n**Note** if the user selects files with the same name, then previous entries are overwritten.\n\n```\n\u003cFileSelectList @ref=\"fileSelectList\" FilesSelected=\"FilesSelectedHandler\"\u003e\u003c/FileSelectList\u003e\n```\n\nSee the [Test Page](https://raw.githubusercontent.com/jburman/W8lessLabs.Blazor.LocalFiles/master/test/W8lessLabs.Blazor.LocalFilesTest/Pages/FileList.razor) for example code for using the FileSelectList.\n\n\n## Technical Details\nUnder the covers, the LocalFiles component is using a vanilla file input element and \ncreates blob: file URLs ([https://www.w3.org/TR/FileAPI/#url](https://www.w3.org/TR/FileAPI/#url).) \nThe contents of the files are then retrieved using the browser's Fetch API and passing in the blob: URLs.\n\n\n## Change Log\n\n### From v2.0.0 to v3.0.0\n- Update to .NET 6.0. \n- No functionality changes\n\n### From v1.0.1 to v2.0.0\n- Update to .NET 5.0. \n- No functionality changes but a few internal improvements. Takes advantage of Blazor's new async dispose for example.\n\n### From v1.0.0 to v1.0.1\n- Added new FileSelect.FilesChanged and FileSelectList.FileListChanged event callbacks\n- The new events provide an args object with a reference to the FileSelect (or FileSelectList) as well as to\nthe list of selected files.\n\n**Example of new Event Callback**\n```\n\u003cFileSelect @ref=\"fileSelect\" FilesChanged=\"FilesChangedHandler\" /\u003e\n\n\u003cbutton @onclick=\"@(() =\u003e fileSelect.SelectFiles())\"\u003eSelect Files\u003c/button\u003e\n\n@code\n{\n    FileSelect fileSelect;\n\n    async Task FilesChangedHandler(FileSelectChangeArgs args)\n    {\n        var file = args.Files.First();\n        using (var fileStream = await args.FileSelect.OpenFileStreamAsync(file.Name))\n        {\n            // do something with file contents ...\n        }\n    }\n}\n```\n\n### From Preview to v1.0\n- Replaced Event and callback options with more standard EventCallback.\n- Removed SelectedFileReader class as the FileSelect component now automatically handles file element disposal.\n- Moved methods previously available on the SelectedFileReader directly onto the FileSelect component.\n- Added new FileSelectList component that is designed as a re-usable file selector that builds up a list of selected files (and allows removal).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjburman%2FW8lessLabs.Blazor.LocalFiles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjburman%2FW8lessLabs.Blazor.LocalFiles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjburman%2FW8lessLabs.Blazor.LocalFiles/lists"}