Be able to embed logo (base64)

src/components/ImportModal.vue

@@ -46,9 +46,9 @@ export default {
     close() {
       this.isOpen = false;
     },
-    onSelected(content) {
+    onSelected(payload) {
       try {
-        const data = JSON.parse(content);
+        const data = JSON.parse(payload.content);
 
         this.$store.dispatch('data/importJson', data);
         this.close();

src/components/form/AppFileInput.vue

@@ -3,7 +3,8 @@
         <label :for="inputRef" class="btn btn-sm btn-link pointer mb-0">
             <i class="material-icons md-18 mr-2 va-tt">cloud_upload</i>{{ buttonText }}
         </label>
-        <input v-if="ready" class="d-none" type="file" :id="inputRef" :ref="inputRef" @change="handleFileUpload()"/>
+        <input v-if="ready" class="d-none" :accept="accept" type="file" :id="inputRef" :ref="inputRef"
+               @change="handleFileUpload()"/>
     </div>
 </template>
 
@@ -15,6 +16,10 @@ export default {
     buttonText: {
       default: 'Select file',
     },
+    outputType: {
+      default: 'text',
+    },
+    accept: {},
   },
   data() {
     return {
@@ -28,10 +33,18 @@ export default {
 
       const reader = new FileReader();
       reader.onload = (e) => {
-        this.$emit('selected', e.target.result);
+        this.$emit('selected', {
+          content: e.target.result,
+          mime: file.type,
+          size: file.size,
+        });
         this.reset();
       };
+      if (this.outputType === 'text') {
         reader.readAsText(file);
+      } else if (this.outputType === 'base64') {
+        reader.readAsDataURL(file);
+      }
     },
     reset() {
       this.ready = false;

src/components/invoices/InvoiceForm.vue

@@ -6,10 +6,14 @@
                     <img v-if="team.logo_url"
                          v-b-modal.team_logo_url
                          :src="team.logo_url" style="width:100%; max-width:200px;">
-                    <button class="btn btn-sm" v-b-modal.team_logo_url v-else>
+                    <AppFileInput :class="{'text-muted': !!team.logo_url }"
+                                  accept="image/*"
+                                  class="d-print-none" @selected="logoSelected"
+                                  button-text="Select logo" output-type="base64"/>
+                    <!--<button class="btn btn-sm" v-b-modal.team_logo_url v-else>
                         <i class="material-icons material-icons-round md-36">file_upload</i>
-                    </button>
+                    </button>-->
-                    <AppError :errors="errors" field="team.logos"/>
+                    <AppError :errors="errors" field="logo_url"/>
                 </div>
                 <InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
                                class="col-8 text-right mb-2"/>
@@ -88,12 +92,14 @@ import AppEditable from '@/components/form/AppEditable';
 import AppError from '@/components/form/AppError';
 import { BModal, VBModal } from 'bootstrap-vue';
 import AppInput from '@/components/form/AppInput';
+import AppFileInput from '@/components/form/AppFileInput';
 
 export default {
   directives: {
     'b-modal': VBModal,
   },
   components: {
+    AppFileInput,
     InvoiceTotals,
     InvoiceHeader,
     InvoiceContactDetails,
@@ -136,6 +142,13 @@ export default {
     updateTeam(props) {
       this.$store.dispatch('teams/updateTeam', props);
     },
+    logoSelected(payload) {
+      this.errors.clear();
+      if (payload.size / 1000 > 512) {
+        return this.errors.set({ logo_url: ['Logo has to be under 512kb.'] });
+      }
+      this.updateTeam({ logo_url: payload.content });
+    },
   },
 };
 </script>