flatack- 外形

Angular 组件库,可以方便地将强大的 flatack- api 集成到您的应用程序中 .

目录

• 概览
• 使用量
  • 安装
  • 光盘N
  • 现有投入
  • 可用产出
  • 文件ack 服务
  • 实例
• 文档
• 发展
• 捐款

概览

flatack-angular 是一种包装 filtack-js 存档副本 sdk 允许您在几行代码中与 flatack 服务集成 。 几乎你能够做的 filtack-js 存档副本 您也可以使用此组件.

此寄存器包含有两个项目的角工作空间:

• filestack-angular 包含 FilestackAngularModule 通过 npm 发布
• example 显示使用实例的 angular app FilestackModule 特性

FilestackAngularModule 包含

• 文件ack 服务 - 用于 flatack-js 客户端类的包件,并增加了对可观察器的支持
• 文件tack 变形Pipe - 方便创建url的管道 转换 在模板中
• Picker 重叠组件 - 将在覆盖模式下打开的 Filetack 拾取器组件
• Picker 内置组件 - 将在提供的html容器中打开的Filetack拾取器组件
• Picker DropPane 组件 - 将打开在所提供 html 容器中的 Filetack 投放窗格组件 如果需要,也可以独立使用

使用量

安装

通过国家预防机制安装 filestack-js SDK 作为依赖自动安装)

npm install filestack-js
npm install @filestack/angular

包含 FilestackModule 内 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FilestackModule } from '@filestack/angular';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FilestackModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

在.html文件中使用

<ng-picker-overlay
  apikey="YOUR_API_KEY">
</ng-picker-overlay>

光盘N

如果您想导入 filestack-module 将文件直接捆绑到您的应用程序 而不是使用 npm 软件包, 您可以在 cdn 上找到它 :

https://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js

https://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js.map

其中 {MODULE VERSION} 是此套件的理想版本

现有投入

可用产出

文件ack 服务

这个 FilestackService 是文件tack-js上的适配器 客户类 并允许你与可观察者共事,而不做诺言. 方法获得与客户类方法相同的输入参数.

实例

下面可以找到一些基本的例子.

您也可以在 angular-filestack-example 应用

要运行本地类型

ng serve filestack-angular-example

之后访问

http://localhost:4200/

组件初始化后直接打开拾取器

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }
}

component.html

<ng-picker-overlay
  [apikey]="apikey">
</ng-picker-overlay>

点击自定义按钮打开拾取器

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
    this.onSuccess = (res) => console.log('###onSuccess', res);
    this.onError = (err) => console.log('###onErr', err);
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}

component.html

<ng-picker-overlay
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
  <button>Open picker</button>
</ng-picker-overlay>

在内线模式下打开拾取器

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}

component.html

<ng-picker-inline
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
  <button>Open picker</button>
</ng-picker-inline>

以倒放相框模式打开拾取器

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}

component.html

<ng-picker-drop-pane
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
</ng-picker-drop-pane>

使用 filetack 变形管转换 url

component.ts

...
import { TransformOptions } from 'filestack-js';

export class AppComponent implements OnInit {
  transformOptions: TransformOptions;

  constructor(private filestackService: FilestackService) {}

  ngOnInit() {
    this.transformOptions = {
      resize: {
        width: 400
      },
      sepia: {
        tone: 80
      }
    }
  }
}

component.html

  <img src="{{'5aYkEQJSQCmYShsoCnZN' | filestackTransform: transformOptions}}">

使用 sdk 客户端.upload () 选择文件和上传

component.ts

export class AppComponent implements OnInit {
  file: any;

  constructor(private filestackService: FilestackService) {}

  ngOnInit() {
    this.filestackService.init('YOUR_API_KEY'); 
  }
  fileChanged(e) {
    this.file = e.target.files[0];
  }
  uploadFile() {
    this.filestackService.upload(this.file)
      .subscribe(res => console.log(res));
  }
}

component.html

  <input type='file' (change)="fileChanged($event)">
  <button (click)="uploadFile()">Upload file</button>

文档

您可以在 https://filestack.github.io/filestack-js/ 页面存档备份,存于互联网档案馆

发展

在添加更改后 FilestackAngularModule 在/项目/文件ack-angular/src中

您需要构建此模块

ng build filestack-angular

此命令将生成 /dist 的 conatins 准备使用 flatack 模块

您可以通过检查示例来检查其正确性 example 应用 :

1. 更新 api 密钥 /projects/example/src/app/app.component.ts

2. 开始本地应用

ng serve example

3. 访问 http://localhost:4200/ (英语)

捐款

你的任何贡献或想法都非常受欢迎。 请考虑我们遵循常规承诺的具体规定,以确保一致的承诺信息和更改日志格式.