TextAngular fileDropHandler documentation

Question

Wir haben gerade unseren Textwinkel auf 1.2.2 aktualisiert, da dieser jetzt Drag & Drop unterstützt.

haben defaultFileDropHandler innerhalb des textAngualrSetup gesehen, wie auch immer, kämpfen, um jede Dokumentation zu finden, um dies zu unterstützen oder wie man es benutzt.

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; 
    } 

Grundsätzlich möchten wir Benutzern erlauben, mehrere PDFs, Word-Dokumente usw. zu ziehen und beim Senden hochzuladen.

Wir prob diese Arbeit in einer Art und Weise bekommen konnte in der Funktionalität in defaultFileDropHandler Hinzufügen Seite innerhalb der Einstellungen,

wir ta implementieren durch: -

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

gibt es jedoch eine sauberere Weg, dies zu erreichen, ?

Answer 1

Entschuldigung wegen des Mangels an Dokumentation!

Grundsätzlich wird der defaultFileDropHandler ausgelöst, wenn das HTML-Ereignis element.on("drop") ausgelöst wird.

Die Implementierung über die Datei textAngularSetup ist in Ordnung, wird aber global auf alle Instanzen angewendet. Um einen Handler für nur eine Instanz von textAngular zu verwenden, verwenden Sie das Attribut ta-file-drop, das den Namen einer Funktion im Bereich mit derselben Signatur wie defaultFileDropHandler enthalten sollte. Zum Beispiel:

JS Kontroller

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

HTML

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

Answer 2

Beide große Antwort, danke!

Ich möchte nur den vollständigen Code löscht den globalen Fall abzudecken, da der Code nur ein Ausschnitt war ...

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; 
    }]); 
});