upload documents

client/index.html

@@ -10,6 +10,7 @@
     <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
 
   <script>
+    window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
     window.UPLOADCARE_LOCALE = 'de';
     window.UPLOADCARE_LOCALE_TRANSLATIONS = {
       dialog: {

client/src/components/content-forms/DocumentForm.vue

@@ -1,58 +1,77 @@
 <template>
-  <div class="document-form">
-
-    <info-icon class="document-form__help-icon help-text__icon"></info-icon>
-    <p class="document-form__help-description help-text__description">
-      Sie können Dokumente auf <a class="document-form__platform-link help-text__link" href="https://onedrive.live.com/"
-                                  target="_blank">OneDrive</a> hochladen und anschliessen einen Link hier einfügen.
-    </p>
-
-    <input class="document-form__document-link skillbox-input"
-           :value="value.url" v-on:input="$emit('document-change-url', $event.target.value, index)"
-           placeholder="URL einfügen...">
-
+  <div class="document-form" ref="documentform">
+    <div v-if="!value.url" ref="uploadcare-panel"></div>
+    <div v-if="value.url">
+      <a :href="previewUrl">{{previewUrl}}</a>
+    </div>
   </div>
 </template>
 
 <script>
-  import InfoIcon from '@/components/icons/InfoIcon';
+  import uploadcare from 'uploadcare-widget';
 
   export default {
-    props: ['value', 'index'],
 
-    components: {
-      InfoIcon
+    props: ['value', 'index'],
+    mounted() {
+      const uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
+        tabs: ['file'],
+      });
+
+      // HACK to change the text of the Uploadcare dynamically we need to change the text here directly
+      setTimeout(() => {
+        const formElem = this.$refs['documentform'];
+        formElem.getElementsByClassName('uploadcare--text_size_extra-large')[1].innerText = 'Ziehen Sie ein Dokument hier hinein';
+        formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText = 'Wählen Sie ein lokales Dokument';
+      }, 0);
+
+      uploadcarePanel.done(panelResult => {
+        panelResult.done(fileInfo => {
+          this.$emit('link-change-url', fileInfo.cdnUrl, this.index)
+        });
+
+        panelResult.progress(p => {
+        });
+
+        panelResult.fail(uploadResult => {
+        });
+      });
+    },
+    computed: {
+      previewUrl: function() {
+        if (this.value && this.value.url) {
+          return this.value.url;
+        }
+        return null;
+      }
     }
   }
 </script>
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
 
-  .document-form {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns: 40px 1fr;
-    grid-column-gap: 16px;
-    grid-row-gap: 20px;
-    align-items: center;
+  .image-form {
+    &__file-input {
+      width: 0.1px;
+      height: 0.1px;
+      overflow: hidden;
+      opacity: 0;
+      position: absolute;
+      z-index: -1;
 
-    &__help-icon {
+      & + label {
+        cursor: pointer;
+        background-color: $color-lightgrey;
+        height: 150px;
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        font-family: $sans-serif-font-family;
+        font-weight: 500;
+        text-decoration: underline;
+      }
     }
-
-    &__help-description {
-
-    }
-
-    &__platform-link {
-
-    }
-
-    &__document-link {
-      grid-column: 1 / span 2;
-      width: $modal-input-width
-    }
-
   }
 </style>

client/src/components/content-forms/ImageForm.vue

@@ -14,36 +14,25 @@
 
     props: ['value', 'index'],
     mounted() {
-      let uploadcarePanel = openImagePanel(this.$refs['uploadcare-panel']);
+      const uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
+        tabs: ['file'],
+      });
 
       uploadcarePanel.done(panelResult => {
-        console.log(panelResult);
-
         panelResult.done(fileInfo => {
           console.log(fileInfo);
           this.$emit('link-change-url', fileInfo.cdnUrl, this.index)
         });
 
         panelResult.progress(p => {
-          console.log(p);
         });
 
         panelResult.fail(uploadResult => {
-          console.log('fail');
-          console.log(uploadResult);
         });
       });
-
-      function openImagePanel(panelElement) {
-        return uploadcare.openPanel(panelElement, null, {
-          tabs: ['file'],
-          publicKey: '78212ff39934a59775ac'
-        });
-      }
     },
     computed: {
       previewUrl: function() {
-        console.log(this.value);
         if (this.value && this.value.url) {
           return this.value.url + '-/preview/200x200/';
         }