fix: Add mobile file selector

MichalBryxi · Sep 25, 2024 · f7b391a · f7b391a
1 parent 8667d57
commit f7b391a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 52 deletions.
diff --git a/app/components/open-to/files/index.gjs b/app/components/open-to/files/index.gjs
@@ -1,30 +1,29 @@
 import Component from '@glimmer/component';
 import FileDropzone from 'ember-file-upload/components/file-dropzone';
-import { inject as service } from '@ember/service';
-import FileQueueService from 'ember-file-upload/services/file-queue';
 import OpenToFilesPreview from 'open-to-dot-dot-dot/components/open-to/files/preview';
+import fileQueue from 'ember-file-upload/helpers/file-queue';
 import OpenToFilesUpload from 'open-to-dot-dot-dot/components/open-to/files/upload';
 import { t } from 'ember-intl';
 
 export default class OpenToFiles extends Component {
-  @service fileQueue;
-
   <template>
-    <ul role='list' class='grid grid-cols-1 gap-x-4 gap-y-8 sm:gap-x-6'>
-      {{#each this.fileQueue.files as |file|}}
-        <li>
-          <div class='mx-auto w-full aspect-square relative bg-white'>
-            <OpenToFilesPreview @file={{file}} />
-          </div>
-        </li>
-      {{else}}
-        <li>
-          <div class='mx-auto w-full aspect-square relative'>
-            <OpenToFilesUpload />
-          </div>
-        </li>
+    {{#let (fileQueue onFileAdded=this.uploadPhoto) as |queue|}}
+      <ul role='list' class='grid grid-cols-1 gap-x-4 gap-y-8 sm:gap-x-6'>
+        {{#each queue.files as |file|}}
+          <li>
+            <div class='mx-auto w-full aspect-square relative bg-white'>
+              <OpenToFilesPreview @file={{file}} />
+            </div>
+          </li>
+        {{else}}
+          <li>
+            <div class='mx-auto w-full aspect-square relative'>
+              <OpenToFilesUpload />
+            </div>
+          </li>
 
-      {{/each}}
-    </ul>
+        {{/each}}
+      </ul>
+    {{/let}}
   </template>
 }
diff --git a/app/components/open-to/files/upload/index.gjs b/app/components/open-to/files/upload/index.gjs
@@ -1,45 +1,42 @@
 import Component from '@glimmer/component';
 import FileDropzone from 'ember-file-upload/components/file-dropzone';
-// import fileQueue from 'ember-file-upload/helpers/file-queue';
+import fileQueue from 'ember-file-upload/helpers/file-queue';
 import { t } from 'ember-intl';
-// import { inject as service } from '@ember/service';
 import Avatar from '../../../avatar';
 import Instructions from './instructions';
 
 export default class OpenToFilesUpload extends Component {
-  // @service fileQueue;
-
-  // uploadPhoto() {}
-
   <template>
-    {{!-- {{#let (fileQueue name='foo' onFileAdded=this.uploadPhoto) as |queue|}} --}}
-    {{!-- <input type='file' {{queue.selectFile}} /> --}}
+    {{#let (fileQueue onFileAdded=this.uploadPhoto) as |queue|}}
+      <FileDropzone
+        @queue={{queue}}
+        class='w-full aspect-square rounded-full border-dashed border-4 border-slate-400 flex items-center justify-center'
+        as |dropzone|
+      >
 
-    <FileDropzone
-      {{!-- @queue={{queue}} --}}
-      class='w-full aspect-square rounded-full border-dashed border-4 border-slate-400 flex items-center justify-center'
-      as |dropzone|
-    >
+        {{#if dropzone.active}}
+          <Instructions>
+            {{t 'drag-and-drop.drop-now'}}
+          </Instructions>
+        {{else}}
+          <div class='relative w-full aspect-square'>
+            <div class='absolute top-0 left-0 w-full aspect-square'>
+              <Avatar @file='/images/unicorn.webp' />
+            </div>
 
-      {{#if dropzone.active}}
-        <Instructions>
-          {{t 'drag-and-drop.drop-now'}}
-        </Instructions>
-      {{else}}
-        <div class='relative w-full aspect-square'>
-          <div class='absolute top-0 left-0 w-full aspect-square'>
-            <Avatar @file='/images/unicorn.webp' />
-          </div>
+            {{#if dropzone.supported}}
+              <Instructions>
+                {{t 'drag-and-drop.instructions'}}
+              </Instructions>
+            {{else}}
+              <Instructions>
+                <input type='file' {{queue.selectFile}} class='w-32' />
+              </Instructions>
+            {{/if}}
 
-          {{#if dropzone.supported}}
-            <Instructions>
-              {{t 'drag-and-drop.instructions'}}
-            </Instructions>
-          {{/if}}
-
-        </div>
-      {{/if}}
-    </FileDropzone>
-    {{!-- {{/let}} --}}
+          </div>
+        {{/if}}
+      </FileDropzone>
+    {{/let}}
   </template>
 }
diff --git a/app/components/open-to/files/upload/instructions.gjs b/app/components/open-to/files/upload/instructions.gjs
@@ -6,7 +6,7 @@ export default class OpenToFilesUploadInstructions extends Component {
       class='absolute top-0 left-0 w-full aspect-square text-center flex justify-center items-center'
     >
       <span
-        class='text-3xl font-black shadow-md text-white bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% px-6 py-2 rounded-lg'
+        class='text-xl font-black shadow-md text-white bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% px-6 py-2 rounded-lg'
       >
         {{yield}}
       </span>