TextAngular fileDropHandler documentation

问题

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.

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

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?

回答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){...};

HTML

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

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

来源：https://stackoverflow.com/questions/27816253/textangular-filedrophandler-documentation

标签

angularjs

textangular