Stack Overflow
Stack Overflow

Questions tagged [fileapi]

Use this tag for questions related to the W3C File API. The W3C File API specifies how file objects should be represented and how their properties should be accessed.

The W3C File API at https://w3c.github.io/FileAPI/ specifies how file objects should be represented and how their properties should be accessed.

The File API spec includes the following interfaces:

  • Blob - raw binary data. Blob objects can be created via the Blob() constructor, but their properties are read-only.
  • File - a specific type of Blob with additional read-only properties.
  • FileList - a collection of File objects.
  • FileReader - provides asynchronous access to a content of a Blob or File object.

Related Tags

Resources

532 questions
264
votes
32 answers

How do I download a file with Angular2 or greater

I have a WebApi / MVC app for which I am developing an angular2 client (to replace MVC). I am having some troubles understanding how Angular saves a file. The request is ok (works fine with MVC, and we can log the data received) but I can't figure…
rll
  • 5,509
  • 3
  • 31
  • 46
245
votes
9 answers

How to get a file or blob from an object URL?

I am allowing the user to load images into a page via drag&drop and other methods. When an image is dropped, I'm using URL.createObjectURL to convert to an object URL to display the image. I am not revoking the url, as I do reuse it. So, when it…
BrianFreud
  • 7,094
  • 6
  • 33
  • 50
135
votes
10 answers

Blob from DataURL?

Using FileReader's readAsDataURL() I can transform arbitrary data into a Data URL. Is there way to convert a Data URL back into a Blob instance using builtin browser apis?
Shane Holloway
  • 7,550
  • 4
  • 29
  • 37
103
votes
3 answers

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

Is there any way of reading the contents of a HTML Canvas as binary data? At the moment I've got the following HTML to show an input file and the canvas below it:

Input:

Jamz_2010
  • 1,031
  • 2
  • 8
  • 3
96
votes
3 answers

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 =…
Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
91
votes
6 answers

Adding UTF-8 BOM to string/Blob

I need to add a UTF-8 byte-order-mark to generated text data on client side. How do I do that? Using new Blob(['\xEF\xBB\xBF' + content]) yields '"my data"', of course. Neither did '\uBBEF\x22BF' work (with '\x22' == '"' being the next character…
Kijewski
  • 25,517
  • 12
  • 101
  • 143
86
votes
6 answers

How to convert dataURL to file object in javascript?

I need to convert a dataURL to a File object in Javascript in order to send it over using AJAX. Is it possible? If yes, please tell me how.
kapv89
  • 1,692
  • 1
  • 17
  • 20
84
votes
4 answers

Getting image dimensions using the JavaScript File API

I require to generate a thumbnail of an image in my web application. I make use of the HTML5 File API to generate the thumbnail. I made use of the examples from Read files in JavaScript to generate the thumbnails. I am successfully able to generate…
Abishek
  • 11,191
  • 19
  • 72
  • 111
67
votes
1 answer

How to set File objects and length property at FileList object where the files are also reflected at FormData object?

It is possible to set .files property of element to a FileList from for example a different element .files property or DataTransfer.files property. See Make .files settable #2866, What happens between…
guest271314
  • 1
  • 15
  • 104
  • 177
60
votes
3 answers

How can I draw an image from the HTML5 File API on Canvas?

I would like to draw an image opened with the HTML5 File API on a canvas. In the handleFiles(e) method, I can access the File with e.target.files[0] but I can't draw that image directly using drawImage. How do I draw an image from the File API on…
Jonas
  • 121,568
  • 97
  • 310
  • 388
55
votes
4 answers

Remember and Repopulate File Input

Note: The answer(s) below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element via JavaScript in 2017. See the answer in this question for details as well as a demo:How to set file input value…
user1150103
  • 667
  • 1
  • 6
  • 9
54
votes
2 answers

restrict file upload selection to specific types

Anyway to restrict the selection of file types via the element? For instance, if I wanted only images types to be uploaded, I would restrict the possible selections to (image/jpg,image/gif,image/png), and the selection dialog…
ndmweb
  • 3,370
  • 6
  • 33
  • 37
51
votes
6 answers

Check if variable holds File or Blob

Javascript has both File and Blob for file representation, and both are almost the same thing. Is there a way to check if a variable is holding a File or a Blob type of data?
alexandernst
  • 14,352
  • 22
  • 97
  • 197
51
votes
3 answers

Convert base64 png data to javascript file objects

I have two base64 encoded in PNG, and I need to compare them using Resemble.JS I think that the best way to do it is to convert the PNG's into file objects using fileReader. How can I do it?
Bonik
  • 792
  • 1
  • 7
  • 15
43
votes
7 answers

Getting byte array through input type = file

var profileImage = fileInputInByteArray; $.ajax({ url: 'abc.com/', type: 'POST', dataType: 'json', data: { // Other data ProfileImage: profileimage // Other data }, success: { } }) // Code in…
stacknist
  • 517
  • 1
  • 6
  • 12
1
2 3
…
35 36