EzDevInfo.com

HTML5 File API downloading file from server and saving it in sandbox

I'm trying to understand HTML5 API. I'm designing the web application where the browser client need to download multiple files from server; user will perform something with the downloaded files and the application than need to save the state on user hard-rive. I understand that the browser can save these files only to its sandbox which is fine as long as the user can retrieve those files on the second time he starts the application. Should I use BlobBuilder or FileSaver? I'm a bit lost here.

Getting Image Dimensions using Javascript File API

I require to generate a thumbnail of an image in my Web Application. I make use of the Html 5 File API to generate the thumbnail.

I made use of the examples from the below URL to generate the thumbnails.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

I am successfully able to generate the thumbnails. The problem that I have is I am able to generate thumbnail only by using a static size. Is there a way to get the file dimensions from the selected file and then create the Image object?

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 in content).

Is it possible to prepend the UTF-8 BOM in JavaScript to a generated text?

^{Yes, I really do need the UTF-8 BOM in this case.}

How to convert dataURL to file object in javascript?

I need to convert dataURL to file object in javascript in order to send it over using ajax. Is it possible? if yes, please tell me how. Thanks.

UPDATE:
Thanks for all the answers fellas. However, this is a very old question, and I think it has collected enough answers by now.

window.URL.revokeObjectURL() doesn't release memory immediately (or not at all)?

I'm making an html interface to upload images on a server with Drag & Drop and multiple selection files. I want to display the pictures before sending them to the server. So I first try to use FileReader but I have had some problems like in this post. so I change my way and I decided to use blob:url like ebidel recommands in the post, with window.URL.createObjectURL() and window.URL.revokeObjectURL() to release memory.

But now, I've got another problem, wich is similar to this one. I want that a client could upload 200 images at time if he wants. But the browser crashed and the ram used was very high! So I thought that maybe too much images were displayed at the same time, and I set up a system with a waiting queue of files using an array, in order to treat only 10 files at time. But the problem still occurs.

On Google Chrome, if I check chrome://blob-internals/ the files (which are normally already released by window.URL.revokeObjectURL()) are released approximatively after a 8 seconds delay. On Firefox I'm not sure but it seems like if the files were not released (I check on about:memory -> images for that)

Is my code which is bad, or is it a problem independent of me? Is there a solution to force the navigators to release immediatelly the memory? If it can help, this is the part of JavaScripton wich the problems occurs: (Sorry but I give here a link because of the image spam mechanism for new members) http://www26.zippyshare.com/v/14195278/file.html.

EDIT

This is a kind of own answer + an answer to bennlich (too long text for a comment)

I understood from the answer of user1835582 that I could indeed remove the Blob/File but while the browser needs images it keeps them somewhere in memory (which is logical). So it's the fact to display images (many & heavy) that gave me crashes & slow downs, not the revokeObjectURL method. Moreover, each browser manages the memory by its own way, leading to different behaviors. Here is how I came to this conclusion.

First, let's try that revokeObjectURL works well, with a simple example using the source code of https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images. Using Chrome you can verify that Blob are well revoked, by checking chrome://blob-internals/ or trying to open displayed images into a new tab that will be blank. Note : to fully release Blob references, add document.getElementById("fileElem").value = "". When I posted my question some years ago, it was about 8 seconds to release blob, now it's almost immediate (probably due to improvements in Chrome & / or to a better computer)

Then, time for a charge test. I did it with a hundred of jpg of ~2.5 Mo each. After that images have been displayed, I scrolled the page. Chrome crashed and Firefox was slow (not tested on others browsers). However, when I commented li.appendChild(img) all went well, even with a huge bunch of images. This shows that problems are not coming from revokeObjectURL method which in fact works properly, but from displaying lot of heavy images. You can also test to create a simple html page with hundreds of heavy images and scroll it => same result (crash / slow down).

Finally to look deeper about images memory management, it's interesting on Firefox to look into about:memory. For example I saw that when the window is active, Firefox uncompresses the images (images -> uncompressed-heap goes up), while raw (images -> raw) is always stable (relative to the the quantity of images loaded). There is a good discussion about memory management here : http://jeff.ecchi.ca/blog/2010/09/19/free-my-memory.

restrict file upload selection to specific types

Anyway to restrict the selection of file types via the <input type="file" /> 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 would grey out files of other mime types.

p.s. I know that I can do this after the fact with the File API by scanning the .type attributes. I'm really trying to restrict this before hand.. I also know I can do this via flash, but I do NOT want to have use flash for this.

Fallback for FormData in IE 8/9

FormData does not exist in IE 8/9 but I need that functionality in those browsers. Is there a nice fallback for this?

I would try to send over json data, but I need to pass over a file to the server. I append this file to the formData in modern browsers and just submit an XHR request. Because FormData does not exist in IE 8/9 this obviously fails.

// I cant seem to get this to work with a file.
$.ajax({
    url: '/genericHandlers/UploadDocsFile.ashx',
    type: "POST",
    data: model.toJSON(),
    contentType: 'application/json'
    }).done(function  (data) { 
       log('stuff happened!');
    });

Maybe an alternative is to create a fake form object in js then append the data to that?

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 HTML5 canvas?

Here is the code I have used:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles);
}

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.drawImage(e.target.files[0], 20,20);
    alert('the image is drawn');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
</body>
</html>

HTML5 and Amazon S3 Multi-Part uploads

