{"id":11047,"date":"2021-12-27T02:09:38","date_gmt":"2021-12-26T17:09:38","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=11047"},"modified":"2021-12-27T02:09:38","modified_gmt":"2021-12-26T17:09:38","slug":"blazor-webassembly%e3%81%a7aws-sdk%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%82%88%e3%81%86%e3%81%a8%e3%81%97%e3%81%a6%e3%83%8f%e3%83%9e%e3%81%a3%e3%81%9f%e8%a9%b1","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=11047","title":{"rendered":"Blazor WebAssembly\u3067AWS SDK\u3092\u4f7f\u7528\u3057\u3088\u3046\u3068\u3057\u3066\u30cf\u30de\u3063\u305f\u8a71"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-11052\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws.png\" alt=\"\" width=\"648\" height=\"298\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws.png 870w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws-300x138.png 300w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws-768x353.png 768w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p>\u3069\u3082\u3067\u3059\u3002<\/p>\n<p>WebAssembly\u306bWeb\u306e\u672a\u6765\u3092\u611f\u3058\u3066\u304a\u308a\u307e\u3057\u3066\u3001\u793e\u5185\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9\u3067\u3082\u5927\u3044\u306b\u304a\u8a71\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u4eca\u56deBlazor WebAssembly\u3067AWS SDK\u3092\u4f7f\u7528\u3057\u3088\u3046\u3068\u3057\u3066\u30cf\u30de\u3063\u3061\u3083\u3063\u305f\u3088\u3049\u3068\u8a00\u3063\u305f\u304a\u8a71\u3067\u3059\u3002<\/p>\n<p>\u691c\u8a3c\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3001\u30d5\u30a1\u30a4\u30eb\u3092S3\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3001AWS JavaScript SDK\u3092\u4f7f\u3046\u69d8\u306a\u611f\u899a\u3067\u3001\u691c\u8a3c\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3060\u304b\u3089AWS SDK \u306e S3 \u3092\u30d5\u30ed\u30f3\u30c8\u5074\u3067\u5229\u7528\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3088\u3046\u3068\u8a66\u307f\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>AWS\u306e\u30ad\u30fc\u306a\u3069\u3092\u30d5\u30ed\u30f3\u30c8\u5074\u3067\u6301\u3064\u4e8b\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u691c\u8a3c\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u516c\u958b\u4e88\u5b9a\u3082\u306a\u3044\u306e\u3067\u305d\u306e\u8fba\u306f\u826f\u3044\u3068\u8a00\u3046\u3053\u3068\u3067\u30b5\u30af\u30c3\u3068\u4f5c\u6210\u3057\u3088\u3046\u3068\u601d\u3063\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3002\u3002\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4>\u307e\u305a\u306f\u3001AWS SDK\u3067\u30b5\u30af\u30c3\u3068\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/h4>\n<p>node.js\u3067\u5b9f\u88c5\u3059\u308b\u969b\u306f\u3001\u4ee5\u4e0b\u306e\u69d8\u306a\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3067S3\u3078\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306f\u53ef\u80fd\u3060\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">const AWS = require('aws-sdk');\r\nconst fs  = require('fs');\r\n\r\n\/\/ accessKeyId\u3001secretAccessKey\u304c\u8a18\u8f09\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u8aad\u307f\u8fbc\u307f\r\nAWS.config.loadFromPath('.\/awskey.json');\r\nAWS.config.update({region: 'AWS region'});\r\n\r\nconst s3 = new AWS.S3();\r\n\r\n\/\/ \u4e0a\u8a18\u306eAWS.config\u3067key\u8aad\u307f\u8fbc\u307e\u305a\u306b\u30d9\u30bf\u66f8\u304d\u306e\u5834\u5408\r\n\/\/ import { S3Client } from '@aws-sdk\/client-s3';\r\n\/\/ const s3 = new S3Client({\r\n\/\/   region: 'ap-northeast-1 \u306a\u3069AWS region',\r\n\/\/   credentials: {\r\n\/\/     accessKeyId: 'accessKeyId',\r\n\/\/     secretAccessKey: 'secretAccessKey',\r\n\/\/   }\r\n\/\/ });\r\n\r\nconst params = {\r\n Bucket: \"Bucket\u540d\",\r\n Key: \"s3 Bucketkey\uff08\u30d5\u30a1\u30a4\u30eb\u30fb\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u30fb\u30d1\u30b9\uff09\"\r\n};\r\n\r\nconst file = fs.readFileSync(\"\u30d5\u30a1\u30a4\u30eb\u30d1\u30b9\");\r\nparams.Body = file;\r\ns3.putObject(params, function(err, data) {\r\n  if (err) console.log(err, err.stack);\r\n  else     console.log(data);\r\n});<\/pre>\n<p>\u3053\u3093\u306a\u611f\u3058\u306b\u30b5\u30af\u30c3\u3068\u3044\u304d\u305f\u304b\u3063\u305f\u306e\u3067\u8abf\u3079\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u3069\u3046\u3082Blazor\u306e\u30e6\u30fc\u30b6\u30fc\u304c\u5c11\u306a\u3044\u306e\u304b\u3001\u65e5\u672c\u8a9e\u8a18\u4e8b\u3067\u306e\u60c5\u5831\u304c\u5c11\u306a\u3044\u3002\u3002<\/p>\n<p>\u591a\u304f\u306f\u6d77\u5916\u306e\u60c5\u5831\u3068\u306a\u3063\u3066\u3057\u307e\u3046\u3002<\/p>\n<p>\u8272\u3005\u3068\u53c2\u8003\u306b\u3057\u306a\u304c\u3089\u3001\u3068\u308a\u3042\u3048\u305a\u306fAWS SDK\u304c\u5fc5\u8981\u306a\u306e\u3067\u3001NuGet\u306b\u53d6\u5f97\u3059\u308b\u3053\u3068\u306b\u3002<\/p>\n<p>Visual Studio\u306eNuGet\u3067\u53f3\u30af\u30ea\u30c3\u30af\u3067\u3001\u300cManage NuGet Packages&#8230;\u300d\u3092\u9078\u629e\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-11048\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws2.png\" alt=\"\" width=\"486\" height=\"254\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws2.png 590w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws2-300x157.png 300w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/p>\n<p>\u300cAWSSDK.Core\u300d\u3068\u300cAWSSDK.S3\u300d\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3002<\/p>\n<p>\u3072\u3087\u3063\u3068\u3057\u305f\u3089\u3001\u300cAWSSDK.S3\u300d\u306a\u3044\u304b\u3082\u3002\u3002\uff08\u591a\u5206\u3044\u308b\uff09<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-11049\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws3.png\" alt=\"\" width=\"650\" height=\"215\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws3.png 978w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws3-300x99.png 300w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws3-768x254.png 768w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>\u300c_imports.razor\u300d\u306b\u4ee5\u4e0b\u3092\u8a18\u8ff0\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>_imports.razor<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">@using Amazon\r\n@using Amazon.S3\r\n@using Amazon.S3.Model<\/pre>\n<p>.NetCore5\u3088\u308a\u300cInputFile\u300d\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u7528\u610f\u3055\u308c\u3066\u304a\u308a\u3001input\u30d5\u30a9\u30fc\u30e0\u3092\u4f7f\u7528\u3059\u308b\u969b\u306f\u3001\u3053\u3061\u3089\u3092\u4f7f\u3046\u3068\u826f\u3044\u307f\u305f\u3044\u306a\u306e\u3067\u3001\u4f7f\u7528\u3057\u3066\u3044\u304f\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;InputFile OnChange=&quot;@LoadFiles&quot; multiple \/&gt;\r\n&lt;button type=&quot;submit&quot; @onclick=&quot;SubmitFileAsync&quot;&gt;Upload&lt;\/button&gt;<\/pre>\n<p>C#\u306e\u30b3\u30fc\u30c9\u306f\u3001\u6700\u5c0f\u9650\u306b\u3059\u308b\u3068\u3057\u3066\u4ee5\u4e0b\u306e\u69d8\u306a\u611f\u3058\u3067\u4f5c\u6210\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">@code {\r\n    private AmazonS3Client s3Client;\r\n    private const string BUCKET_NAME = &quot;S3\u306e\u30d0\u30b1\u30c3\u30c8\u540d&quot;;\r\n    private const string FOLDER_NAME = &quot;\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u540d&quot;;\r\n    private const double DURATION = 24;\r\n\r\n    private Stream _fileStream = null;\r\n    private string _selectedFileName = null;\r\n    private string _objectKey = null;\r\n    private string _contentType = null;\r\n\r\n    protected override async Task OnInitializedAsync()\r\n    {\r\n        var config = new AmazonS3Config\r\n        {\r\n            RegionEndpoint = RegionEndpoint.APNortheast1,\r\n            UseAlternateUserAgentHeader = true\r\n        };\r\n\r\n        s3Client = new AmazonS3Client(&quot;AWS accessKeyId&quot;, &quot;AWS secretAccessKey&quot;, config);\r\n        await JSRuntime.InvokeAsync&lt;string&gt;(&quot;console.log&quot;, s3Client);\r\n    }\r\n\r\n    public void LoadFiles(InputFileChangeEventArgs e)\r\n    {\r\n        try\r\n        {\r\n            foreach (var file in e.GetMultipleFiles(3))\r\n            {\r\n                StateHasChanged();\r\n                using (Stream stream = file.OpenReadStream())\r\n                {\r\n                    _fileStream = stream;\r\n                    _selectedFileName = file.Name;\r\n                    _objectKey = $&quot;{FOLDER_NAME}\/{file.Name}&quot;;\r\n                    _contentType = file.ContentType;\r\n                }\r\n            }\r\n        }\r\n        catch (Exception ex)\r\n        {\r\n            Console.WriteLine(ex);\r\n        }\r\n    }\r\n\r\n    public async Task SubmitFileAsync()\r\n    {\r\n        var putObjectRequest = new PutObjectRequest\r\n        {\r\n            BucketName = BUCKET_NAME,\r\n            Key = _objectKey,\r\n            InputStream = _fileStream,\r\n            ContentType = _contentType,\r\n        };\r\n        var response = await s3Client.PutObjectAsync(putObjectRequest);\r\n    }\r\n}<\/pre>\n<p>\u305d\u308c\u3067\u306f\u3001\u5b9f\u884c\u3057\u3066\u307f\u308b\u3068\u3002<\/p>\n<p>\u30d5\u30a1\u3002\u30a8\u30e9\u30fc<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer&#x5B;100]\r\n      Unhandled exception rendering component: System.Security.Cryptography.Algorithms is not supported on this platform.\r\nSystem.PlatformNotSupportedException: System.Security.Cryptography.Algorithms is not supported on this platform.\r\n   at System.Security.Cryptography.HMACSHA256..ctor()\r\n   at<\/pre>\n<p>\u30a8\u30e9\u30fc\u3092\u898b\u3066\u307f\u308b\u3068\u3001<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">System.Security.Cryptography.Algorithms is not supported on this platform.<\/pre>\n<p>\u3060\u3068\u3002\u3002\u3002<\/p>\n<p>\u3069\u3046\u3084\u3089\u3001AWS SDK PutObjectRequest class\u4f7f\u7528\u6642\u306b\u30a8\u30e9\u30fc\u304c\u30b9\u30ed\u30fc\u3055\u308c\u3066\u3044\u308b\u69d8\u5b50\u3002<\/p>\n<p><a href=\"https:\/\/docs.aws.amazon.com\/sdkfornet1\/latest\/apidocs\/html\/T_Amazon_S3_Model_PutObjectRequest.htm\">AWS SDK PutObjectRequest class<\/a><\/p>\n<p>WebAssembly\u4e0a\u3067\u306e\u30a8\u30e9\u30fc\u306a\u306e\u3067\u8abf\u3079\u3066\u3044\u308b\u3068\u3001<a href=\"https:\/\/docs.microsoft.com\/ja-jp\/dotnet\/core\/compatibility\/cryptography\/5.0\/cryptography-apis-not-supported-on-blazor-webassembly?utm_source=pocket_mylist\" target=\"_blank\" rel=\"noopener\">\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u306e\u65b9\u306b\u306f\u4ee5\u4e0b\u306e\u69d8\u306b\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308b\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">System.Security.Cryptography API \u306f\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u5b9f\u884c\u3055\u308c\u308b\u3068\u3001\r\n\u5b9f\u884c\u6642\u306b PlatformNotSupportedException \u3092\u30b9\u30ed\u30fc\u3057\u307e\u3059\u3002<\/pre>\n<p>\u3042\u3041\u3002\u305d\u308c\u3060\u3002\u5bfe\u5fdc\u7b56\u306f\u3068\u3002\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\u63a8\u5968\u30a2\u30af\u30b7\u30e7\u30f3\r\n\u73fe\u6642\u70b9\u3067\u306f\u3001\u63a8\u5968\u3055\u308c\u308b\u56de\u907f\u7b56\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/pre>\n<p>\u30ac\u30fc\u30f3\u3002\u3002\u3002<\/p>\n<p>Blazor\u3067\u306eAWS SDK\u4f7f\u7528\u306f\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u3063\u3066\u66f8\u3044\u3066\u3044\u305f\u306f\u305a\u306a\u306e\u306b\u3002\u3002\u3002<\/p>\n<p>\u3088\u304f\u3088\u304f\u898b\u3066\u3044\u308b\u3068\u3002\u3002<a href=\"https:\/\/www.reddit.com\/r\/dotnet\/comments\/l0z8l2\/aws_sdk_for_net_now_supports_blazor_webassembly\/\">reddit<\/a>\u306b\u3066\u4ee5\u4e0b\u306e\u69d8\u306a\u30b3\u30e1\u30f3\u30c8\u3092\u898b\u3064\u3051\u305f\u3002\u3002<\/p>\n<blockquote><p>\u307f\u306a\u3055\u3093\u3001\u3053\u3093\u306b\u3061\u306f\u3002\u6700\u65b0\u30ea\u30ea\u30fc\u30b9\uff08v3.5.2\uff09\u3067\u306f\u3001Blazor WebAssembly \u30e9\u30f3\u30bf\u30a4\u30e0\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f! SDK \u30c1\u30fc\u30e0\u306b\u611f\u8b1d\u3057\u307e\u3059 \u6ce8\uff1a\u79c1\u306fAmazon Web Services\u306e\u793e\u54e1\u3067\u3059\uff08\u305f\u307e\u305f\u307eC#\u304c\u597d\u304d\u306a\u3093\u3067\u3059\uff01\uff09\u3002 EDIT: \u30ea\u30ea\u30fc\u30b9\u5f8c\u306e\u30c6\u30b9\u30c8\u3067\u3001Blazor WASM\u30e9\u30f3\u30bf\u30a4\u30e0\u306e.NET 5\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u7834\u640d\u304c\u3042\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002 System.Security.Cryptography.Algorithms\u540d\u524d\u7a7a\u9593\u3078\u306e\u30b5\u30dd\u30fc\u30c8\u304c\u524a\u9664\u3055\u308c\u3001\u307b\u307c\u3059\u3079\u3066\u306e\u30b5\u30fc\u30d3\u30b9\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u4f7f\u7528\u3057\u3066\u3044\u308bSigv4\u7f72\u540d\u304c\u5931\u6557\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002 net core app3.1\u30e9\u30f3\u30bf\u30a4\u30e0\u306f\u52d5\u304d\u307e\u3059\u304c\u3002<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p>\u30ac\u30fc\u30f3\u3002\u3002<\/p>\n<p>\u3067\u3082\u3001\u300cnet core app3.1\u30e9\u30f3\u30bf\u30a4\u30e0\u306f\u52d5\u304d\u307e\u3059\u304c\u3002\u300d\u3068\u3002<\/p>\n<p>\u3068\u3044\u3046\u4e8b\u3067\u3001<strong>.NET core 3.1<\/strong>\u3067\u5b9f\u884c\u3057\u3066\u3044\u304f\u3053\u3068\u306b\u6c7a\u3081\u305f\u306e\u3067\u3084\u3063\u3066\u307f\u308b\u3053\u3068\u306b\u3002<\/p>\n<p><strong>.NET core 3.1<\/strong>\u3067\u306f\u3001<strong>.NET core 5<\/strong>\u3067\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305fInputFile\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4f7f\u7528\u3067\u304d\u306a\u3044\uff08\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u306a\u3044\uff09\u306e\u3067\u3001\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u300c<a href=\"https:\/\/github.com\/SteveSandersonMS\/BlazorInputFile%E3%80%8D%E3%82%92NuGet%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%A7%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AB%E3%80%82\">https:\/\/github.com\/SteveSandersonMS\/BlazorInputFile\u300d\u3092NuGet\u30d1\u30c3\u30b1\u30fc\u30b8\u3067\u53d6\u5f97\u3057\u3066\u4f7f\u3063\u3066\u307f\u308b\u3053\u3068\u306b\u3002<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-11050\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws4.png\" alt=\"\" width=\"647\" height=\"126\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws4.png 998w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws4-300x58.png 300w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws4-768x149.png 768w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/p>\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3089\u3001\u300c_imports.razor\u300d\u306bBlazorInputFile\u3092\u8ffd\u52a0\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">@using BlazorInputFile;<\/pre>\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001<span class=\"notion-enable-hover\" data-token-index=\"1\" data-reactroot=\"\">.NET core 5<\/span>\u3067\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305fInputFile\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u307b\u307c\u540c\u69d8\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;InputFile OnChange=&quot;HandleSelection&quot; \/&gt;<\/pre>\n<p>\u30b5\u30f3\u30d7\u30eb\u30bd\u30fc\u30b9\u3092\u53c2\u8003\u306b\u3001MemoryStream\u53c2\u7167\u306e\u305f\u3081\u300cSystem.IO\u300d\u3092using\u6307\u5b9a\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">@using System.IO;<\/pre>\n<p>status\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306eHTML\u3092\u8a18\u8ff0\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;p&gt;@status&lt;\/p&gt;<\/pre>\n<p>C#\u306ecode\u7b87\u6240\u3002\u30b5\u30f3\u30d7\u30eb\u30bd\u30fc\u30b9\u53c2\u8003\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">@code {\r\n    string status;\r\n\r\n    async Task HandleSelection(IFileListEntry&#x5B;] files)\r\n    {\r\n        var file = files.FirstOrDefault();\r\n        if (file != null)\r\n        {\r\n            \/\/ Just load into .NET memory to show it can be done\r\n            \/\/ Alternatively it could be saved to disk, or parsed in memory, or similar\r\n            var ms = new MemoryStream();\r\n            await file.Data.CopyToAsync(ms);\r\n\r\n            status = $\"Finished loading {file.Size} bytes from {file.Name}\";\r\n        }\r\n    }\r\n}<\/pre>\n<p>\u3068\u3044\u3046\u4e8b\u3067\u5b9f\u884c\u3057\u3066\u307f\u308b\u3068\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer&#x5B;100]\r\n      Unhandled exception rendering component: Could not find 'BlazorInputFile' in 'window'.\r\n      Error: Could not find 'BlazorInputFile' in 'window'.<\/pre>\n<p>\u30d6\u30d8\u30fc\u3002\u3002window\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306bBlazorInputFile\u3068\u304b\u306a\u3044\u3088\u30a8\u30e9\u30fc\u3002\u3002<\/p>\n<p>\u300c<a href=\"https:\/\/github.com\/SteveSandersonMS\/BlazorInputFile\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/SteveSandersonMS\/BlazorInputFile<\/a>\u300d\u3092\u30d5\u30a9\u30fc\u30af\u3057\u305f\u300c Agno.BlazorInputFile\u300d\u3068\u3044\u3046\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u3042\u308a\u3001\u3082\u3057\u304b\u3057\u305f\u3089\u8272\u3005\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u304b\u3082\u3068\u8a66\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-11051\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws5.png\" alt=\"\" width=\"650\" height=\"112\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws5.png 966w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws5-300x52.png 300w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2021\/12\/blazor-aws5-768x132.png 768w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>using\u6307\u5b9a\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u300cAgno.BlazorInputFile\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">@using Agno.BlazorInputFile;<\/pre>\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4ee5\u4e0b\u306e\u69d8\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;AgnoInputFile OnFileChange=&quot;HandleSelection&quot; \/&gt;<\/pre>\n<p>\u4f7f\u7528\u3057\u3066\u307f\u308b\u3068\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Unhandled exception rendering component: Could not find 'BlazorInputFile' in 'window'.\r\n      Error: Could not find 'BlazorInputFile' in 'window'.<\/pre>\n<p>\u3076\u3078\u30fc\u540c\u3058\u30a8\u30e9\u30fc\u3002\u3002<\/p>\n<p>\u3082\u3046\u3001\u308f\u304b\u3093\u306d\u30fc\u3088\u30fc\u3002<\/p>\n<p>\u3068\u3044\u3046\u304b\u3001\u30ec\u30dd\u30b8\u30c8\u30ea\u898b\u3066\u307f\u308b\u3068\u308f\u304b\u308a\u307e\u3059\u304c\u3001<strong>.NET core 5<\/strong>\u3067\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3082\u3046\u4f7f\u308f\u306a\u3044\u3067\u306d\u3047\u301c\u3002\u3068\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u3082\u305d\u3082\u4f7f\u7528\u3057\u306a\u3044\u307b\u3046\u304c\u826f\u3044\u306a\u3002\u3002<\/p>\n<p>\u3068\u3044\u3046\u4e8b\u3067\u3001\u8272\u3005\u3084\u3063\u305f\u7d50\u679c\u3001WebAssembly\u306e\u30ac\u30c3\u30c4\u30ea\u3057\u305f\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3082\u3042\u3063\u3066\u304b\u3001Blazor WebAssembly\u306e\u30d5\u30ed\u30f3\u30c8\u306e\u307f\u306eAWS SDK S3\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306f\u53b3\u3057\u3044\u611f\u3058\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001<a href=\"https:\/\/docs.microsoft.com\/ja-jp\/aspnet\/core\/blazor\/file-uploads?pivots=webassembly&amp;utm_source=pocket_mylist&amp;view=aspnetcore-6.0\">\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u306b\u6cbf\u3063\u3066\u3001\u901a\u5e38\u306e**.NET core 5 + \u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\uff08lamdba \u306a\u3069\u30b5\u30fc\u30d0\u30fc\u30ec\u30b9\uff09**\u3068\u8a00\u3063\u305f\u5f62\u306b\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u6d77\u5916\u306e\u8a18\u4e8b\u3067\u306f\u3042\u308a\u307e\u3059\u304c\u3001Blazor WebAssembly\u3067\u306eAWS SDK\u4f7f\u7528\u4f8b\u304c\u3042\u3063\u305f\u308a\u3057\u3066\u53c2\u8003\u306b\u3057\u307e\u3057\u305f\u304c\u3001\u3069\u3046\u3084\u3089**.NET core 5**\u4ee5\u524d\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u69d8\u3067\u3042\u3063\u3066\u3001\u4e0a\u624b\u304f\u884c\u304b\u306a\u304b\u3063\u305f\u3067\u3059\u3002\u3002<\/p>\n<p>\u3068\u3044\u3046\u4e8b\u3067\u3001\u6b21\u56de\u306f\u3001<a href=\"https:\/\/docs.microsoft.com\/ja-jp\/aspnet\/core\/blazor\/file-uploads?pivots=webassembly&amp;utm_source=pocket_mylist&amp;view=aspnetcore-6.0\">\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u306b\u6cbf\u3063\u3066\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3092\u8a66\u3057\u3066\u884c\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3067\u306f\u3041\u3002<\/p>\n<p>\u307e\u305f\u307e\u305f\u3041\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3069\u3082\u3067\u3059\u3002 WebAssembly\u306bWeb\u306e\u672a\u6765\u3092\u611f\u3058\u3066\u304a\u308a\u307e\u3057\u3066\u3001\u793e\u5185\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9\u3067\u3082\u5927\u3044\u306b\u304a\u8a71\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u4eca\u56deBlazor WebAssembly\u3067AWS SDK\u3092\u4f7f\u7528\u3057\u3088\u3046\u3068\u3057\u3066\u30cf\u30de\u3063\u3061\u3083\u3063\u305f\u3088\u3049\u3068 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[273],"tags":[287,286,176,37,288,44,45,178,78],"class_list":{"0":"post-11047","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-c-3","7":"tag-aws","8":"tag-blazor","9":"tag-html5","10":"tag-iphone-","11":"tag-spa","12":"tag-web","14":"tag-178","15":"tag-78"},"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/11047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11047"}],"version-history":[{"count":1,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/11047\/revisions"}],"predecessor-version":[{"id":11053,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/11047\/revisions\/11053"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}