How to run angular-filemanager in Ember?

[Ericky14]

I have been trying to run angular-filemanager in Ember for the past few days. But I haven't been so successful, probably because I have barely any knowledge of Angular. So, I was hoping someone could help me. (This might also be a bug with the addon itself)

On Ember, I created a component to contain angular-filemanager and I added methods with path '/admin/file/' that return true just to be placeholders. In the component.js file, I have the following code in the 'didInsertElement' method:

didInsertElement: function() {
    angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
      config.set({
        appName: 'angular-filemanager',

        listUrl: 'api/admin/file',
        uploadUrl: 'api/admin/file',
        renameUrl: 'api/admin/file',
        copyUrl: 'api/admin/file',
        moveUrl: 'api/admin/file',
        removeUrl: 'api/admin/file',
        editUrl: 'api/admin/file',
        getContentUrl: 'api/admin/file',
        createFolderUrl: 'api/admin/file',
        downloadFileUrl: 'api/admin/file',
        downloadMultipleUrl: 'api/admin/file',
        compressUrl: 'api/admin/file',
        extractUrl: 'api/admin/file',
        permissionsUrl: 'api/admin/file',
      });
    }]);

    angular.bootstrap(this.element, ['FileManagerApp']);
});

and in the template.hbs file I have: <angular-filemanager></angular-filemanager>

With this setup, nothing displays on the screen and I get an error on the console:

vendor.js:144343 TypeError: e.post(...).success is not a function
    at o.list (vendor.js:163007)
    at i.list (vendor.js:163007)
    at i.list (vendor.js:163007)
    at i.refresh (vendor.js:163007)
    at new <anonymous> (vendor.js:163007)
    at Object.invoke (vendor.js:134857)
    at $controllerInit (vendor.js:140710)
    at nodeLinkFn (vendor.js:139587)
    at compositeLinkFn (vendor.js:138896)
    at nodeLinkFn (vendor.js:139650)

[nicklosh]

I'm having the same issue.

It turns out that the $http legacy promise methods success and error have been deprecated. The solution I found is to replace.

.success(function(response) with .then(function successCallback(response) and .error(function(response) with .then(function errorCallback(response)

[Ericky14]

Do you mind if I ask you exactly how you implemented it?

After I changed those methods like you said, the filemanager displays, but it appears to have no css. I imported all the the assets in the ember-cli-build.js file with app.import(...).

Also, I changed the POST request to return one of the examples in the backend API docs for the list, but it still gives me an error Error undefined - Bridge response error, please check the API docs or this ajax response.

{ "result": [
            {
                "name": "magento",
                "rights": "drwxr-xr-x",
                "size": "4096",
                "date": "2016-03-03 15:31:40",
                "type": "dir"
            }, {
                "name": "index.php",
                "rights": "-rw-r--r--",
                "size": "549923",
                "date": "2016-03-03 15:31:40",
                "type": "file"
            }
]}

[Sven1981]

I guess it is because of the successCallback parameters in the apihandler.js. After changing this and building again with gulp the problem was solved for me.

Before:

$http.post(apiUrl, data).then(function successCallback(data, code) {
          self.deferredHandler(data, deferred, code);
           }).then(function errorCallback(data, code) {
               dfHandler(data, deferred, code, 'Unknown error listing, check the response');
            })['finally'](function() {
                self.inprocess = false;
            });

After:

 $http({
              method: 'POST',
              url: apiUrl,
              data: data
            }).then(function successCallback(response) {
                dfHandler(response.data, deferred, response.status);
              }, function errorCallback(response) {
               if(!response){
                    dfHandler(response, deferred, response, 'Unknown error listing, check the response');
                }else {
                    dfHandler(response.data, deferred, response.status, 'Unknown error listing, check the response');
                }
            })['finally'](function() {
                self.inprocess = false;
            });