<!-- Vue Template -->

<div id="root" class="container">

  <h1 v-html="title"></h1>

  <p v-for="file in files" :key="file.fileUrl">

    <a :href="file.fileUrl" target="_blank">{{ file.fileUrl }}</a>

  </p>

  <button v-show="showButton" @click="uploadFile">Upload file...</button>

  <a class="developed_by" href="https://www.bytescale.com/docs/upload-widget/vue" target="_blank">

    Powered by Bytescale

  </a>

</div>

​

<!-- Vue Libraries -->

<script src="https://unpkg.com/vue@3"></script>

<script src="https://js.bytescale.com/upload-widget-vue/v4"></script>

​

<!-- Vue Script -->

<script>

  // ---------------------------

  // Configuration

  // See: https://www.bytescale.com/docs/upload-widget#configuration

  // ---------------------------

  const options = {

    apiKey: "free", // Get API keys from: www.bytescale.com

    maxFileCount: 10

  }

​

  Vue.createApp({

    methods: {

      uploadFile(event) {

        openUploadModal({

          options,

          event,

          onComplete: (files) => {

            if (files.length === 0) {

              this.title = "No files selected.";

            } else {

              this.title = "File(s) uploaded:";

              this.files = files;

            }

            this.showButton = false;

          }

        })

      }

    },

    data() {

      return {

        title: "",

        files: [],

        showButton: true

      }

    }

  }).mount('#root')

</script>