Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome: Create file input from blob with Javascript?

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.

like image 548
Merion Avatar asked Jul 31 '12 12:07

Merion


People also ask

How do I create a Blob js file?

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.

Can we upload file using JavaScript?

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.

How do I read a Blob file?

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.


1 Answers

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);
like image 80
guest271314 Avatar answered Nov 18 '22 05:11

guest271314