Handling images upload with angular

Hey guys, first thanks for this amazing inline editor.

I’ve included the editor in an angular webapp, using the following directive code :

 angular.module('editorApp', [])
    .directive('ngEditor',  function(){
        function link(scope, element, attrs){

            // Initialise the editor
            editor = new ContentTools.EditorApp.get()
            editor.init('[ng-editor]', 'ng-editor')

            // Bind a function on editor save
            editor.bind('save', function(regions, autoSave){

                scope.$apply(function(){
                    scope.regions = regions;
                });

                // "regions" contains all the html for each editable regions
                // Now, "regions" can be saved and used as needed.

            })

        }

        return {
            link: link
        }

    })

My problem is that I can’t upload images. I’ve tried to insert the blueprint code given on http://getcontenttools.com/tutorials/handling-image-uploads in this directive like so :

angular.module('myAwesomeAppToChangeTheWorld')
  .directive('ngEditor', function () {
    function link(scope, element, attrs){

            // Initialise the editor
            var editor = new ContentTools.EditorApp.get();
            editor.init('[ng-editor]', 'ng-editor');

            var imageUploader = function(dialog){
                console.log('DIALOG : ' + JSON.stringify(dialog));
                Materialize.toast('IMAGE DIALOG LOAD', 2000);

                dialog.bind('imageuploader.cancelupload', function () {
                    // Cancel the current upload
                    Materialize.toast('CANCELED', 2000);
                    // Stop the upload
                    if (xhr) {
                        xhr.upload.removeEventListener('progress', xhrProgress);
                        xhr.removeEventListener('readystatechange', xhrComplete);
                        xhr.abort();
                    }

                    // Set the dialog to empty
                    dialog.state('empty');
                });

                dialog.bind('imageuploader.clear', function () {
                    // Clear the current image
                    dialog.clear();
                    image = null;
                });

                dialog.bind('imageuploader.fileready', function (ev) {
                    console.log('FILE READY : ' );
                    Materialize.toast('FILE READY', 2000);
                });

                dialog.bind('imageuploader.save', function () {
                    console.log('FILE SAVE : ' );
                    Materialize.toast('FILE SAVE', 2000);
                });
            };

            ContentTools.IMAGE_UPLOADER = imageUploader;

            // Bind a function on editor save
            editor.bind('save', function(regions, autoSave){

                scope.$apply(function(){
                    scope.regions = regions;
                });

                // "regions" contains all the html for each editable regions
                // Now, "regions" can be saved and used as needed.

            });

        }

        return {
            link: link
        }
  });

I’ve replaced the “addEventListener” on dialog by the “bind” method, because when I use “addEventListener” it says “dialog.addEventListener is not a function”, whereas dialog is well defined. And now it just doesn’t work with “bind”.

So do you know where my problem come from ? Any idea ?

[jimmy4701]

@anthonyjb Thanks for your help but I can’t give you an access to the code (company code). I just created a directive using the code I’ve pasted in my last posts (with editor.bind(‘save’) ).

Don’t worry if my problem persists. Unfortunately I had to change from ContentTools to another package, because of time.

Thanks for your help and for your time anyway. Hope the problem will still be an exception. And thanks for ContentTools which is a pretty good package (and which works on my other projects so …^^)

[anthonyjb]

@jimmy4701 sorry for the delayed reply - I’m a bit stumped now 😦

I’ve just looked back over your initial post and the code and I can see you’re using

// Bind a function on editor save
editor.bind('save', function(regions, autoSave) ...

If this is working then the wrong version of the library is definitely getting dragged in as bind doesn’t exist against the editor and that wouldn’t work it would just error. Since your getting to the point where the editor starts (e.g your issue is with uploading an image) I think this has to be a version issue.

Any chance you can give me access to or send me a complete example I can debug live?