带有Angular 2的Filestack [英] Filestack with Angular 2

问题描述

我正在尝试添加一个选项以在Angular 2 App中添加图像，并希望使用Filestack(以前称为filepicker.io)存储图像. 因此，正如Filestack建议的那样，我在</body>上方的索引html文件中包括了这些脚本标签(并放入了API密钥)，并在组件html中添加了<input>字段，该字段显示了添加新配方的形式: >

在index.html中:

<script src="https://static.filestackapi.com/v3/filestack-0.5.0.js"></script>
<script>
    var url = '';
    var client = filestack.init('myApiKey');
    function showPicker() {
        client.pick({
            maxFiles: 1
        }).then(function(result) {
            url = JSON.stringify(result.filesUploaded[0].url)
        });
    }
</script>

在recipe-form.component.html中:

<input type="button" value="Upload" onclick="showPicker()" />

现在可以正常工作了，它会上传图片，如果我添加console.log(url)，它还会显示图片的网址.但是，似乎没有办法将变量添加到RecipeFormComponent中，我想在其中将URL添加到我在那里创建的对象中.我该怎么办?

我发现了很多关于如何在AngularJS中使用Filestack的东西，但是在Angular 2中却没有做到这一点...

您知道有什么可以帮助我的吗?

解决方案

删除您为 index.html 显示的所有内容，除了脚本标记以加载API.

<script src="//static.filestackapi.com/v3/filestack-0.5.0.js"></script>

然后更改您的组件以合并showPicker功能

recipe-form.component.ts

declare const filestack: {
  init(apiKey: string): {
    pick({ maxFiles }: { maxFiles: number }):
      Promise<{ filesUploaded: { url: string }[] }> 
  }
};

@Component({
  // boilerplate and ceremony
})
export class RecipeFormComponent {
  uploadedFileUrls: string[] = [];

  async showPicker() {
    const client = filestack.init('myApiKey');
    const result = await client.pick({ maxFiles: 1 });
    const url = result.filesUploaded[0].url;
    this.uploadedFileUrls.push(url);
  }
}

为提高可维护性和可测试性，您应将所有用于访问filestack全局代码的代码移到一个或多个专用服务中.

例如，我们可以编写类似

的服务

// file-upload.service.ts
declare const filestack: {

  init(apiKey: string): {
    pick: (options: {maxFiles: number}) => Promise<{filesUploaded: {url: string}[]}>
  }
};

const client = filestack.init('myApiKey');

export default class {
  async uploadOne() {
    const result = await client.pick({ maxFiles: 1 });
    return {urls: result.filesUploaded.map(uploaded => uploaded.url)};
  }
}

我们可以通过使用包装API并向我们的应用程序提供重要结果的服务来从组件中使用它

import FileUploadService from 'app/services/file-upload.service';

@Component({
  // boilerplate and ceremony
})
export class RecipeFormComponent {
  constructor(readonly fileUploadService: FileUploadService) {}

  uploadedFileUrls: string[] = [];

  async showPicker() {
    const {urls: [url]} = await this.fileUploadService.uploadOne();

    this.uploadedFileUrls.push(url);
  }
}

此外，如果您使用的是SystemJS之类的模块加载器，则最好删除脚本标签本身，并通过加载器映射并隐藏其全局属性.

I'm trying to add an option to add an image in my Angular 2 App and wanted to use Filestack (formerly filepicker.io) to store the images. So I included these script tags in my index html file above </body>, as Filestack suggested (and put my API key in) and added the <input> field in my component html which displays the form to add a new recipe:

in index.html:

<script src="https://static.filestackapi.com/v3/filestack-0.5.0.js"></script>
<script>
    var url = '';
    var client = filestack.init('myApiKey');
    function showPicker() {
        client.pick({
            maxFiles: 1
        }).then(function(result) {
            url = JSON.stringify(result.filesUploaded[0].url)
        });
    }
</script>

in recipe-form.component.html:

<input type="button" value="Upload" onclick="showPicker()" />

Now that works perfectly fine, it uploads the image and if I add console.log(url) it also shows the url of the image. However, there seems to be no way to get that variable into the RecipeFormComponent where I want to add the url to the object I'm creating there. How could I do that?

I have found a lot of stuff about how to use Filestack with AngularJS, but not how to do this in Angular 2...

Is there anything you know of that could help me?

解决方案

Remove everything you have shown for index.html except for the script tag to load the API.

<script src="//static.filestackapi.com/v3/filestack-0.5.0.js"></script>

Then alter your component to incorporate the showPicker functionality

recipe-form.component.ts

declare const filestack: {
  init(apiKey: string): {
    pick({ maxFiles }: { maxFiles: number }):
      Promise<{ filesUploaded: { url: string }[] }> 
  }
};

@Component({
  // boilerplate and ceremony
})
export class RecipeFormComponent {
  uploadedFileUrls: string[] = [];

  async showPicker() {
    const client = filestack.init('myApiKey');
    const result = await client.pick({ maxFiles: 1 });
    const url = result.filesUploaded[0].url;
    this.uploadedFileUrls.push(url);
  }
}

To improve maintainability and testability, you should move all of the code with that accesses the filestack global into a dedicated service or services.

For example we could write a service like

// file-upload.service.ts
declare const filestack: {

  init(apiKey: string): {
    pick: (options: {maxFiles: number}) => Promise<{filesUploaded: {url: string}[]}>
  }
};

const client = filestack.init('myApiKey');

export default class {
  async uploadOne() {
    const result = await client.pick({ maxFiles: 1 });
    return {urls: result.filesUploaded.map(uploaded => uploaded.url)};
  }
}

we can consume it from components by using the service which wraps the API and provides the results that matter to our application

import FileUploadService from 'app/services/file-upload.service';

@Component({
  // boilerplate and ceremony
})
export class RecipeFormComponent {
  constructor(readonly fileUploadService: FileUploadService) {}

  uploadedFileUrls: string[] = [];

  async showPicker() {
    const {urls: [url]} = await this.fileUploadService.uploadOne();

    this.uploadedFileUrls.push(url);
  }
}

Additionally, if you're using a module loader like SystemJS, you would do well to remove the script tag itself, mapping and hiding its global nature via the loader.

这篇关于带有Angular 2的Filestack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！