Is it possible to use the HTML 5 File API (for example, this library: https://github.com/23/resumable.js ) in conjunction with the S3 multi-part upload feature?

http://docs.aws.amazon.com/AmazonS3/latest/dev/uploadobjusingmpu.html

HTML5 File API: How to see the result of readAsText()

When readAsText() function is completed the result is stored in .result

How do I see if the content of the file read are correct in .result?

 fr = new FileReader();
 fr.readAsText(file);
 var x = fr.result;
 console.log(x); //does not display anything on console

Now how do I display the .result object to verify the the content?

What is the purpose of webkitRelativePath property in File object?

If you printout File object in Chrome console with something simple like this:

<input type="file" onchange="console.info(this.files);" />

you will see among other properties an always empty webkitRelativePath property:

fileName: "07.png"
fileSize: 33022
lastModifiedDate: Date
name: "07.png"
size: 33022
type: "image/png"
webkitRelativePath: ""
__proto__: File

What is it's purpose? And how it can be leveraged?

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:

<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

I've then setup my input file to set the canvas correctly which works fine:

$('#fileInput').on('change', function() {
    $.each(this.files, function() {
        var image = new Image();
            image.src = window.URL.createObjectURL(this);

        image.onload = function() {
            $("canvas").drawImage({
                source: image,
                x: 50, y: 50,
                width: 100,
                fromCenter: false
            });
        };
    });
});

I now need to get the binary data (Base64 encoded) from the Canvas when the button is clicked so it'll push the data to the server...

The end result is that I need to provide the user with the ability to select a file, crop/resize it, and then click a button at which point the edited image will be uploaded to the server (I can't do server-side cropping/resizing due to server-side limitations...)

Any help would be great! Cheers

Limiting video record length for input type file on mobile devices

I'm using the file recording capability for a mobile web app I'm building:

<input id="file-camcorder" type="file" name="camcorder" accept="video/*" capture="camcorder"></input>

I'm wondering if there is a way to somehow limit the length of the video that gets recorded, or to somehow notify the user that their recording is taking too long. The problem is that when you choose to record on a mobile device, you are taken away from the web app, so I don't know of any way to interact with the user while they're in the phone's native recording app.

If anyone's got any ideas, that'd be great. Thanks!

Is there a Javascript support library for html5 file API and upload?

until now I was using flash based swfupload and its swfupload.js which provides users with callbacks from flash and a possibility to set it up.

I was wondering if there is anything like this for HTML5 File API. I'm asking before I make it from scratch myself. I don't want to reinvent a wheel when there might be a good library out there already.

FileAPI doesn't update the files size when user makes file changes (non-webkit browsers)

I figure I'd demonstrate the problem with an example first,

jsfiddle: http://jsfiddle.net/e2UfM/15/ (Tested with FF 12, and Chrome 18.0.1025.168)

Usage:

• Load in a text file from your local machine.
• Hit "load file".
• Hit "display file size" - note the size.
• modify & save the text file on your local machine.
• Hit "display file size" again. Note how in webkit browsers (Chrome) the file size changes, but in Firefox it didn't update the file size

Non-webkit browsers do not update their size attribute when users make changes to the local file that they have selected whereas Chrome for example does. Both browsers update the contents of the file.

Is there a way to get Firefox to update the file size similar to how Chrome does in this situation?

Simple Real World Example:

User selects a file that's too large for the form, they hit the submit button and get notified that their file is too large (via an alert, "size" bar (see below), etc)

They modify the file locally, and hit submit again.

In Chrome, the file size updates. When the user hits the submit button again, it will validate it's updated size once more and allow the upload. In Firefox, the user must re-select the file on the form before it will see the file size change.

A partial workaround for Firefox - @ZER0's answer

Real world example (in-depth):

One purpose of the File API is to verify file sizes on the client side before uploading to a server if I'm not mistaken.

Consider the scenario where there is a 2MB upload limit in a form and the user chooses a 1MB file. Both Firefox and Chrome will see that the file size is less than 2MB and add it to the form. Let's also say there is a neat bar that shows how big of a file they have chosen, and if it meats the file size limit or not:

But then the user decides to make a minor change to the contents of that file locally before they submit the form and bump the size over 2MB.

In Google Chrome, I can handle this gracefully on the client side. I can check the file size again when the user submits the form, and verify that it is still in fact under 1MB before sending it to the server. But even before the user submits the form, in Chrome, I can go as far as updating the little bar image dynamically as they make changes locally as such:

This "bar" (or any other form on instant notification such as an alert) is useful if the user is filling out a large form. I'd like the user to know instantly when their file is too large and so that they can correct it then, and not just when they submit the form.

In Firefox, because the file size never updates, it will gladly upload the 2MB file thinking that it is still 1MB! I use server side logic to double check the file size, but I'd rather save a server trip.

How I came across the bug:

The above examples are in place to relate to more people as more people have probably dealt with file uploads in forms vs. using the slice function in the File API. This is specifically how I am running into the issue.

In my form, the user selects a file and when they hit submit only the last 10,000 bytes are displayed on the screen in a textarea to confirm that it's really the file that they want.

Consider a file with a size of 50,000 bytes. A user chooses it in the form, and both Chrome and Firefox show bytes 40,000 - 50,000 in the textarea.

Now the user adds some content to the file, and bumps the same file to 70,000 bytes!

Google Chrome will properly update the textarea to contain bytes 60,000-70,000. In Firefox, because the size will remain constant, it will still only show bytes in the range 40,000-50,000.

Edit: Updated the jsfiddle to demonstrate that FF can still read the updated file contents. It's just that the file size does not change with those new contents.

Edit: https://bugzilla.mozilla.org/show_bug.cgi?id=756503 (bug report)

Edit: Examples have been added & updated in response to @Eduárd Moldován's comment & @ZER0's answer. Thanks!