当前位置：首页 > 软件库 > 程序开发 > >

ember-active-storage

Direct uploads with Rails' Active Storage

授权协议 MIT License

开发语言 JavaScript

所属分类程序开发

软件类型开源软件

地区不详

投递者公羊浩阔

操作系统跨平台

开源组织无

适用人群未知

软件概览

ember-active-storage

Installation

ember install @algonauti/ember-active-storage

Usage

The addon provides an activeStorage service that allows you to:

send files to your Rails backend's direct upload controller;
listen to upload progress events.

Assuming your template has a file input like:

<input type="file" {{on "change" (fn this.upload)}} />

and your ember model has an avatar attribute defined as has_one_attached :avatar on its corresponding Active Record model, then in your component (or controller) the upload action would look like:

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class UploadComponent extends Component {
  @service
  activeStorage;

  @tracked
  uploadProgress = 0;

  @action
  upload(event) {
    const files = event.target.files;
    if (files) {
      const directUploadURL = '/rails/active_storage/direct_uploads';

      for (var i = 0; i < files.length; i++) {
        this.activeStorage
          .upload(files.item(i), directUploadURL, {
            onProgress: (progress) => {
              this.uploadProgress = progress;
            },
          })
          .then((blob) => {
            const signedId = blob.signedId;

            this.model.avatar = signedId;
          });
      }
    }
  }
}

directUploadURL is the path referencing ActiveStorage::DirectUploadsController on your Rails backend (or a custom one built on top of that).
The uploadProgress property will hold a value between 0 and 100 that you might use in your template to show upload progress.
After the upload promise is resolved and signedId is set in your model, when a model.save() is triggered, the Rails backend will use such signedId to associate an ActiveStorage::Attachment record to your backend model's record.

loadstart, load, loadend, error, abort, timeout events invokes onLoadstart, onLoad, onLoadend, onError, onAbort, onTimeout accordingly. For example; If you want to use the loadend event in your app, you can use like;

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class UploadComponent extends Component {
  @service
  activeStorage;

  @tracked
  uploadProgress = 0;

  @action
  upload(event) {
    const files = event.target.files;
    if (files) {
      const directUploadURL = '/rails/active_storage/direct_uploads';

      for (var i = 0; i < files.length; i++) {
        this.activeStorage
          .upload(files.item(i), directUploadURL, {
            onProgress: (progress) => {
              this.uploadProgress = progress;
            },
            onLoadend: (event) => {
              debug(`Event captured ${event}`); // https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent
            },
          })
          .then((blob) => {
            const signedId = blob.signedId;

            this.model.avatar = signedId;
          });
      }
    }
  }
}

If you need the actual XHR object in your app, you can use the onXHROpened event. It returns the XHR object reference. For example:

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class UploadComponent extends Component {
  @service
  activeStorage;

  @tracked
  uploadProgress = 0;
  
  @tracked
  xhrs = [];

  @action
  upload(event) {
    const files = event.target.files;
    if (files) {
      const directUploadURL = '/rails/active_storage/direct_uploads';

      for (var i = 0; i < files.length; i++) {
        this.activeStorage
          .upload(files.item(i), directUploadURL, {
            onProgress: (progress) => {
              this.uploadProgress = progress;
            },
            onXHROpened: (xhr) => {
              this.xhrs.push(xhr);  // so you can loop over this.xhrs and invoke abort()
            },
          })
          .then((blob) => {
            const signedId = blob.signedId;

            this.model.avatar = signedId;
          });
      }
    }
  }
}

There is an ember-active-storage ENV config with only one parameter called url. With this config help, you can omit the upload url now. For example:

ENV['ember-active-storage'] = {
  url: 'http://your-domain/rails/active_storage/direct_uploads',
};

Now you can call the upload function without the upload url.

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class UploadComponent extends Component {
  @service
  activeStorage;

  @tracked
  uploadProgress = 0;

  @action
  upload(event) {
    const files = event.target.files;
    if (files) {
      for (var i = 0; i < files.length; i++) {
        this.activeStorage
          .upload(files.item(i), {
            onProgress: (progress) => {
              this.uploadProgress = progress;
            },
          })
          .then((blob) => {
            const signedId = blob.signedId;

            this.model.avatar = signedId;
          });
      }
    }
  }
}

