Add events to file-queue helper, set up TypeScript, drop ember-cli-addon-docs, drop support for Ember < 3.28

.eslintrc.js

@@ -25,6 +25,32 @@ module.exports = {
   },
   rules: {},
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        ecmaFeatures: {
+          legacyDecorators: true,
+        },
+      },
+      plugins: ['ember', '@typescript-eslint'],
+      extends: [
+        'eslint:recommended',
+        'plugin:ember/recommended',
+        'plugin:prettier/recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      env: {
+        browser: true,
+      },
+      globals: {
+        // Mirage server
+        server: true,
+      },
+    },
     // node files
     {
       files: [
@@ -38,6 +64,7 @@ module.exports = {
         './config/**/*.js',
         './tests/dummy/config/**/*.js',
       ],
+      parser: 'babel-eslint',
       parserOptions: {
         sourceType: 'script',
       },
@@ -46,7 +73,7 @@ module.exports = {
         node: true,
       },
       plugins: ['node'],
-      extends: ['plugin:node/recommended'],
+      extends: ['eslint:recommended'],
     },
     {
       // Test files:

addon/components/file-upload.hbs

@@ -2,12 +2,7 @@
   for={{this.for}}
   class="file-upload"
   ...attributes
-  {{update-queue
-    this.queue
-    multiple=@multiple
-    disabled=@disabled
-    onFileAdd=@onFileAdd
-  }}
+  {{did-insert this.attachListeners}}
 >
   <input
     id={{this.for}}
@@ -16,9 +11,8 @@
     capture={{@capture}}
     multiple={{@multiple}}
     disabled={{@disabled}}
-    value={{this._value}}
     hidden
-    {{on 'change' this.change}}
+    {{this.queue.selectFile filter=@filter filesSelected=@filesSelected}}
   />
 
   {{yield this.queue}}

addon/components/file-upload.ts

@@ -0,0 +1,127 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+import uuid from '../system/uuid';
+import UploadFile from 'ember-file-upload/upload-file';
+import Queue from '../queue';
+import FileQueueService, { DEFAULT_QUEUE } from '../services/file-queue';
+
+interface FileUploadArgs {
+  queue?: Queue;
+
+  // actions
+  filter?: (file: UploadFile) => boolean;
+
+  // events
+  filesSelected?: (files: UploadFile[]) => void;
+
+  // old/deprecated API
+
+  /** @deprecated use `queue` instead */
+  name?: string;
+
+  /**
+   * @deprecated use `{{file-queue}}` helper with `{{queue.selectFile}}` modifier
+   */
+  multiple?: boolean;
+
+  /**
+   * @deprecated use `{{file-queue}}` helper with `{{queue.selectFile}}` modifier
+   */
+  disabled?: boolean;
+
+  /**
+   * @deprecated use `{{file-queue}}` helper with `{{queue.selectFile}}` modifier
+   */
+  accept?: string;
+
+  /**
+   * @deprecated use `{{file-queue}}` helper with `{{queue.selectFile}}` modifier
+   */
+  capture?: string;
+
+  /**
+   * @deprecated use `{{file-queue}}` helper with `{{queue.selectFile}}` modifier
+   */
+  for?: string;
+
+  /**
+   * @deprecated use `fileAdded()` instead
+   */
+  onFileAdd: (file: UploadFile) => void;
+
+  // @TODO remove `onSelect` in favor of `filter()` - it never was officially
+  // of public API
+  /**
+   * @deprecated use `filter()` instead
+   */
+  onSelect?: (files: UploadFile[]) => UploadFile[];
+}
+
+/**
+ * `FileUpload` is a component that will users to upload files using
+ * their browser's file chooser.
+ *
+ * @example
+ *
+ * old-fashioned usage:
+ *
+ * ```hbs
+ * <FileUpload
+ *   @name="photos"
+ *   @accept="image/*"
+ *   @multiple=true
+ *   @onFileAdd={{perform this.uploadImage}}
+ *   as |queue|
+ * >
+ *   <a tabindex="0">Add an image.</a>
+ *   {{#if queue.files.length}}
+ *     Uploading {{queue.files.length}} files. ({{queue.progress}}%)
+ *   {{/if}}
+ * </FileUpload>
+ * ```
+ *
+ * ```js
+ * import Component from '@glimmer/component';
+ * import { task } from 'ember-concurrency';
+
+ * export default class ExampleComponent extends Component {
+ *   @task({ maxConcurrency: 3, enqueue: true })
+ *   *uploadImage(file) {
+ *     const response = yield file.upload(url, options);
+ *     ...
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated use `{{file-queue}}` helper with `{{queue.selectFile}}` modifier
+ */
+export default class FileUploadComponent extends Component<FileUploadArgs> {
+  @service declare fileQueue: FileQueueService;
+
+  get queue() {
+    if (this.args.queue) {
+      return this.args.queue;
+    }
+
+    if (this.args.name) {
+      return this.fileQueue.findOrCreate(this.args.name);
+    }
+
+    return this.fileQueue.findOrCreate(DEFAULT_QUEUE);
+  }
+
+  get for() {
+    return this.args.for || `file-input-${uuid.short()}`;
+  }
+
+  @action
+  attachListeners() {
+    this.queue.addListener(this);
+  }
+
+  fileAdded(file: UploadFile) {
+    this.args.onFileAdd?.(file);
+  }
+}