Changeset 25 for trunk/web-app
- Timestamp:
- Mar 31, 2011, 12:07:02 PM (11 years ago)
- Location:
- trunk/web-app
- Files:
-
- 9 added
- 4 edited
-
css/fileuploader.new.css (modified) (1 diff)
-
css/metagenomics.css (modified) (2 diffs)
-
js/addFilesDialog.js (modified) (1 diff)
-
js/fileuploads.new.js (modified) (6 diffs)
-
js/fileuploads.old.js (added)
-
uploadify (added)
-
uploadify/button.png (added)
-
uploadify/cancel.png (added)
-
uploadify/expressInstall.swf (added)
-
uploadify/jquery.uploadify.v2.1.4.min.js (added)
-
uploadify/swfobject.js (added)
-
uploadify/uploadify.css (added)
-
uploadify/uploadify.swf (added)
Legend:
- Unmodified
- Added
- Removed
-
trunk/web-app/css/fileuploader.new.css
r2 r25 8 8 .upload_field_container .qq-upload-list { display: none; } 9 9 10 .upload _field_container .multipleFiles { list-style-type: none; margin-left: 0; padding-left: 0; }11 .upload _field_container .multipleFiles li { margin: 3px 0px; border-bottom: 1px solid #ccc;}12 .upload _field_container .multipleFiles li:last-child { border-bottom-width: 0px; }13 .upload _field_container .multipleFiles li span {10 .uploadContainer ul.files { list-style-type: none; margin-left: 0; padding-left: 0; } 11 .uploadContainer ul.files li { margin: 2px 0px; border-bottom: 1px solid #ccc; } 12 .uploadContainer ul.files li:last-child { border-bottom-width: 0px; } 13 .uploadContainer ul.files li span { padding: 4px 0; 14 14 display: inline-block; 15 15 zoom: 1; /* IE 6 & 7 hack */ 16 16 *display: inline; /* IE 6 & 7 hack */ 17 17 } 18 .upload _field_container .multipleFiles li span.filename { width: 200px; margin-right: 10px; }19 .upload _field_container .multipleFiles li span.filesize { width: 60px; margin-right: 10px; }18 .uploadContainer ul.files li span.filename { width: 280px; margin-right: 10px; } 19 .uploadContainer ul.files li span.filesize { width: 60px; margin-right: 10px; } 20 20 21 21 .upload_info { color: #006DBA; display: inline; margin-left: 5px; } -
trunk/web-app/css/metagenomics.css
r24 r25 220 220 width: 120px; 221 221 display: inline-block; 222 vertical-align: top; 222 223 zoom: 1; /* IE 6 & 7 hack */ 223 224 *display: inline; /* IE 6 & 7 hack */ … … 496 497 .ui-dialog .assaySampleDetails span.value { width: 150px; display: inline-block; *display: inline; zoom: 1; } 497 498 499 .uploadContainer { display: inline-block; *display: inline; zoom: 1 } 500 498 501 /* Makes sure the filenames in the dialog don't exceed 200px */ 499 502 .dataTables_wrapper .uploadedFile { display: inline-block; zoom: 1; *display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 190px; height: 15px; } -
trunk/web-app/js/addFilesDialog.js
r9 r25 36 36 */ 37 37 function deleteProcessButton( params ) { 38 if( $( '#upload_field_container_sequencefiles .multipleFiles li' ).size() == 0 ) {38 if( $( '#upload_field_container_sequencefiles ul.files li' ).size() == 0 ) { 39 39 var firstButton = $(":button:contains('Process')"); 40 40 firstButton.attr("disabled","disabled").addClass('ui-state-disabled'); -
trunk/web-app/js/fileuploads.new.js
r2 r25 1 // The uploadfields are saved in an array to avoid them being created twice in a jquery dialog 2 var uploadfields = new Array(); 3 1 4 /************************************************* 2 5 * … … 23 26 if( multiple == undefined ) 24 27 multiple = false; 28 29 // Check whether the field has already been created 30 if( uploadfields[ field_id ] != undefined ) 31 return; 25 32 26 33 var uploader; … … 30 37 uploader = _createSingleUploader( field_id, uploadCallback, deleteCallback ); 31 38 } 39 40 uploadfields[ field_id ] = uploader; 32 41 } 33 42 … … 45 54 */ 46 55 function _createSingleUploader( field_id, uploadCallback, deleteCallback ) { 47 var uploader; 48 uploader = new qq.FileUploader({ 49 element: document.getElementById( 'upload_field_' + field_id ), 50 action: baseUrl + '/file/upload', 51 params : {}, 52 name : field_id, 53 multiple: false, 54 onSubmit : function(id, file){ 55 oldFile = $('#' + field_id).val(); 56 if( oldFile != '' ) { 57 if( !confirm( 'The old file is deleted when uploading a new file. Do you want to continue?') ) { 58 return false; 56 var clearId = null; 57 $('#upload_field_' + field_id ).uploadify({ 58 'uploader' : baseUrl + '/uploadify/uploadify.swf', 59 'script' : baseUrl + '/file/upload', 60 'cancelImg' : baseUrl + '/uploadify/cancel.png', 61 'auto' : true, 62 'removeCompleted': true, 63 'multi' : false, 64 'height' : 20, 65 'buttonImg': baseUrl + '/uploadify/button.png', 66 'onSelect' : function(event, id, fileObj) { 67 var oldFile = $('#' + field_id).val(); 68 if( oldFile != '' ) { 69 if( !confirm( 'The old file is deleted when uploading a new file. Do you want to continue?') ) { 70 clearId = id; 71 return false; 72 } 73 74 // Delete the file from disk, if it has been just uploaded. If the file was already moved from 75 // the temporary directory, if will not be deleted 76 if( $('#' + field_id + 'DeleteUploaded').css( 'display' ) != 'none' ) { 77 deleteFileUploaded( field_id ); 78 } 79 $('#' + field_id + 'DeleteExisting').hide(); 80 $('#' + field_id + 'DeleteUploaded').hide(); 59 81 } 60 82 61 // Delete the file from disk, if it has been just uploaded. If the file was already moved from 62 // the temporary directory, if will not be deleted 63 if( $('#' + field_id + 'DeleteUploaded').css( 'display' ) != 'none' ) { 64 deleteFileUploaded( field_id ); 83 $('#upload_field_' + field_id ).uploadifySettings( 'scriptData', { 84 'field': field_id, 85 'oldFile': oldFile 86 }, true); 87 88 }, 89 'onSelectOnce': function( event, data ) { 90 // This is a hack to cancel upload if the user doesn't want to overwrite his already 91 // uploaded file. It should be possible to cancel an upload using 'return false' from 92 // the onSelect event, but that doesn't work. See also uploadify forums 93 if( clearId != null ) { 94 $('#upload_field_' + field_id ).uploadifyCancel( clearId ); 95 clearId = null; 96 } 97 }, 98 'onComplete' : function(event, id, file, response, data) { 99 // Parse as json 100 var responseJSON = JSON.parse( response ); 101 102 if( response == "" || !responseJSON.success ) { 103 $('#' + field_id).val( '' ); 104 $('#' + field_id + 'Example').html('<span class="error">Error uploading ' + createFileHTML( file.name ) + '</span>' ); 105 $('#' + field_id + 'DeleteUploaded').hide(); 106 } else { 107 // Activate user callback if supplied 108 if( typeof uploadCallback == 'function') 109 uploadCallback( {field: field_id, filename: responseJSON.filename} ); 110 111 $('#' + field_id).val( responseJSON.filename ); 112 113 $('#' + field_id + 'Example').html('Uploaded ' + createFileHTML( responseJSON.filename ) ); 114 $('#' + field_id + 'DeleteUploaded').show(); 115 $('#uploadcontainer_' + field_id + ' .files').show(); 65 116 } 66 117 } 67 68 uploader.setParams({ 69 'field': field_id, 70 'oldFile': oldFile 71 }); 72 73 // Give feedback to the user 74 $('#' + field_id + 'Example').html('Uploading ' + createFileHTML( file ) + ': ' + _createProgressHtml( field_id ) ); 75 $('#' + field_id + 'Progress').show(); 76 $('#' + field_id + 'DeleteExisting').hide(); 77 $('#' + field_id + 'DeleteUploaded').hide(); 78 79 return true; 80 }, 81 onProgress: function(id, fileName, loaded, total) { 82 if (loaded != total){ 83 text = Math.round(loaded / total * 100) + '% from ' + uploader._formatSize(total) + " " + _createSpinnerHtml(); 84 } else { 85 text = uploader._formatSize(total); 86 } 87 $('#' + field_id + 'Progress').html( text ); 88 }, 89 onComplete : function(id, file, responseJSON) { 90 if( responseJSON == "" || !responseJSON.success ) { 91 $('#' + field_id).val( '' ); 92 $('#' + field_id + 'Example').html('<span class="error">Error uploading ' + createFileHTML( file ) + '</span>' ); 93 $('#' + field_id + 'DeleteUploaded').hide(); 94 } else { 95 // Activate user callback if supplied 96 if( typeof uploadCallback == 'function') 97 uploadCallback( {field: field_id, filename: responseJSON.filename} ); 98 99 $('#' + field_id).val( responseJSON.filename ); 100 101 $('#' + field_id + 'Example').html('Uploaded ' + createFileHTML( responseJSON.filename ) ); 102 $('#' + field_id + 'DeleteUploaded').show(); 103 } 104 } 118 105 119 }); 106 120 … … 116 130 } 117 131 118 return uploader;132 return $('#upload_field_' + field_id ); 119 133 } 120 134 … … 133 147 */ 134 148 function _createMultipleUploader( field_id, uploadCallback, deleteCallback ) { 135 var uploader; 136 uploader = new qq.FileUploader({ 137 element: document.getElementById( 'upload_field_' + field_id ), 138 action: baseUrl + '/file/upload', 139 params : {}, 140 name : field_id, 141 multiple: true, 142 onSubmit : function(id, file){ 143 uploader.setParams({ 144 'field': field_id, 145 'oldFile': '' 146 }) 147 148 // Give feedback to the user 149 $('#' + field_id + 'Example').html('Uploading ' + createFileHTML( file ) + ': ' + _createProgressHtml( field_id ) ); 150 $('#' + field_id + 'Progress').show(); 151 152 return true; 153 }, 154 onProgress: function(id, fileName, loaded, total) { 155 if (loaded != total){ 156 text = Math.round(loaded / total * 100) + '% from ' + uploader._formatSize(total) + " " + _createSpinnerHtml(); 157 } else { 158 text = uploader._formatSize(total); 159 } 160 $('#' + field_id + 'Progress').html( text ); 161 }, 162 163 onComplete : function(id, file, responseJSON) { 164 if( responseJSON == "" || !responseJSON.success ) { 165 $('#' + field_id + 'Example').html('<span class="error">Error uploading ' + createFileHTML( file ) + '</span>' ); 166 } else { 167 // Activate user callback if supplied 168 if( typeof uploadCallback == 'function') 169 uploadCallback( {field: field_id, filename: responseJSON.filename} ); 170 171 // Add filename to the list 172 $( '#upload_field_container_' + field_id + ' ul.multipleFiles').append( _createMultipleFileHtml( field_id, id, responseJSON.filename, deleteCallback ) ); 173 174 // Remove progress text 175 $('#' + field_id + 'Example').text( '' ); 149 $('#upload_field_' + field_id ).uploadify({ 150 'uploader' : baseUrl + '/uploadify/uploadify.swf', 151 'script' : baseUrl + '/file/upload', 152 'cancelImg' : baseUrl + '/uploadify/cancel.png', 153 'auto' : true, 154 'removeCompleted': true, 155 'multi' : true, 156 'height' : 20, 157 'buttonImg': baseUrl + '/uploadify/button.png', 158 'onSelect' : function(event, id, fileObj) { 159 $('#upload_field_' + field_id ).uploadifySettings( 'scriptData', { 160 'field': field_id, 161 'oldFile': '' 162 }, true); 163 }, 164 'onComplete' : function(event, id, file, response, data) { 165 // Parse as json 166 var responseJSON = JSON.parse( response ); 167 168 if( response == "" || !responseJSON.success ) { 169 $('#' + field_id).val( '' ); 170 $('#' + field_id + 'Example').html('<span class="error">Error uploading ' + createFileHTML( file.name ) + '</span>' ); 171 } else { 172 // Activate user callback if supplied 173 if( typeof uploadCallback == 'function') 174 uploadCallback( {field: field_id, filename: responseJSON.filename} ); 175 176 //$('#' + field_id + 'Example').html('Uploaded ' + createFileHTML( responseJSON.filename ) ); 177 178 // Add filename to the list 179 $( '#uploadcontainer_' + field_id + ' ul.files').append( _createMultipleFileHtml( field_id, id, responseJSON.filename, deleteCallback ) ); 180 181 // Show the upload message and the files list 182 $('#uploadcontainer_' + field_id + ' .files').show(); 183 } 184 185 $( '#upload_field_' + field_id ).uploadifyCancel( id ); 176 186 } 177 }178 }); 179 return uploader;180 187 188 }); 189 190 return $('#upload_field_' + field_id ); 181 191 } 182 192
Note: See TracChangeset
for help on using the changeset viewer.