Sending authentication headers

It's pretty common that you want to protect with authentication the direct uploads endpoint on your Rails backend. If that's the case, the activeStorage service will need to send authentication headers together with the direct upload request.

To achieve that, you'll need to extend the activeStorage service provided by the addon and add a headers computed property. For example, if you're using ember-simple-auth, it will be a 2-steps process. First you'll need to define an authenticatedHeaders computed property in your session service, like this:

// app/services/session.js
import Service from '@ember/service';
import { inject as service } from '@ember/service';

export default class MySessionService extends Service {
  @service
  session;

  get authenticatedHeaders() {
    const { access_token } = this.session.authenticated;

    return { Authorization: `Bearer ${access_token}` };
  }
}

Then, you will alias that property in your activeStorage service, like this:

// app/services/active-storage.js
import ActiveStorage from '@algonauti/ember-active-storage/services/active-storage';
import { inject as service } from '@ember/service';

export default class ActiveStorageService extends ActiveStorage {
  @service('my-session')
  session;

  get headers() {
    this.session.authenticatedHeaders;
  }
}

Also note: if the download endpoint is protected as well, and you're using an ajax request to download files, then don't forget to include the same headers in that request as well.

Contributing

Installation

git clone <repository-url>
cd ember-active-storage
yarn install

Linting

yarn lint:js
yarn lint:js --fix

Running tests

ember test – Runs the test suite on the current Ember version
ember test --server – Runs the test suite in "watch mode"
yarn test – Runs ember try:each to test your addon against multiple Ember versions

Running the dummy application

ember serve
Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.

使用案例

Microsoft Azure Storage Explorer

上周主管说，要把每次开过的发票，要下载成Pdf的文件，然后就实时的将这些发票存到云上面去。就是这个Microsoft Azure ，微软的亲儿子。先把代码贴上来吧，挺简单的。 1 ##1.链接账号密码 2 StorageCredentials storageCredentials = new StorageCredentials( 3
Zoned Storage - 介绍

分区存储设备分区存储设备是一类存储设备，其地址空间被划分为具有不同于常规存储设备的写入约束的区域 zones。原理分区存储设备的区域必须按顺序写入。设备地址空间的每个zone 都有一个写入指针wp，用于跟踪下一次写入的位置。区域中的数据不能被直接覆盖。必须首先使用特殊命令（zone reset）擦除该区域。下图说明了这一原理。
Azure Basic - Windows Storage Enhancement (Table)

Table Entity Group Transactions (SaveChangesOptions.Batch) (In Sample1) Here’s a more complete description from the “Programming Table Storage” whitepaper:" For the entities storedwithin the same tab
Windows Azure 之 Storage Blob 常见操作

1.新建Container public void NewContainer(string name, int access /* 2=public container, 1=public blob, 0=private */) { if (CloudStorageAccount == null) return; name = No
Azure Storage Note

Availability Durability Scalability 10-20 rack storage Windows Azure Storage Stamps Stream Layer (Duratable) -Files,Blob Patition Layer -Blob -Queue -Entity Patition Master -Range Partition -Index Ra
About the Storage allocation

It doesn't matter what programming language u use,it's all about the usage of variable---storage management. 1.Static & Dynamic static: Global constants and the other information/data generated b
Azure Basic - Windows Storage Enhancement (Queue)

Queue Get messages in a batch (In Sample 1) Poison message : use dequeuecount (In Sample 1) Delete message: always add try-catch at multiple consumers situation (In Sample 1) Always add time sleep to
Active/Active与Active/Passive

转：问：Active/Active与Active/Passive阵列之间的区别是什么？哪一种技术更好？答：拥有两个或者更多控制器的存储阵列（SCSI,FC,iSCSI以及NAS）可以配置成为Active/Active模式或者Active/Passive模式。 Active/Passive意味着一个控制器为主动处理I/O请求，而另外一个处于空闲状态，以备用于在主控制器出现故障或者处于离

ember-active-storage

ember-active-storage

Installation

Usage

Sending authentication headers

Contributing

Installation

Linting

Running tests

Running the dummy application

License

同类工具

相关阅读

相关文章

相关问答

相关文档