waterunderice: Resumable, asynchronous file uploads using WebSockets and HTML5
As browser support for HTML5 grows, web developers are finding new options for tasks formerly only possible with browser plugins. Flash has long been the go-to method for large file uploads, however the new HTML5 File API promises a more native solution, allowing files to be read and chunked up on the client using JavaScript.
Taking advantage of this new API and Websockets, Derrick Parkhurst has created Water under Ice which offers resumable, asynchronous file uploads in supported browsers.
Beyond the browser requirements, the project requires jQuery, jQuery UI, and a Websocket compatible server backend such as em-websockets or Socket.IO. On the client, simply add the required JavaScript and CSS to your <head>:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css" media="screen" rel="StyleSheet" type="text/css">
<link href="css/web_socket_file_uploader.css" media="screen" rel="StyleSheet" type="text/css">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" src="js/web_socket_client.js" type="text/javascript"></script>
<script language="javascript" src="js/web_socket_file_uploader.js" type="text/javascript"></script>
<script language="javascript" src="js/application.js" type="text/javascript"></script>
… and the file <input> along with other controls:
<div class="file_uploader">
<h2>File Upload</h2>
<div class="file_progress_bar">
<span class="file_information" name="file_information"></span>
<input class="file_browse_button" type="button" value="Browse">
<input class="file_upload_button" type="button" value="Upload">
<input class="file_reupload_button" type="button" value="Reupload">
<input class="file_pause_button" type="button" value="Pause">
<input class="file_resume_button" type="button" value="Resume">
<input class="file_cancel_button" type="button" value="Cancel">
<span class="file_progress" name="file_progress"></span>
<input class="file_name_input" name="file_name_input" type="file">
</div>
</div>
Beyond the limited browser support, Derrick also mentions some other caveats with the Websockets approach:
WebSockets currently only provides for ASCII transfers. Thus, files must be Base64 encoded prior to upload. This increases the total bytes transferred by one third and can load the CPU.
That said, the project is worth a look to see what’s possible and where HTML5 is headed.
Discussion
Sign in or Join to comment or subscribe