HTML5 - upload file without processing it on client side

Question

I am building application for uploading large files to server via html5 && xhr .

So, when it comes for uploading images I know how to do this.

But if you want to upload large files (>100 MB) it is very bad in terms of user experience.

The form:

<input type="file" id="input">
<script>
    input.addEventListener('change', function () {
        console.log('changed');
    });
</script>

The expectation:

1) Select file of 400 MB.
2) 'onchange' event fired.
3) Upload file via XHR and show progress.

The problem: (tested on my MacBook Air, Chrome 59)

1) Select file of 360 MB weight.
2) Get stuck somewhere for 1 min.
3) Event 'onchange' fired.

According to my observations, browser process 1 MB of data approximately for 166 ms. Though, I just want to upload raw, binary data to server.

Is there a way to just select and upload some file in browser immediately? (without waiting while browser finish processing the whole file content)

Answer 1

The problem appears only when work with specific files.

In my case, I was trying to upload Google Chrome.app and few more large enough apps on MacOS.

But the thing is .app is not a file but rather a folder with references to its contents.

Thus, each time I select such kind of file my browser (or system, not sure) automatically creates a zip version of all contents of the app. This is where time consumed.

There is no issues with regular solid files like movies of size 8 GB - getting such files through File API is a question of milliseconds.