File upload on mobile

app/components/avatar/badge.gjs

@@ -0,0 +1,84 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class OpenToFiles extends Component {
+  @service settings;
+
+  <template>
+    <svg
+      viewBox='0 0 500 500'
+      version='1.1'
+      class='w-full aspect-square absolute left-0 top-0'
+      id='svg1'
+      sodipodi:docname='open-to-template.svg'
+      xml:space='preserve'
+      inkscape:version='1.3.2 (091e20e, 2023-11-25)'
+      xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'
+      xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'
+      xmlns:xlink='http://www.w3.org/1999/xlink'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlns:svg='http://www.w3.org/2000/svg'
+    ><defs id='defs1'><linearGradient
+          id='linearGradient7'
+          inkscape:collect='always'
+        ><stop
+            style='stop-color:{{this.settings.colourStart}};stop-opacity:1;'
+            offset='0'
+            id='stop7'
+          /><stop
+            style='stop-color:{{this.settings.colourStop}};stop-opacity:0;'
+            offset='1'
+            id='stop8'
+          /></linearGradient><linearGradient
+          inkscape:collect='always'
+          xlink:href='#linearGradient7'
+          id='linearGradient8'
+          x1='278.16702'
+          y1='446.6568'
+          x2='321.58673'
+          y2='350.27707'
+          gradientUnits='userSpaceOnUse'
+        /></defs><sodipodi:namedview
+        id='namedview1'
+        pagecolor='#ffffff'
+        bordercolor='#666666'
+        borderopacity='1.0'
+        inkscape:showpageshadow='false'
+        inkscape:pageopacity='0.0'
+        inkscape:pagecheckerboard='0'
+        inkscape:deskcolor='#d1d1d1'
+        inkscape:zoom='2.2721597'
+        inkscape:cx='249.98242'
+        inkscape:cy='442.0904'
+        inkscape:window-width='2784'
+        inkscape:window-height='1384'
+        inkscape:window-x='2497'
+        inkscape:window-y='645'
+        inkscape:window-maximized='0'
+        inkscape:current-layer='svg1'
+        showborder='false'
+        borderlayer='false'
+        shape-rendering='crispEdges'
+      /><path
+        id='curve'
+        fill='transparent'
+        d='M 27.837018,258.6854 C 41.808363,439.19199 165.05284,473.2831 237.55522,476.61982 407.25882,472.83414 467.47105,354.12272 471.77105,360.82272'
+        sodipodi:nodetypes='ccc'
+        style='display:none;opacity:0.258929'
+      /><path
+        id='rect7'
+        style='display:inline;opacity:1;fill:url(#linearGradient8);stroke-width:31.5704;stroke-linecap:round;stroke-linejoin:round'
+        d='M 0,0 V 500 H 500 V 0 Z m 248.89453,60.828125 c 93.61403,-0.645638 170.05346,79.052925 170.86524,178.150395 l 0.006,1.55859 C 419.76601,339.63735 343.98403,420.03452 250.36914,420.25 156.75357,420.46528 80.641893,340.41644 80.236328,241.31641 79.830262,142.21752 155.2818,61.473637 248.89453,60.828125 Z'
+        sodipodi:nodetypes='ccccccccccc'
+      /><text
+        width='500'
+        id='text1'
+        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:53.3333px;font-family:Arial;-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:5px;display:inline;fill:#ffffff;fill-opacity:1"
+        inkscape:label='text1'
+      ><textPath
+          xlink:href='#curve'
+          id='textPath1'
+          dx='2.72'
+        >{{this.settings.text}}</textPath></text></svg>
+  </template>
+}

app/components/avatar/image.gjs

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class OpenToFiles extends Component {
+  <template>
+    <img src={{@file}} class='w-full aspect-square relative' />
+  </template>
+}

app/components/avatar/index.gjs

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import AvatarImage from './image';
+import AvatarBadge from './badge';
+
+export default class OpenToFiles extends Component {
+  <template>
+    <div class='w-full aspect-square' id={{@id}}>
+      <div class='w-full aspect-square rounded-full overflow-hidden relative'>
+        <AvatarImage @file={{@file}} />
+        <AvatarBadge />
+      </div>
+    </div>
+  </template>
+}

app/components/open-to/files/index.gjs

