{"id":24150742,"url":"https://github.com/xaviersolau/blazorjsblob","last_synced_at":"2025-08-21T07:12:39.992Z","repository":{"id":43439551,"uuid":"497355292","full_name":"xaviersolau/BlazorJsBlob","owner":"xaviersolau","description":"BlazorJsBlob provides a convenient and efficient way to use JavaScript Blob storage from your Blazor application","archived":false,"fork":false,"pushed_at":"2024-11-23T00:20:08.000Z","size":3218,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-01T01:42:34.072Z","etag":null,"topics":["blazor","dotnet","jsblob"],"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/xaviersolau.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-28T15:24:25.000Z","updated_at":"2025-05-06T12:29:06.000Z","dependencies_parsed_at":"2024-11-23T00:33:37.629Z","dependency_job_id":null,"html_url":"https://github.com/xaviersolau/BlazorJsBlob","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"43242b9c1007e97b4d3fedca03d43c49b1f57b39"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xaviersolau/BlazorJsBlob","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorJsBlob","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorJsBlob/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorJsBlob/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorJsBlob/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xaviersolau","download_url":"https://codeload.github.com/xaviersolau/BlazorJsBlob/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorJsBlob/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271441740,"owners_count":24760348,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["blazor","dotnet","jsblob"],"created_at":"2025-01-12T09:12:28.765Z","updated_at":"2025-08-21T07:12:39.966Z","avatar_url":"https://github.com/xaviersolau.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlazorJsBlob\n\nThis project provides a convenient and efficient way to use JavaScript Blob storage from your Blazor application\nregardless of whether it's hosted on WebAssembly or Server-side.\n\nDon't hesitate to post issues, pull requests on the project or to fork and improve the project.\n\n## Project dashboard\n\n[![Build - CI](https://github.com/xaviersolau/BlazorJsBlob/actions/workflows/build-ci.yml/badge.svg)](https://github.com/xaviersolau/BlazorJsBlob/actions/workflows/build-ci.yml)\n[![Coverage Status](https://coveralls.io/repos/github/xaviersolau/BlazorJsBlob/badge.svg?branch=main)](https://coveralls.io/github/xaviersolau/BlazorJsBlob?branch=main)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n\n| Package                     | Nuget.org | Pre-release |\n|-----------------------------|-----------|-----------|\n|**SoloX.BlazorJsBlob**       |[![NuGet Beta](https://img.shields.io/nuget/v/SoloX.BlazorJsBlob.svg)](https://www.nuget.org/packages/SoloX.BlazorJsBlob)|[![NuGet Beta](https://img.shields.io/nuget/vpre/SoloX.BlazorJsBlob.svg)](https://www.nuget.org/packages/SoloX.BlazorJsBlob)|\n\n## License and credits\n\nBlazorJsBlob project is written by Xavier Solau. It's licensed under the MIT license.\n\n * * *\n\n## Installation\n\nYou can checkout this Github repository or you can use the NuGet packages:\n\n**Install using the command line from the Package Manager:**\n```bash\nInstall-Package SoloX.BlazorJsBlob -version 1.0.2\n```\n\n**Install using the .Net CLI:**\n```bash\ndotnet add package SoloX.BlazorJsBlob --version 1.0.2\n```\n\n**Install editing your project file (csproj):**\n```xml\n\u003cPackageReference Include=\"SoloX.BlazorJsBlob\" Version=\"1.0.2\" /\u003e\n```\n\n## How to use it\n\nNote that you can find code examples in this repository at this location: `src/examples`.\n\n### Set up the dependency injection\n\nA few lines of code are actually needed to setup the BlazorJsBlob services.\nYou just need to use the name space `SoloX.BlazorJsBlob` to get access to\nthe right extension methods and to add the services in your `ServiceCollection` :\n\n* For Blazor WebAssembly:\n\nUpdate your `Program.cs` file (in `Main` method if using .Net 5 way):\n\n```csharp\n// Add BlazorJsBlob services.\nbuilder.Services.AddJsBlob();\n```\n\nYou can find an example in the project repository in `src/examples/SoloX.BlazorJsBlob.Example.WebAssembly`\n(or a .Net5 example `src/examples/SoloX.BlazorJsBlob.Example.Net5.WebAssembly`).\n\n* For Blazor Server Side:\n\nFirst add the `using SoloX.BlazorJsBlob` directives then\n- .Net 5 way: update your `ConfigureServices` method in the `Startup.cs` file\n```csharp\n// Add BlazorJsBlob services.\nservices.AddJsBlob();\n```\n\n- .Net 6 way: update your `Program.cs` file\n```csharp\n// Add BlazorJsBlob services.\nbuilder.Services.AddJsBlob();\n```\n\nYou can find an example in the project repository in `src/examples/SoloX.BlazorJsBlob.Example.ServerSide`\n(or a .Net5 example `src/examples/SoloX.BlazorJsBlob.Example.Net5.ServerSide`).\n\n### Create a JavaScript Blob\n\nFirst you need to inject the `IBlobService`. Once you have an instance of the service, you can call the `CreateBlobAsync` method with\nthe data stream you need to store.\n\n```csharp\n// Let's say that we get the data stream from a HTTP hosted file:\nvar stream = await HttpClient.GetStreamAsync(@\"some_file.jpg\");\n\n// Create a JavaScript Blob in your browser\n// (The created IBlob object implements IAsyncDisposable).\nawait using var blob = await BlobService.CreateBlobAsync(stream, \"image/jpeg\");\n```\n\n\u003e Note that the Blob implements IAsyncDisposable interface so you need to properly dispose it once you don't need it any more.\n\n### Use the JavaScript Blob\n\nOnce you have a Blob, you may need to use it to display the data in you Razor page. Let's say that in our case we want to use the\nBlob data in a `embed` html element.\n\nThe Blob object provides two useful property:\n* `Uri` : The JavaScript Blob URL that you can use as source in your HTML elements like `embed` or `img` for example;\n* `Type` : The media type the Blob have been created with;\n \n```html\n\u003cdiv style=\"margin:10px\"\u003e\n    \u003cembed src=\"@blob.Uri\" width=\"500\" height=\"500\" type=\"@blob.Type\"\u003e\n\u003c/div\u003e\n\n@code{\n    // with blob being a field of the page.\n    private IBlob blob = ...;\n}\n```\n\n### Save the JavaScript Blob as a file\n\nIn the case where you need to save the data stored in your Blob, here is a really easy way: you can just use the `IBlobService`\nand call the method `SaveAsFileAsync` with the Blob as parameter.\n\n```csharp\n// Let's say that we have a Blob created.\nawait using var blob = await BlobService.CreateBlobAsync(/*...*/);\n\n// Nothing more to do than calling the SaveAsFileAsync method.\nawait BlobService.SaveAsFileAsync(blob, \"some_file_name.jpg\");\n```\n\n### Save an url file as a file\n\nIn the case where you need to save the data stored in a given Url location, you can just use the `IBlobService`\nand call the method `SaveAsFileAsync` with the target URL as parameter.\n\n```csharp\n// Let's say that we have an Url.\nvar url = \"https://host/some_file_name.jpg\";\n\n// Nothing more to do than calling the SaveAsFileAsync method.\nawait BlobService.SaveAsFileAsync(url, \"some_file_name.jpg\");\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaviersolau%2Fblazorjsblob","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxaviersolau%2Fblazorjsblob","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaviersolau%2Fblazorjsblob/lists"}