Filepicker.io 使用 Azure Blob 存储 - 上传错误

Question

这是我在按钮上的 ng-click 代码：

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

单击按钮后，模态框正确显示，但是当我 select 一个文件时，我在红色背景上收到 "Error uploading file ...." 消息。

当我点击底部的"Upload"时，这是控制台上的错误：

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)

我正在尝试使用 Azure Blob 存储对其进行配置（在开发人员门户上设置了访问密钥）。它永远不会进入函数（错误）函数。

有什么建议吗？

更新：

我尝试使用小部件：

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

它有效，文件被上传到 blob 存储，但只有当我将上面的 HTML 直接放到页面上时它才有效。当它位于 AngularJS 指令模板中时 - 不应用 filepicker.io 逻辑并出现标准输入。我想这是因为该指令后来应用于 DOM 而不是 filepicker.io 小部件逻辑。

关于如何在 AngularJS 指令模板中使用小部件的任何提示？

Answer 1

我能够使小部件工作（但是 JavaScript API 没有成功），这是 Angular 指令 link 将输入元素从指令模板转换为文件选择器按钮的函数：

（打字稿）

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

Filepicker.io 使用 Azure Blob 存储 - 上传错误

Filepicker.io with Azure Blob storage - Upload error

angularjs

filepicker.io