@@ -1,28 +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>
-      {{/each}}
-      <li>
-        <div class='mx-auto w-full aspect-square relative'>
-          <OpenToFilesUpload />
-        </div>
-      </li>
-    </ul>
+    {{#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>
+    {{/let}}
   </template>
 }

app/components/open-to/files/preview.gjs

@@ -1,101 +1,12 @@
 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 { t } from 'ember-intl';
+import Avatar from '../../avatar';
 
 export default class OpenToFiles extends Component {
-  @service fileQueue;
-  @service settings;
-
   objectURL(file) {
     return URL.createObjectURL(file);
   }
 
   <template>
-    <div class='w-full h-full bg-white' id={{@file.id}}>
-      <div class='w-full h-full rounded-full overflow-hidden relative'>
-        <img
-          src={{this.objectURL @file.file}}
-          class='w-full aspect-square relative'
-        />
-
-        <svg
-          viewBox='0 0 500 500'
-          version='1.1'
-          class='w-full aspect-square absolute left-0 top-0'
-          id='svg1'
-          sodipodi:docname='open-to-template.svg'
-          xml:space='preserve'
-          inkscape:version='1.3.2 (091e20e, 2023-11-25)'
-          xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'
-          xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'
-          xmlns:xlink='http://www.w3.org/1999/xlink'
-          xmlns='http://www.w3.org/2000/svg'
-          xmlns:svg='http://www.w3.org/2000/svg'
-        ><defs id='defs1'><linearGradient
-              id='linearGradient7'
-              inkscape:collect='always'
-            ><stop
-                style='stop-color:{{this.settings.colourStart}};stop-opacity:1;'
-                offset='0'
-                id='stop7'
-              /><stop
-                style='stop-color:{{this.settings.colourStop}};stop-opacity:0;'
-                offset='1'
-                id='stop8'
-              /></linearGradient><linearGradient
-              inkscape:collect='always'
-              xlink:href='#linearGradient7'
-              id='linearGradient8'
-              x1='278.16702'
-              y1='446.6568'
-              x2='321.58673'
-              y2='350.27707'
-              gradientUnits='userSpaceOnUse'
-            /></defs><sodipodi:namedview
-            id='namedview1'
-            pagecolor='#ffffff'
-            bordercolor='#666666'
-            borderopacity='1.0'
-            inkscape:showpageshadow='false'
-            inkscape:pageopacity='0.0'
-            inkscape:pagecheckerboard='0'
-            inkscape:deskcolor='#d1d1d1'
-            inkscape:zoom='2.2721597'
-            inkscape:cx='249.98242'
-            inkscape:cy='442.0904'
-            inkscape:window-width='2784'
-            inkscape:window-height='1384'
-            inkscape:window-x='2497'
-            inkscape:window-y='645'
-            inkscape:window-maximized='0'
-            inkscape:current-layer='svg1'
-            showborder='false'
-            borderlayer='false'
-            shape-rendering='crispEdges'
-          /><path
-            id='curve'
-            fill='transparent'
-            d='M 27.837018,258.6854 C 41.808363,439.19199 165.05284,473.2831 237.55522,476.61982 407.25882,472.83414 467.47105,354.12272 471.77105,360.82272'
-            sodipodi:nodetypes='ccc'
-            style='display:none;opacity:0.258929'
-          /><path
-            id='rect7'
-            style='display:inline;opacity:1;fill:url(#linearGradient8);stroke-width:31.5704;stroke-linecap:round;stroke-linejoin:round'
-            d='M 0,0 V 500 H 500 V 0 Z m 248.89453,60.828125 c 93.61403,-0.645638 170.05346,79.052925 170.86524,178.150395 l 0.006,1.55859 C 419.76601,339.63735 343.98403,420.03452 250.36914,420.25 156.75357,420.46528 80.641893,340.41644 80.236328,241.31641 79.830262,142.21752 155.2818,61.473637 248.89453,60.828125 Z'
-            sodipodi:nodetypes='ccccccccccc'
-          /><text
-            width='500'
-            id='text1'
-            style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:53.3333px;font-family:Arial;-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:5px;display:inline;fill:#ffffff;fill-opacity:1"
-            inkscape:label='text1'
-          ><textPath
-              xlink:href='#curve'
-              id='textPath1'
-              dx='2.72'
-            >{{this.settings.text}}</textPath></text></svg>
-      </div>
-    </div>
+    <Avatar @file={{this.objectURL @file.file}} @id={{@file.id}} />
   </template>
 }

app/components/open-to/files/upload/index.gjs

@@ -0,0 +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 { t } from 'ember-intl';
+import Avatar from '../../../avatar';
+import Instructions from './instructions';
+
+export default class OpenToFilesUpload extends Component {
+  <template>
+    {{#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|
+      >
+
+        {{#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}}
+
+          </div>
+        {{/if}}
+      </FileDropzone>
+    {{/let}}
+  </template>
+}

app/components/open-to/files/upload/instructions.gjs

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+export default class OpenToFilesUploadInstructions extends Component {
+  <template>
+    <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>
+    </div>
+  </template>
+}

app/services/settings.js

@@ -3,6 +3,6 @@ import { tracked } from '@glimmer/tracking';
 
 export default class SettingsService extends Service {
   @tracked text = '#OpenTo...';
-  @tracked colourStart = '#00e503';
-  @tracked colourStop = '#12e500';
+  @tracked colourStart = '#a855f7';
+  @tracked colourStop = '#ec4899';
 }

translations/en-us.yaml

@@ -2,7 +2,7 @@ application:
   name: '#OpenTo...'
   subtitle: LinkedIn avatar generator
 drag-and-drop:
-  instructions: Add image
+  instructions: Drop your image here
   drop-now: Drop it!
 toggles:
   text: Text