gistfile1.js

<template>
  <div class="col-lg-3 d-none d-xl-block">
    <!-- <img src="https://place-hold.it/180x238/666/fff/000.gif" class="img-responsive" alt> -->
    <vue-transmit
      ref="vtransmit"
      :uploadMultiple="false"
      v-bind="options"
      @success="onUploadSuccess"
      @processing="prepURL"
      :url="uploadURL"
      method="GET"
    >
      <h3 class="text-center">Træk og slip et billede for at uploade</h3>
    </vue-transmit>
  </div>
</template>



<script>
import api from "@/utils/api";

export default {
  data() {
    return {
      uploadURL: "",
      options: {
        acceptedFileTypes: ["image/*"],
        clickable: false,
        accept: this.accept,
        uploadMultiple: true,
        maxConcurrentUploads: 4,
        adapterOptions: {
          timeout: 3000,
          method: "get",
          errUploadError: xhr => xhr.response.message
        }
      }
    };
  },
  methods: {
    onUploadSuccess(file, res) {
      console.log("inside upload success");
      //console.log($refs.vtransmit);
    },
    // onProcessingFile(file) {
    //   console.log("inside processing");
    //   console.log(this.$refs.vtransmit);
    //   this.$refs.vtransmit.url =
    //     "https://s3.eu-central-1.amazonaws.com/fguplaner.public.images/student_profile/1.png";
    //   //this.$refs.vtransmit.method = "POST";
    //   //this.console.log(file.name);
    // },
    prepURL(file) {
      var vm = this;
      // Use your own dynamic logic. This just adds query params from the file.
      api
        .get("http://localhost:3000/student_profile_image_uploads/new", {
          filename: file.name
        })
        .then(response => (vm.uploadURL = response.data.fields.key));
      //this.uploadURL = "http://example.dk/snehund";
    }
  }
};
</script>


<style>
@import "~vue-transmit/dist/vue-transmit.css";
</style>