Filepicker.io with Azure Blob storage - Upload error

Question

this is my ng-click code on a button:

                    $scope.pickFiles = function () {
                        var picker_options = {
                            container: 'modal',
                            mimetypes: ['*'],
                            multiple: true //from attr
                        };
                        var store_options = {
                            location: 'Azure'
                        };
                        window.filepicker.pickAndStore(picker_options, store_options, function (fpfiles) {
                            $scope.$apply(function () {
                                alert(fpfiles);
                            }), function (error) {
                                console.log(JSON.stringify(error));
                            };
                        });
                    };

After clicking the button, the modal properly appears, but when I select a file I get an "Error uploading file ...." message on red background.

When I click "Upload" at the bottom, this is the error on the console:

TypeError: Unable to set property 'id' of undefined or null reference
   at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7517)
   at a (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:1:795)
   at h (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7473)
   at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7381)
   at u (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:26212)
   at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:26394)
   at p.prototype.$eval (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:1544)
   at p.prototype.$digest (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:56)
   at p.prototype.$apply (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:1820)
   at a (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:9833)

I'm trying to configure it with Azure Blob Storage (on the developer portal the access keys are set). It never goes inside the function(error) function.

Any tips?

Update:

I tried with the widget:

<input type="filepicker" data-fp-apikey=".............." data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-store-location="azure" onchange="alert(event.fpfile.url)">

And it works, the file is uploaded to the blob storage, but it works only if I put above HTML direct onto the page. When it is in an AngularJS directive template - the filepicker.io logic isn't applied and a standard input appears. I guess it's because the directive is later applied to the DOM than the filepicker.io widget logic.

Any tips how to use the widget in an AngularJS Directive template?

Answer 1

I was able to make the widget to work (however no success with the JavaScript API), this is the code-snippet from the Angular directive link function which transforms an input element from the directives template to the filepicker button:

(TypeScript)

            var fPicker = (<any>window).filepicker;
            var domElement = <HTMLInputElement>element.children().get(0);
            domElement.setAttribute('data-fp-mimetype', 'image/*');
            domElement.setAttribute('data-fp-button-text', $scope.title);
            domElement.onchange = (e) => {
                alert(JSON.stringify((<any>e).fpfile));
            };
            fPicker.constructWidget(domElement);