Changeset 25 for trunk/web-app


Ignore:
Timestamp:
Mar 31, 2011, 12:07:02 PM (10 years ago)
Author:
robert@…
Message:

Implemented uploadify as upload tool

Location:
trunk/web-app
Files:
9 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/web-app/css/fileuploader.new.css

    r2 r25  
    88.upload_field_container .qq-upload-list { display: none; }
    99
    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;     
    1414        display: inline-block;
    1515        zoom: 1; /* IE 6 & 7 hack */
    1616        *display: inline; /* IE 6 & 7 hack */   
    1717}
    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; }
    2020
    2121.upload_info { color: #006DBA; display: inline;  margin-left: 5px; }

  • trunk/web-app/css/metagenomics.css

    r24 r25  
    220220        width: 120px;
    221221        display: inline-block;
     222        vertical-align: top;
    222223        zoom: 1; /* IE 6 & 7 hack */
    223224        *display: inline; /* IE 6 & 7 hack */
    … …  
    496497.ui-dialog .assaySampleDetails span.value { width: 150px; display: inline-block; *display: inline; zoom: 1; }
    497498
     499.uploadContainer { display: inline-block; *display: inline; zoom: 1 }
     500
    498501/* Makes sure the filenames in the dialog don't exceed 200px */
    499502.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  
    3636 */
    3737function deleteProcessButton( params ) {
    38         if( $( '#upload_field_container_sequencefiles .multipleFiles li' ).size() == 0 ) {
     38        if( $( '#upload_field_container_sequencefiles ul.files li' ).size() == 0 ) {
    3939                var firstButton = $(":button:contains('Process')");
    4040                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
     2var uploadfields = new Array();
     3
    14/*************************************************
    25 *
    … …  
    2326        if( multiple == undefined )
    2427                multiple = false;
     28       
     29        // Check whether the field has already been created
     30        if( uploadfields[ field_id ] != undefined )
     31                return;
    2532       
    2633        var uploader;
    … …  
    3037                uploader = _createSingleUploader( field_id, uploadCallback, deleteCallback );
    3138        }
     39       
     40        uploadfields[ field_id ] = uploader;
    3241}
    3342
    … …  
    4554 */
    4655function _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();
    5981                                }
    6082                               
    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();
    65116                                }
    66117                        }
    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         
    105119        });
    106120       
    … …  
    116130        }               
    117131       
    118         return uploader;
     132        return  $('#upload_field_' + field_id );
    119133}
    120134
    … …  
    133147 */
    134148function _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 );
    176186                        }
    177                 }
    178         });     
    179         return uploader;
    180        
     187         
     188        });
     189       
     190        return $('#upload_field_' + field_id );
    181191}
    182192
Note: See TracChangeset for help on using the changeset viewer.