Propose a partial fix to #1085

Author: MichalBryxi

ember-file-upload/src/services/file-queue.ts

@@ -26,6 +26,13 @@ export default class FileQueueService extends Service {
    */
   #queues: Map<QueueName, Queue> = new Map();
 
+  constructor() {
+    super();
+    // Create default queue the first time this service is accessed and instantiated
+    // Helps to avoid backtracking re-render issues
+    this.create(DEFAULT_QUEUE);
+  }
+
   /**
    * Returns a queue with the given name
    *

test-app/tests/integration/helpers/file-queue-helper-test.gts

@@ -5,7 +5,7 @@ import { render, click, settled, waitFor } from '@ember/test-helpers';
 import { DEFAULT_QUEUE, FileState } from 'ember-file-upload';
 import type { UploadFile } from 'ember-file-upload';
 import { selectFiles } from 'ember-file-upload/test-support';
-import { uploadHandler } from 'ember-file-upload';
+import { type FileQueueService, uploadHandler } from 'ember-file-upload';
 import { later } from '@ember/runloop';
 import fileQueue from 'ember-file-upload/helpers/file-queue';
 import { on } from '@ember/modifier';
@@ -20,6 +20,31 @@ module('Integration | Helper | file-queue', function (hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
+  test('service can be used before helper', async function (assert) {
+    const fileQueueService = this.owner.lookup(
+      'service:file-queue',
+    ) as FileQueueService;
+
+    await render(
+      <template>
+        <ul>
+          {{#each fileQueueService.files as |file|}}
+            <li>
+              {{file.name}}
+            </li>
+          {{/each}}
+        </ul>
+
+        {{#let (fileQueue) as |queue|}}
+          <label>
+            <input type='file' {{queue.selectFile}} hidden />
+            Select File
+          </label>
+        {{/let}}
+      </template>,
+    );
+  });
+
   test('filter is triggered when selecting files', async function (assert) {
     const filter = (file: File) => {
       assert.step(`filter: ${file.name}`);
@@ -274,4 +299,63 @@ module('Integration | Helper | file-queue', function (hooks) {
     await settled();
     assert.dom('[data-test-file]').doesNotExist('queue was flushed');
   });
+
+  // Service before helper issue ref: https://github.com/adopted-ember-addons/ember-file-upload/issues/1085
+  test('service can be used before helper with DEFUALT_QUEUE', async function (assert) {
+    const fileQueueService = this.owner.lookup(
+      'service:file-queue',
+    ) as FileQueueService;
+
+    await render(
+      <template>
+        {{fileQueue}}
+
+        <ul>
+          {{#each fileQueueService.files as |file|}}
+            <li>
+              {{file.name}}
+            </li>
+          {{/each}}
+        </ul>
+
+        {{#let (fileQueue) as |queue|}}
+          <label>
+            <input type='file' {{queue.selectFile}} hidden />
+            Select File
+          </label>
+        {{/let}}
+      </template>,
+    );
+
+    assert.dom('label').exists('regression would throw during rendering');
+  });
+
+  test('service can be used before helper with named queue, provided FileQueueService.create is called first', async function (assert) {
+    const fileQueueService = this.owner.lookup(
+      'service:file-queue',
+    ) as FileQueueService;
+    const customName = 'uploads';
+    fileQueueService.create(customName);
+
+    await render(
+      <template>
+        <ul>
+          {{#each fileQueueService.files as |file|}}
+            <li>
+              {{file.name}}
+            </li>
+          {{/each}}
+        </ul>
+
+        {{#let (fileQueue name=customName) as |queue|}}
+          <label>
+            <input type='file' {{queue.selectFile}} hidden />
+            Select File
+          </label>
+        {{/let}}
+      </template>,
+    );
+
+    assert.dom('label').exists('regression would throw during rendering');
+  });
 });