js2/mwEmbed/libAddMedia/dragDropFile.js

   1 /* firefox 3.6 drag-drop uploading
   2 *
   3 * Note: this file is still under development
   4 */
   5 loadGM( {
   6         "mwe-upload-multi" : "Upload {{PLURAL:$1|file|files}}",
   7         "mwe-review-upload": "Review file {{PLURAL:$1|upload|uploads}}"
   8 } );
   9
  10 ( function( $ ) {
  11         $.fn.dragDropFile = function () {
  12                 js_log( "drag drop: " + this.selector );
  13                 // setup drag binding and highlight
  14                 var dC = $j( this.selector ).get( 0 );
  15                 dC.addEventListener( "dragenter",
  16                         function( event ) {
  17                                 $j( dC ).css( 'border', 'solid red' );
  18                                 event.stopPropagation();
  19                                 event.preventDefault();
  20                         }, false );
  21                 dC.addEventListener( "dragleave",
  22                         function( event ) {
  23                                 // default textbox css (should be an easy way to do this)
  24                                 $j( dC ).css( 'border', '' );
  25                                 event.stopPropagation();
  26                                 event.preventDefault();
  27                         }, false );
  28                 dC.addEventListener( "dragover",
  29                         function( event ) {
  30                                 event.stopPropagation();
  31                                 event.preventDefault();
  32                         }, false );
  33                 dC.addEventListener( "drop",
  34                         function( event ) {
  35                                 doDrop( event );
  36                                 // handle the drop loader and call event
  37                         }, false );
  38                 function doDrop( event ) {
  39                         var dt = event.dataTransfer,
  40                                 files = dt.files,
  41                                 fileCount = files.length;
  42
  43                         event.stopPropagation();
  44                         event.preventDefault();
  45
  46                         $j( '#multiple_file_input' ).remove();
  47
  48                         $j( 'body' ).append( '<div title="' + gM( 'mwe-upload-multi', fileCount ) + '" ' +
  49                                 'style="position:absolute;bottom:5em;top:3em;right:0px;left:0px" ' +
  50                                 'id="multiple_file_input">' +
  51                                 '</div>'
  52                         );
  53
  54
  55                         var buttons = { };
  56                         buttons[ gM( 'mwe-cancel' ) ] = function() {
  57                                 $j( this ).dialog( 'close' );
  58                         }
  59                         buttons[ gM( 'mwe-upload-multi', fileCount ) ] = function() {
  60                                 alert( 'do multiple file upload' );
  61                         }
  62                         // open up the dialog
  63                         $j( '#multiple_file_input' ).dialog( {
  64                                 bgiframe: true,
  65                                 autoOpen: true,
  66                                 modal: true,
  67                                 draggable:false,
  68                                 resizable:false,
  69                                 buttons : buttons
  70                         } );
  71                         $j( '#multiple_file_input' ).dialogFitWindow();
  72                         $j( window ).resize( function() {
  73                                 $j( '#multiple_file_input' ).dialogFitWindow();
  74                         } );
  75                         // add the inital table / title:
  76                         $j( '#multiple_file_input' ).html( '<h3>' + gM( 'mwe-review-upload' ) + '</h3>' +
  77                                 '<table width="100%" border="1" class="table_list" style="border:none;"></table>' );
  78                         $j.each( files, function( i, file ) {
  79                                 if ( file.fileSize < 64048576 ) {
  80                                         $j( '#multiple_file_input .table_list' ).append(
  81                                                 '<tr>' +
  82                                                         '<td width="300" style="padding:5px"><img width="250" src="' + file.getAsDataURL() + '">' + '</td>' +
  83                                                         '<td valign="top">' +
  84                                                                 'File Name: <input name="file[' + i + '][title]" value="' + file.name + '"><br>' +
  85                                                                 'File Desc: <textarea style="width:300px;" name="file[' + i + '][desc]"></textarea><br>' +
  86                                                         '</td>' +
  87                                                 '</tr>'
  88                                         );
  89                                         /*$j.addDialog( "upload this image", '<img width="300" src="' + files[i].getAsDataURL() + '">' +
  90                                                 '<br>name: ' + files[i].name + '</br>' +
  91                                                 '<br>size: ' + files[i].fileSize + '</br>' +
  92                                                 '<br>mime: ' + files[i].mediaType + '</br>');
  93                                         */
  94                                         // do the add-media-wizard with the upload tab
  95                                 } else {
  96                                         alert( "file is too big, needs to be below 64mb" );
  97                                 }
  98                         } );
  99                 }
 100         }
 101 } )( jQuery );