TextAngular fileDropHandler documentation

All we need is an easy explanation of the problem, so here it is.

We have just upgraded our textangular to 1.2.2, as this now supports drag and drop.

have seen defaultFileDropHandler within the textAngualrSetup, how ever, struggling to find any documentation to support this or how to use it.

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

            return true;
        return false;

Basically, we want to allow users to drag multiple pdf’s, word docs etc and to upload on submit.

We could prob get this working in a fashion adding in functionality into defaultFileDropHandler within the settings page,

we implement ta by :-

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

however, is there a cleaner way to achieve this?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Sorry about the lack of docs!

Basically the defaultFileDropHandler is triggered when the HTML element.on("drop") event is fired.

Implementing this via the textAngularSetup file is fine, but will be globally applied to all instances. To apply a handler for just one instance of textAngular use the ta-file-drop attribute which should be the name of a function on the scope with the same signature as defaultFileDropHandler. For Example:

JS In Controller

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


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

Method 2

Both great answer, thank you!

I would just like to put the full code out to cover the global case since the code was only a snippet…

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" );
            if( file.size > 500000 ) {
                // add your own code here
                alert( "file size cannot exceed 0.5MB" );

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

            return true;

        return taOptions;

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply