2015-01-07 10 views
7

Abbiamo appena aggiornato il nostro textangular alla 1.2.2, poiché ora supporta il drag and drop.TextAngular fileDropHandler documentation

hanno visto defaultFileDropHandler all'interno del textAngualrSetup, come mai, faticando a trovare documentazione per supportare questo o come usarlo.

defaultFileDropHandler: 
    /* istanbul ignore next: untestable image processing */ 
    function (file, insertAction) 
    { 
     debugger; 
     var reader = new FileReader(); 
     if(file.type.substring(0, 5) === 'image'){ 
      reader.onload = function() { 
       if(reader.result !== '') insertAction('insertImage', reader.result, true); 
      }; 

      reader.readAsDataURL(file); 
      return true; 
     } 
     return false; 
    } 

In sostanza, vogliamo consentire agli utenti di trascinare pdf multipli di parola, documenti ecc e di caricare su Invia.

Potremmo prob ottenere questo lavoro in modo aggiungendo funzionalità in defaultFileDropHandler all'interno della pagina delle impostazioni,

implementiamo ta da: -

<div text-angular data-ng-model="NoteText" ></div> 

tuttavia, c'è un modo più pulito per raggiungere questo obiettivo ?

risposta

9

Siamo spiacenti per la mancanza di documenti!

Fondamentalmente il defaultFileDropHandler viene attivato quando viene attivato l'evento HTML element.on("drop").

L'implementazione di questo tramite il file textAngularSetup va bene, ma verrà applicato globalmente a tutte le istanze. Per applicare un gestore per una sola istanza di textAngular utilizzare l'attributo ta-file-drop che dovrebbe essere il nome di una funzione sull'oscilloscopio con la stessa firma di defaultFileDropHandler. Per esempio:

JS controller

$scope.dropHandler = function(file, insertAction){...}; 

HTML

<div text-angular data-ng-model="NoteText" ta-file-drop="dropHandler"></div> 
2

Entrambi grande risposta, grazie!

vorrei solo mettere il codice completo in modo da coprire il caso globale poiché il codice è stato solo un frammento ...

app.config(function($provide) { 
    $provide.decorator('taOptions', [ '$delegate', function(taOptions) { 

     taOptions.defaultFileDropHandler = function(file, insertAction) { 
      // validation 
      if(file.type.substring(0, 5) !== "image") { 
       // add your own code here 
       alert("only images can be added"); 
       return; 
      } 
      if(file.size > 500000) { 
       // add your own code here 
       alert("file size cannot exceed 0.5MB"); 
       return; 
      } 

      // create a base64 string 
      var reader = new FileReader(); 
      reader.onload = function() { 
       reader.result && insertAction("insertImage", reader.result, true); 
      }; 

      reader.readAsDataURL(file); 
      return true; 
     }; 

     return taOptions; 
    }]); 
}); 
Problemi correlati