Well, the files attribute of an input[type=file]
is read-only. Therefore I can not write my blob data into this input element.
But if I create a new input file element using Javscript
, then possible to insert blob data on creation? I am only interested in solutions working in chrome (extension)
- other browsers do not matter.
To create File object from Blob with JavaScript, we can use the File constructor`. const file = new File([blob], "filename"); to create a File object from a blob by putting it in an array.
html file through a browser, the client will be able to upload a file to the server using Ajax and pure JavaScript. A pure JavaScript file uploader simplifies Ajax based interactions with the server.
To read the blob data, you could create Data URLs for the image blob object instead. Data URLs prefixed with the data: scheme and data encoded into base64 format. Then in UWP the base64 data could be converted to image source.
new File()
constructor is available at chromium / chrome 38+. See File Constructor Sample , File API.
var date = new Date(),
filename = "file-" + date.getTime() + ".html";
var generatedFile = new File(
["<!DOCTYPE html><html><body>" + filename + "</body></html>"]
, filename
, {
type: "text/html",
lastModified: date
}
);
var objUrl = URL.createObjectURL(generatedFile);
console.log(generatedFile, objUrl);
var reader = new FileReader();
reader.addEventListener("load", function(event) {
console.log(event.target.result)
});
reader.readAsText(generatedFile);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With