fix: Mobile file picker works and is not suuuuper ugly

MichalBryxi · Sep 25, 2024 · de1f4d7 · de1f4d7
1 parent 8ca4c4b
commit de1f4d7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/app/components/open-to/files/upload/index.gjs b/app/components/open-to/files/upload/index.gjs
@@ -4,8 +4,17 @@ import fileQueue from 'ember-file-upload/helpers/file-queue';
 import { t } from 'ember-intl';
 import Avatar from '../../../avatar';
 import Instructions from './instructions';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { Button } from '@frontile/buttons';
 
 export default class OpenToFilesUpload extends Component {
+  @action
+  toggleFileSelector() {
+    // This is quite an ugly hack, but ... it works :shrug:
+    document.querySelector('#file-input').click();
+  }
+
   <template>
     {{#let (fileQueue onFileAdded=this.uploadPhoto) as |queue|}}
       <FileDropzone
@@ -16,24 +25,29 @@ export default class OpenToFilesUpload extends Component {
 
         {{#if dropzone.active}}
           <Instructions>
-            {{t 'drag-and-drop.drop-now'}}
+            <span
+              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'
+            >
+              {{t 'drag-and-drop.drop-now'}}
+            </span>
           </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>
+            <Instructions>
+              <Button @intent='primary' {{on 'click' this.toggleFileSelector}}>
                 {{t 'drag-and-drop.instructions'}}
-              </Instructions>
-            {{else}}
-              <Instructions>
-                <input type='file' {{queue.selectFile}} class='w-32' />
-              </Instructions>
-            {{/if}}
-
+                <input
+                  id='file-input'
+                  type='file'
+                  {{queue.selectFile}}
+                  class='hidden'
+                />
+              </Button>
+            </Instructions>
           </div>
         {{/if}}
       </FileDropzone>

diff --git a/app/components/open-to/files/upload/instructions.gjs b/app/components/open-to/files/upload/instructions.gjs
@@ -5,11 +5,7 @@ export default class OpenToFilesUploadInstructions extends Component {
     <div
       class='absolute top-0 left-0 w-full aspect-square text-center flex justify-center items-center'
     >
-      <span
-        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>
+      {{yield}}
     </div>
   </template>
 }