From: Tara L Andrews Date: Tue, 18 Sep 2012 13:20:22 +0000 (+0200) Subject: implement HTML5 file upload; fix is-public display bug X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=e0b902362ea75e07419933809f6cf99a2f2d082c;p=scpubgit%2Fstemmaweb.git implement HTML5 file upload; fix is-public display bug --- diff --git a/lib/stemmaweb/Controller/Root.pm b/lib/stemmaweb/Controller/Root.pm index 4ddcfe6..abc1952 100644 --- a/lib/stemmaweb/Controller/Root.pm +++ b/lib/stemmaweb/Controller/Root.pm @@ -1,4 +1,5 @@ package stemmaweb::Controller::Root; +use File::Temp; use Moose; use namespace::autoclean; use Text::Tradition::Analysis qw/ run_analysis /; @@ -89,7 +90,8 @@ sub directory :Local :Args(0) { { name: , language: , public: , - file: } + filename: , + file: } Creates a new tradition belonging to the logged-in user, with the given name and the collation given in the uploaded file. The file type is indicated via @@ -98,6 +100,7 @@ name of the new tradition. =cut +## TODO Figure out how to mimic old-style HTML file uploads in AJAX / HTML5 sub newtradition :Local :Args(0) { my( $self, $c ) = @_; return _json_error( $c, 403, 'Cannot save a tradition without being logged in' ) @@ -106,16 +109,18 @@ sub newtradition :Local :Args(0) { my $user = $c->user->get_object; # Grab the file upload, check its name/extension, and call the # appropriate parser(s). - my $upload = $c->request->upload('file'); + my $upload = File::Temp->new(); + print $upload $c->request->param('file'); + close $upload; my $name = $c->request->param('name') || 'Uploaded tradition'; my $lang = $c->request->param( 'language' ) || 'Default'; my $public = $c->request->param( 'public' ) ? 1 : undef; - my( $ext ) = $upload->filename =~ /\.(\w+)$/; + my( $ext ) = $c->request->param( 'filename' ) =~ /\.(\w+)$/; my %newopts = ( 'name' => $name, 'language' => $lang, 'public' => $public, - 'file' => $upload->tempname + 'file' => $upload->filename ); my $tradition; @@ -270,7 +275,7 @@ sub textinfo :Local :Args(1) { textid => $textid, name => $tradition->name, language => $tradition->language, - public => $tradition->public, + public => $tradition->public || 0, owner => $tradition->user ? $tradition->user->id : undef, witnesses => [ map { $_->sigil } $tradition->witnesses ], }; diff --git a/root/js/componentload.js b/root/js/componentload.js index f33653b..983ac33 100644 --- a/root/js/componentload.js +++ b/root/js/componentload.js @@ -184,12 +184,56 @@ function display_error( jqXHR, el ) { $(el).empty().append( msghtml ).show(); } -function start_upload_dialog() { - if( typeof uploader != 'undefined' ){ uploader.destroy() }; - $('#upload_status').empty(); - $('#upload_button').button('disable'); - $('#upload-collation-dialog').dialog('open'); - $('#upload-collation-dialog').dialog('option', 'attach_uploader')(); +// Event to enable the upload button when a file has been selected +function file_selected( e ) { + if( e.files.length == 1 ) { + $('#upload_button').button('enable'); + } else { + $('#upload_button').button('disable'); + } +} + +function upload_new () { + // Serialize the upload form, get the file and attach it to the request, + // POST the lot and handle the response. + var newfile = $('#new_file').get(0).files[0]; + var reader = new FileReader(); + reader.onload = function( evt ) { + var formvals = $('#new_tradition').serializeArray(); + var params = { 'file': evt.target.result, 'filename': newfile.name }; + $.each( formvals, function( i, o ) { + params[o.name] = o.value; + }); + var upload_url = _get_url([ 'newtradition' ]); + $.post( upload_url, params, function( ret ) { + if( ret.id ) { + $('#upload-collation-dialog').dialog('close'); + refreshDirectory(); + loadTradition( ret.id, ret.name, 1 ); + } else if( ret.error ) { + $('#upload_status').empty().append( + $('').attr('class', 'error').append( ret.error ) ); + } + }); + }; + reader.onerror = function( evt ) { + var err_resp = 'File read error'; + if( e.name == 'NotFoundError' ) { + err_resp = 'File not found'; + } else if ( e.name == 'NotReadableError' ) { + err_resp == 'File unreadable - is it yours?'; + } else if ( e.name == 'EncodingError' ) { + err_resp == 'File cannot be encoded - is it too long?'; + } else if ( e.name == 'SecurityError' ) { + err_resp == 'File read security error'; + } + // Fake a jqXHR object that we can pass to our generic error handler. + var jqxhr = { responseText: '{error:"' + err_resp + '"}' }; + display_error( jqxhr, $('#upload_status') ); + $('#upload_button').button('disable'); + } + + reader.readAsBinaryString( newfile ); } // Utility function to neatly construct an application URL @@ -321,33 +365,37 @@ $(document).ready( function() { $('#upload-collation-dialog').dialog({ autoOpen: false, - height: 325, + height: 360, width: 480, modal: true, buttons: { - pick: { - text: "Pick File", - id: "pick_uploadfile_button", - click: function() {} - }, upload: { text: 'Upload', id: 'upload_button', click: function() { $('#upload_status').empty(); - uploader.start(); - return false; + $('#upload_button').button("disable"); + upload_new(); } }, Cancel: function() { $('#upload-collation-dialog').dialog('close'); } }, - attach_uploader: function() { - create_uploader( _get_url([ "newtradition" ]) ); - $('#filelist').empty().html( 'Use the \'Pick\' button to choose a source file…' ); + open: function() { + // Set the upload button to its correct state based on + // whether a file is loaded + file_selected( $('#new_file').get(0) ); } - }); + }).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) { + // Reset button state + file_selected( $('#new_file').get(0) ); + // Display error message if applicable + if( ajaxSettings.url.indexOf( 'newtradition' ) > -1 + && ajaxSettings.type == 'POST' ) { + display_error( jqXHR, $("#upload_status") ); + } + });; $('#stemma_graph').mousedown( function(evt) { evt.stopPropagation(); diff --git a/root/js/plupload.html4.js b/root/js/plupload.html4.js deleted file mode 100644 index b20c88f..0000000 --- a/root/js/plupload.html4.js +++ /dev/null @@ -1 +0,0 @@ -(function(d,a,b,c){function e(f){return a.getElementById(f)}b.runtimes.Html4=b.addRuntime("html4",{getFeatures:function(){return{multipart:true,triggerDialog:(b.ua.gecko&&d.FormData||b.ua.webkit)}},init:function(f,g){f.bind("Init",function(p){var j=a.body,n,h="javascript",k,x,q,z=[],r=/MSIE/.test(navigator.userAgent),t=[],m=p.settings.filters,o,l,s,w;no_type_restriction:for(o=0;o