Develop Reference

Blazor Server-Side JS Invoking

Hi I'm trying to move the bytes of my video which is in c# to javascript to make the bytes into URL.createObjectURL on Blazor server-side
I moved the bytes using Js Invoke
.cs
if (!string.IsNullOrEmpty(item.PathFile))
{
//Byte Video
byte[] result = GetFile(item.PathFile);
if (result != null)
{
var url = await Js.InvokeAsync<string>("videoUrl", result);
data.ImageString = url;
}
}
.js
function videoUrl(value) {
var byteCharacters = atob(value);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
//Byte Array -> Blob
var file = new Blob([byteArray], { type: 'data:video/mp4;base64' });
//Blob -> Object URL
var fileURL = URL.createObjectURL(file);
return fileURL;
}
My problem is, I tried this script for a video with a size of 3 Mb it runs fine, but when I try for a 133Mb video I get an error:
Error: System.ArgumentException: The JSON value of length 139569235 is too large and not supported.
I've tried to fix it, but it still fails, it makes me a little frustrated
So is there a solution for my error ? or what should I do?
I thank you for any suggestions or feedback

So, reading on the AspNetDocs github, there is a startup option that can change the max message size, but I think it only applies to calls from JS to .Net (https://github.com/dotnet/AspNetCore.Docs/issues/21208). Worth a check though.
services.AddServerSideBlazor()
.AddHubOptions(options => options.MaximumReceiveMessageSize = 32000);
Personally though, I would do as Mister Magoo said in the comment and either use an API or chunk the data and reassemble at the other end.

create and automatically force download file using js

I have used HTML file reader API to read the file,
and i got the below result
data:application/pdf;base64,JVBERi0xLjYNJeLjz9MNCjE2OSAwIG9iaiA8PC9MaW5lYXJpemVkIDEvTCAyMDgwNTMxL08gMTczL0UgMjg1ODM3L04gMjQvVCAyMDc3MDkyL0ggWyAxMTM2IDc1OV0+Pg1lbmRvYmoNICAgICAgICAgIA14cmVmDTE2OSA0Mg0wMDAwMDAwMDE2IDAwMDAwIG4NCjAwMDAwMDE4OTUgMDAwMDAgbg0KMDAwMDAwMjAzMSAwMDAwMCBuDQowMDAwMDAyMTY0IDAwMDAwIG4NCjAwMDAwMDIzMTkgMDAwMDAgbg0KMDAwMDAwMjgzOCAwMDAwMCBuDQowMDAwMDAyODY0IDAwMDAwIG4NCjAwMDAwMDM3OTAgMDAwMDAgbg0KMDAwMDAwNDMyNCAwMDAwMCBuDQowMDAwMDA0NDE1IDAwMDAwIG4NCjAwMDAwMDU2MDcgMDAwMDAgbg0KMDAwMDAwNTY1MiAwMDAwMCBuDQowMDAwMDA1Njc3IDAwMDAwIG4NCjAwMDAwMDU3OTUgMDAwMDAgbg0KMDAwMDAwNTg0NSAwMDAwMCBuDQowMDAwMDA1ODcwIDAwMDAwIG4NCjAwMDAwMDU5ODYgMDAwMDAgbg0KMDAwMDAwNzQxOSAwMDAwMCBuDQowMDAwMDA3Nzk4IDAwMDAwIG4NCjAwMDAwMDgxMDQgMDAwMDAgbg0KMDAwMDAwODQxMyAwMDAwMCBuDQowMDAwMDA4OTQ0IDAwMDAwIG4NCjAwMDAwMDk2NTAgMDAwMDAgbg0KMDAwMDAxMDA1NiAwMDAwMCBuDQowMDAwMDEwMjIxIDAwMDAwIG4NCjAwMDAwMTA1NDIgMDAwMDAgbg0KMDAwMDAxMDc1MCAwMDAwMCBuDQowMDAwMDExMDM1IDAwMDAwIG4NCjAwMDAwMTEwOTYgMDAwMDAgbg0KMDAwMDAxMTQxMiAwMDAwMCBuDQo...AwMDAwIG4NCjAwMDIwNTkxMzggMDAwMDAgbg0KMDAwMjA2MjUxMyAwMDAwMCBuDQowMDAyMDYyOTE4IDAwMDAwIG4NCjAwMDIwNjI5NjYgMDAwMDAgbg0KMDAwMjA2MzMyNSAwMDAwMCBuDQowMDAyMDYzNDEyIDAwMDAwIG4NCjAwMDIwNjM2NDggMDAwMDAgbg0KMDAwMjA2NDU0NiAwMDAwMCBuDQowMDAyMDY1NTU0IDAwMDAwIG4NCjAwMDIwNjU1NzMgMDAwMDAgbg0KMDAwMjA2NTY1MCAwMDAwMCBuDQowMDAyMDY1Njg3IDAwMDAwIG4NCjAwMDIwNjU3MTggMDAwMDAgbg0KMDAwMjA2NTc4OSAwMDAwMCBuDQowMDAyMDY1OTIxIDAwMDAwIG4NCjAwMDIwNjYwNTMgMDAwMDAgbg0KMDAwMjA2NjE0NSAwMDAwMCBuDQowMDAyMDY2MjAyIDAwMDAwIG4NCjAwMDIwNjk5MDEgMDAwMDAgbg0KMDAwMjA2OTk1MSAwMDAwMCBuDQowMDAyMDcwMDE3IDAwMDAwIG4NCjAwMDIwNzAwNDkgMDAwMDAgbg0KMDAwMjA3MDA5OCAwMDAwMCBuDQowMDAyMDcwMTQyIDAwMDAwIG4NCjAwMDIwNzAxODggMDAwMDAgbg0KMDAwMjA3MDIxMCAwMDAwMCBuDQowMDAyMDcwMjc5IDAwMDAwIG4NCjAwMDIwNzAzMTcgMDAwMDAgbg0KMDAwMjA3MDM3NSAwMDAwMCBuDQowMDAyMDcwNDk5IDAwMDAwIG4NCjAwMDIwNzA1MzEgMDAwMDAgbg0KMDAwMjA3MDU1MiAwMDAwMCBuDQowMDAyMDcwNTc4IDAwMDAwIG4NCjAwMDIwNzY4NDMgMDAwMDAgbg0KdHJhaWxlcg08PC9TaXplIDE2OS9FbmNyeXB0IDE3MCAwIFI+Pg1zdGFydHhyZWYNMTE2DSUlRU9GDQ==
How to write a file and force download the same file using the above string?

Warning: I don't have IE available to test with, but this was based off code that DOES work under IE.
My DataURL is an image so I had to change out the header. You might not have to with your header -- but I left the code in place so you could see how it was done.
Thanks to IE, you need two different processes.
On IE, you convert your DataURI to a blob then download the blob.
On everything else, you would just download the URI itself.
document.getElementById("d_button").addEventListener("click", download);
var filename="testfile";
// FROM http://stackoverflow.com/questions/12168909/blob-from-dataurl
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], {
type: mimeString
});
return blob;
// Old code
// var bb = new BlobBuilder();
// bb.append(ab);
// return bb.getBlob(mimeString);
}
const dataURI = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
function download() {
if (window.navigator.msSaveBlob) { // for IE
const blob = dataURItoBlob(dataURI);
window.navigator.msSaveBlob(blob, `${filename}.png`);
return;
}
let dt = dataURI;
/* Change MIME type to trick the browser to downlaod the file instead of displaying it */
dt = dt.replace(/^data:image\/[^;]*/, "data:application/octet-stream");
/* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
dt = dt.replace(/^data:application\/octet-stream/, `data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=${filename}.png`);
this.href = dt;
}
Download this

I got answer using <a> tag force the download the file.
var element = document.createElement('a');
element.setAttribute('href',text );
element.setAttribute('download', filename);
element.setAttribute('target', '_blank');
element.style.display = 'none';
document.body.appendChild(element);
$("#page_header").removeClass('loader');
element.click();

I got another answer using force the download the file.
using this link install file saver (https://www.npmjs.com/package/file-saver)
result : 'data:application/pdf;base64,JVBERi0xLjYNJeLjz9MNCjE2OSAwIG9iaiA8PC9MaW5lYXJpemVkIDEvTCAyMDgwNTMxL08gMTczL0UgMjg1ODM3L04gMjQvVCAyMDc3MDkyL0ggWyAxMTM2IDc1OV0+Pg1lbmRvYmoNICAgICAgICAgIA14cmVmDTE2OSA0Mg0wMDAwMDAwMDE2IDAwMDAwIG4NCjAwMDAwMDE4OTUgMDAwMDAgbg0KMDAwMDAwMjAzMSAwMDAwMCBuDQowMDAwMDAyMTY0IDAwMDAwIG4NCjAwMDAwMDIzMTkgMDAwMDAgbg0KMDAwMDAwMjgzOCAwMDAwMCBuDQowMDAwMDAyODY0IDAwMDAwIG4NCjAwMDAwMDM3OTAgMDAwMDAgbg0KMDAwMDAwNDMyNCAwMDAwMCBuDQowMDAwMDA0NDE1IDAwMDAwIG4NCjAwMDAwMDU2MDcgMDAwMDAgbg0KMDAwMDAwNTY1MiAwMDAwMCBuDQowMDAwMDA1Njc3IDAwMDAwIG4NCjAwMDAwMDU3OTUgMDAwMDAgbg0KMDAwMDAwNTg0NSAwMDAwMCBuDQowMDAwMDA1ODcwIDAwMDAwIG4NCjAwMDAwMDU5ODYgMDAwMDAgbg0KMDAwMDAwNzQxOSAwMDAwMCBuDQowMDAwMDA3Nzk4IDAwMDAwIG4NCjAwMDAwMDgxMDQgMDAwMDAgbg0KMDAwMDAwODQxMyAwMDAwMCBuDQowMDAwMDA4OTQ0IDAwMDAwIG4NCjAwMDAwMDk2NTAgMDAwMDAgbg0KMDAwMDAxMDA1NiAwMDAwMCBuDQowMDAwMDEwMjIxIDAwMDAwIG4NCjAwMDAwMTA1NDIgMDAwMDAgbg0KMDAwMDAxMDc1MCAwMDAwMCBuDQowMDAwMDExMDM1IDAwMDAwIG4NCjAwMDAwMTEwOTYgMDAwMDAgbg0KMDAwMDAxMTQxMiAwMDAwMCBuDQo...AwMDAwIG4NCjAwMDIwNTkxMzggMDAwMDAgbg0KMDAwMjA2MjUxMyAwMDAwMCBuDQowMDAyMDYyOTE4IDAwMDAwIG4NCjAwMDIwNjI5NjYgMDAwMDAgbg0KMDAwMjA2MzMyNSAwMDAwMCBuDQowMDAyMDYzNDEyIDAwMDAwIG4NCjAwMDIwNjM2NDggMDAwMDAgbg0KMDAwMjA2NDU0NiAwMDAwMCBuDQowMDAyMDY1NTU0IDAwMDAwIG4NCjAwMDIwNjU1NzMgMDAwMDAgbg0KMDAwMjA2NTY1MCAwMDAwMCBuDQowMDAyMDY1Njg3IDAwMDAwIG4NCjAwMDIwNjU3MTggMDAwMDAgbg0KMDAwMjA2NTc4OSAwMDAwMCBuDQowMDAyMDY1OTIxIDAwMDAwIG4NCjAwMDIwNjYwNTMgMDAwMDAgbg0KMDAwMjA2NjE0NSAwMDAwMCBuDQowMDAyMDY2MjAyIDAwMDAwIG4NCjAwMDIwNjk5MDEgMDAwMDAgbg0KMDAwMjA2OTk1MSAwMDAwMCBuDQowMDAyMDcwMDE3IDAwMDAwIG4NCjAwMDIwNzAwNDkgMDAwMDAgbg0KMDAwMjA3MDA5OCAwMDAwMCBuDQowMDAyMDcwMTQyIDAwMDAwIG4NCjAwMDIwNzAxODggMDAwMDAgbg0KMDAwMjA3MDIxMCAwMDAwMCBuDQowMDAyMDcwMjc5IDAwMDAwIG4NCjAwMDIwNzAzMTcgMDAwMDAgbg0KMDAwMjA3MDM3NSAwMDAwMCBuDQowMDAyMDcwNDk5IDAwMDAwIG4NCjAwMDIwNzA1MzEgMDAwMDAgbg0KMDAwMjA3MDU1MiAwMDAwMCBuDQowMDAyMDcwNTc4IDAwMDAwIG4NCjAwMDIwNzY4NDMgMDAwMDAgbg0KdHJhaWxlcg08PC9TaXplIDE2OS9FbmNyeXB0IDE3MCAwIFI+Pg1zdGFydHhyZWYNMTE2DSUlRU9GDQ=='
file_name : 'sample.jpg'
fileType : 'image/jpeg'
**Function Call**
this.urltoFile(result, file_name, fileType)
.then(function(file){
var blob = new Blob ([file], {type: fileType});
FileSaver.saveAs(blob, file_name);
this.loading = false;
});
**function definition**
urltoFile(url, filename, mimeType){
return (fetch(url)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], filename, {type:mimeType});})
)},

Generate a blob with grunt which will be available to JS in var

I need to embed a Flash .swf on the page and am unable use the normal way of setting the src or data attribute to the swf url - don't ask :s. So, I'm doing an ajax request for the swf, converting to a blob and then generating a blob url which I set as the swf src. Then I realised that as I'm building with Grunt, there may be a way to just write the swf file into the code as a blob in a var, and avoid the ajax request completely. Here's the code with the ajax request:
function createFlashMovie(blobUrl){
var obj = document.createElement("object");
obj.setAttribute("width", "800");
obj.setAttribute("height", "600");
obj.setAttribute("type", "application/x-shockwave-flash");
obj.setAttribute("data", blobUrl);
document.body.appendChild(obj);
}
function onAjaxLoad(oResponse){
blobUrl = window.URL.createObjectURL(oResponse);
createFlashMovie(blobUrl);
};
//do the xhr request for a.swf
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
onAjaxLoad(this.response);
}
}
xhr.open('GET', '//theserver.com/a.swf');
xhr.responseType = 'blob';
xhr.send();
...but I'm sure it must be possible to have something like this which is replaced by grunt to have the blob already available when it runs, and go straight to creating the blob url without the xhr request:
var theBlob = new Blob(["GRUNT_WRITES_THIS_IN_FROM_FILE"], {type: "application/x-shockwave-flash"});

Well, grunt is at its core just a Node program, so you can use any node command in your Gruntfile or tasks definitions. And it seems that Node's http.request would be perfect for your needs.
So:
add a custom task in your Gruntfile (http://gruntjs.com/creating-tasks#custom-tasks)
that uses http.request to download your swf (https://docs.nodejitsu.com/articles/HTTP/clients/how-to-create-a-HTTP-request)
update your code to use the local swf

I found a solution. Convert your swf file to be a base64-encoded string. At the moment I'm doing this separately and then pasting it into the source JS, but it can be automated at build time with grunt. Then in the page script create a var to store it as a dataURI:
var swfAsDataUri = "data:application/x-shockwave-flash;base64,BIG_LONG_CHUNK_OF_DATA_THAT_IS_YOUR_ENCODED_SWF_FILE__GRUNT_CAN_WRITE_THIS_IN_AT_BUILD_TIME";
Create a blob from the data url, and then create an object url from the blob:
//function taken from http://stackoverflow.com/questions/27159179/how-to-convert-blob-to-file-in-javascript
dataURLToBlob = function(dataURL) {
var BASE64_MARKER = ';base64,';
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
};
var blobUrl = window.URL.createObjectURL( dataURLToBlob(swfAsDataUri) );
You can then use the object url as the src data for the flash movie's object tag when it's embedded:
function createFlashMovie(blobUrl){
var obj = document.createElement("object");
obj.setAttribute("width", "800");
obj.setAttribute("height", "600");
obj.setAttribute("type", "application/x-shockwave-flash");
obj.setAttribute("data", blobUrl); //use the object url here
document.body.appendChild(obj);
}
...and there you have it, no additional http request for the swf file.

How to create File object from Blob?

DataTransferItemList.add allows you to override copy operation in javascript. It, however, only accepts File object.
Copy event
The code in my copy event:
var items = (event.clipboardData || event.originalEvent.clipboardData);
var files = items.items || items.files;
if(files) {
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
files.add(blob);
}
The error in chrome:
Uncaught TypeError: Failed to execute add on DataTransferItemList: parameter 1 is not of type File.
Trying the new File(Blob blob, DOMString name)
In Google Chrome I tried this, according to the current specification:
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
var file = new File(blob, "image.png");
Problem here is, that Google Chrome doesn't stick to specifications very much.
Uncaught TypeError: Failed to construct File: Illegal constructor
Neither does Firefox in this case:
The method parameter is missing or invalid.
Trying the new File([Mixed blobParts], DOMString name, BlobPropertyBag options)
Solution suggested by #apsillers doesn't work too. This is non stadard method used (but useless) in both Firefox and Chrome.
Binary data
I tried to avoid blob, but the file constructor failed anyway:
//Canvas to binary
var data = atob( //atob (array to binary) converts base64 string to binary string
_this.editor.selection.getSelectedImage() //Canvas
.toDataURL("image/png") //Base64 URI
.split(',')[1] //Base64 code
);
var file = new File([data], "image.png", {type:"image/png"}); //ERROR
You can try that in console:
Chrome <38:
Chrome >=38:
Firefox:
Blob
Passing Blob is probably correct and works in Firefox:
var file = new File([new Blob()], "image.png", {type:"image/png"});
Firefox:
Chrome <38:
Chrome >=38:
Q: So how can I make File from Blob?
Note: I added more screenshots after #apsillers reminded me to update Google Chrome.

The File constructor (as well as the Blob constructor) takes an array of parts. A part doesn't have to be a DOMString. It can also be a Blob, File, or a typed array. You can easily build a File out of a Blob like this:
new File([blob], "filename")

This was the complete syntax which I had to use to convert a blob into a file, which I later had to save to a folder using my server.
var file = new File([blob], "my_image.png",{type:"image/png", lastModified:new Date().getTime()})

this works with me, from canvas to File [or Blob], with filename!
var dataUrl = canvas.toDataURL('image/jpeg');
var bytes = dataUrl.split(',')[0].indexOf('base64') >= 0 ?
atob(dataUrl.split(',')[1]) :
(<any>window).unescape(dataUrl.split(',')[1]);
var mime = dataUrl.split(',')[0].split(':')[1].split(';')[0];
var max = bytes.length;
var ia = new Uint8Array(max);
for (var i = 0; i < max; i++) {
ia[i] = bytes.charCodeAt(i);
}
var newImageFileFromCanvas = new File([ia], 'fileName.jpg', { type: mime });
Or if you want a blob
var blob = new Blob([ia], { type: mime });

How to do file upload in e2e AngularJS tests?

In one of my views, I have a file upload control. It supports file uploading either via drag and drop, or via the standard file dialog opened after a button click.
How to do this in my e2e tests1?
1 Just one of the two options will be enough

You can upload files using Javascript blobs. This requires the FileApi, which isn't compatible with older browsers (http://caniuse.com/fileapi). But since you mentioned using drag and drop uploads, which uses the FileApi, it shouldn't matter too much.
There are two ways you can upload files using the blob API. One is very easy and the other is simply a continuation of the first.
Using Javascript, you can create a new blob with:
var blob = new Blob("content", contentType);
For example, this will create a blob object that contains the text "Hello World!".
var foo = new Blob("Hello World!", {type: "text/plain"});
You could also use the following method is better for non-plaintext files, such as pdf's. You have to convert the file to Base64 (you can use something like this) and create the blob using the Base64 data.
Use this function (a slightly modified version of this) to create the blob.
function b64toBlob(b64Data, contentType, sliceSize) {
b64Data = b64Data.replace(/\s/g, '');
contentType = contentType || '';
sliceSize = sliceSize || 1024;
function charCodeFromCharacter(c) {
return c.charCodeAt(0);
}
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = Array.prototype.map.call(slice, charCodeFromCharacter);
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
For example, this will create a PDF blob object.
var pdf = "JVBERi0xLjQKJcfsj6IKNSAwIG9...=="; //base64 encoded file as a String
var pdfBlob = b64toBlob(pdf, "application/pdf", 1024);
After you create the blob with one of the methods above, it can be treated as a file. For example, you could put the file into a FormData object (if you're doing uploads like this):
var fd = new FormData();
fd.append("uploadedFile", pdfBlob, "My PDF.pdf"*);
*Filename parameter only seems to work on Chrome as of now.