<!-- 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>

  <upload-dropzone v-show="showDropzone"

                   :options="options"

                   :on-update="onFileListChanged"

                   :on-complete="onFilesUploaded"

                   width="600px"

                   height="375px">                  

  </upload-dropzone>

  <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,

    showFinishButton: true

  }

​

  Vue.createApp({

    components: {

      UploadDropzone

    },

    data() {

      return {

        title: "",

        files: [],

        showDropzone: true,

        options

      };

    },

    methods: {

      onFileListChanged(event) {

        console.log("On update:");

        console.log(JSON.stringify(event));

      },

      onFilesUploaded(files) {

        if (files.length === 0) {

          this.title = "No files selected.";

        } else {

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

          this.files = files;

        }

        this.showDropzone = false;

      }

    }

  }).mount('#root')

</script>