.Net Core 6 JavaScript Replace missing for Byte Array

franks_00001 1

I've upgrade a Blazor 3.1 solution to Core 6. I've worked out all the issues, except 1.
EPPlus uses Byte Array when creating Excel extracts. However after .Net Core 6 upgrade the Replace function for Byte Array can't be found "sBase64.replace is not a function". I'm guess 5.0 and earlier had an override or something for Byte Array that allowed Replace to be used.

I have tried to do the upgrade from scratch, 1 piece at a time. Core 5 worked fine; but as soon as I upgrade to 6 it started failing again.

Yes, I tried changing the Byte Array to String, it gets through the JavaScript error; but the XLSX file created by EPPlus can't be opened in Excel.

Was JavaScript Byte Array Replace part of .Net Core, and will it be coming back in 6?
Is there a workaround?

Using the latest...
<TargetFramework>net6.0</TargetFramework>

franks_00001 1 Reputation point

2022-08-15T14:59:35.577+00:00

Error Message from log file...
Microsoft.JSInterop.JSException: sBase64.replace is not a function
TypeError: sBase64.replace is not a function
at base64DecToArr (https://localhost:44333/js/filedownload.js:29:27)
at BlazorDownloadFile (https://localhost:44333/js/filedownload.js:3:18)
at https://localhost:44333/_framework/blazor.server.js:1:3501
at new Promise (<anonymous>)
at kt.beginInvokeJSFromDotNet (https://localhost:44333/_framework/blazor.server.js:1:3475)
at https://localhost:44333/_framework/blazor.server.js:1:72054
at Array.forEach (<anonymous>)
at kt._invokeClientMethod (https://localhost:44333/_framework/blazor.server.js:1:72040)
at kt._processIncomingData (https://localhost:44333/_framework/blazor.server.js:1:70082)
at connection.onreceive (https://localhost:44333/_framework/blazor.server.js:1:64485)
at Microsoft.JSInterop.JSRuntime.InvokeAsyncTValue
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at CIVSApp.Pages.UserOverviewBase.DownloadExcel() in C:\Development_Hacking\CIVS.20220804.up\CIVSApp\Pages\UserOverview.razor.cs:line 150
Michael Taylor 51,346 Reputation points

2022-08-15T15:03:59.537+00:00

The line that is failing, is it C# code using EPPlus that is being compiled down to Blazor or is it JS code you wrote that Blazor is calling? Can you post the relevant source code.

This looks like an issue with EPPlus so I believe getting help from them is the correct approach.
franks_00001 1 Reputation point

2022-08-15T15:06:58.853+00:00
Won't let me added the full source, keeps exceeding 1600 char.
Error happens in the EPPlus Downloaded Java File this specific function first line...
function base64DecToArr(sBase64, nBlocksSize) {
var
sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, ""),
nInLen = sB64Enc.length,
nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2,
taBytes = new Uint8Array(nOutLen);

for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { nMod4 = nInIdx & 3; nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; if (nMod4 === 3 || nInLen - nInIdx === 1) { for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; } nUint24 = 0; } } return taBytes; }
franks_00001 1 Reputation point

2022-08-15T15:11:22.81+00:00
Won't let me added the full function, keeps exceeding 1600 char.
I invoke the EPPlus's BlazorDownloadFile based on their example C#/Blazor (https://samples.epplussoftware.com/BlazorSamples/Sample1).
Part of my code...
byte[] test = stream.ToArray();

string excelName = $"CIVS_Users-{DateTime.Now.ToString("yyyyMMddHHmmssfff")}.xlsx"; // above I define the name of the file using the current datetime. // Send the data to JS to actually download the file await JSRuntime.InvokeVoidAsync("BlazorDownloadFile", excelName, "application/octet-stream", test);
Michael Taylor 51,346 Reputation points

2022-08-15T15:15:58.617+00:00

That sBase64.replace(/[^A-Za-z0-9+\/]/g, "") line is just the standard Javascript string replace function defined here. Therefore sBase64 needs to be a string. Go back to where you're calling this function and ensure you're passing it a string and not a byte array or something.
franks_00001 1 Reputation point

2022-08-17T11:50:01.993+00:00

I had already tried that. It does get through the JavaScript error; but the resulting Excel file fails to open in excel. "Excel cannot open the file [filename] because the file format or file extension is not valid. Verify that the file has not been corrupted and that the file extension matches the format of the file."

Since this worked in 3.1 and 5.0 with no issue; I'm going to keep it at 3.1. Hopefully EPPlus will notice my other post, or my agency will buy a license to get support for a bit.

Thanks anyway.
Bruce (SqlWork.com) 61,731 Reputation points

2022-08-17T15:37:38.057+00:00

your issue is a breaking change in blazor js interop. blazor now passes .net byte arrays to javascript as a Uint8Array rather than a base64 string. you need an updated javascript routine from the vendor, or convert the bytearry to base64 before passing.

https://learn.microsoft.com/en-us/dotnet/core/compatibility/aspnet-core/6.0/byte-array-interop
Robert Woods 1 Reputation point

2022-08-17T20:42:42.683+00:00

I also try it but got error. Kindly i make this form my client. I have client related to pet business and want to make huge data progress. Kindly help me.

3 answers

Michael Taylor 51,346 Reputation points

2022-08-11T20:30:54.073+00:00

I'm not aware of any Replace function for ByteArray in any version of .NET. You mention EPPlus, byte arrays, strings and Javascript so it is confusing as to exactly what Replace function you're talking about. Please go back to your working code and right click the Replace function and go to definition on it. Please identify where this function is coming from and what the signature (as far as the compiler is concerned) is.
Please sign in to rate this answer.
franks_00001 1 Reputation point

2022-08-15T12:38:35.467+00:00

Go to Definition won't work "Cannot navigate to the symbol under the caret". The JavaScript from EPPlus doesn't define a type for the parameter, making it any.

Hopefully, I'll get a response from the the EPPlus Community on a another forum.

Thanks anyway

Michael Taylor 51,346 Reputation points

2022-08-15T13:58:17.537+00:00

Javascript? EPPlus that you showed the package reference for is a .NET assembly, not JS. If you revert your code to the original version that you said compiles then it should have no issues going to the definition should work. But you didn't post any code so we have no real context to know. Please post the code along with the actual compiler or runtime error.

franks_00001 1 Reputation point

2022-08-15T15:14:15.497+00:00

Wouldn't let me update my original question, and kept exceeding 1600 char for comments. So I added the error and the code snippets that I could to my original post as comments. Numbering was added automatically so looks weird.
Sign in to comment
Bruce (SqlWork.com) 61,731 Reputation points

2022-08-11T22:47:59.263+00:00

.net core has no impact on javascript functions. they are defined by javascript, or by javascript script files.

javascript has a string.replace()

javascript does not have a byte datatype. it does have ArrayBuffers which supports a typed array (its binary and the typed defines unit buffer size).

var buffer = new Int8Array(32); // 32 byte binary array

typed arrays just like normal arrays do not have a .replace() method

note: blazor js interop uses json, which does not support binary data. typically you would convert to a base64 string to expose via json.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment
Bruce (SqlWork.com) 61,731 Reputation points

2022-08-17T21:04:30.08+00:00

once enough details were added to the question. the answer is simple:

the javascript code example was written for blazor 5.0, and a .net byte array was passed via js interop. in blazor 5.0 byte array were passed a base64 string to the javascript tfunction. In blazor 6, a breaking change was made to pass byte array to javascript as Uint8Array (typed binary array).

as the function is expecting a base64 string, in blazor the byte array should be converted to a base64 string before calling the function.

you could also update the javascript function to accept a Uint8Array, and change the base64 decode logic.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

.Net Core 6 JavaScript Replace missing for Byte Array

3 answers