[Vuejs]-How to make file upload Buefy component x% width and height?

by

0👍

This is a css problem, or buefy problem.
You have to add css to your page, you can add it in the head but you should use external css file and import it in your page.

So to solve your problem, just add this in your head:

.upload {
   width: 100%;
}
.upload-draggable {
   width:100%;
   height: 100vh;
}

Complete example with your code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
    <style>
    .upload {
      width: 100%;
    }
    .upload-draggable {
      width:100%;
      height: 100vh;
    }
    </style>
</head>

<body>
    <div id="app">
        <!-- Buefy components goes here -->

          <section>
          <b-field>
              <b-upload v-model="dropFiles"
                  multiple
                  drag-drop
                  >
                  <section class="section" style="width:100%">
                      <div class="content has-text-centered">
                          <p>
                              <b-icon
                                  icon="upload"
                                  size="is-large">
                              </b-icon>
                          </p>
                          <p>Drop your files here or click to upload</p>
                      </div>
                  </section>
              </b-upload>
          </b-field>

          <div class="tags">
              <span v-for="(file, index) in dropFiles"
                  :key="index"
                  class="tag is-primary" >
                  {{file.name}}
                  <button class="delete is-small"
                      type="button"
                      @click="deleteDropFile(index)">
                  </button>
              </span>
          </div>
      </section>

    </div>

    <script src="https://unpkg.com/vue"></script>
    <!-- Full bundle -->
    <script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

    <!-- Individual components -->
    <script src="https://unpkg.com/buefy/dist/components/table"></script>
    <script src="https://unpkg.com/buefy/dist/components/input"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
              dropFiles: []
            },
            methods: {
              deleteDropFile(index) {
                this.dropFiles.splice(index, 1)
            }
        }
        })
    </script>
</body>
</html>

Leave a comment