Search code examples
vue.jsbootstrap-4bootstrap-vue

Vuejs: How to edit name and insert icon in b-form-file

I'm doing vuejs frontend. And now I'm getting to the file uploading part. I use <b-form-file> :

<b-form-group>
  <b-form-file
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
  />
</b-form-group>

enter image description here

Now I want to change the name Browse to Upload and want to insert an icon in it. The work I did was to put name and label and icon inside b-form-file but it still won't change the name and insert the icon :

<b-form-group>
  <b-form-file
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
    name="Upload" // or label
    label="Upload"
    icon="download"
  />
</b-form-group>

Is there a way to modify name and insert icon inside b-form-file ? I can tweak the CSS to change it but it's not really good to do so. Please help me how to handle this case. Thanks.

Solution

  • Customize File Input

    Change default labels and design

    b-form-file Properties - Bootstrap-Vue Docs
    b-form-group Properties - Bootstrap-Vue Docs

    Can change text of button with browse-text property on b-form-file.

    <b-form-group label-cols-sm="2">
  <b-form-file id="file-default" browse-text="Your Browse Here"></b-form-file> <!-- HERE -->
</b-form-group>

    Can change text of label with label property on b-form-group.

    <b-form-group label="Your Label Here" label-cols-sm="2"> <!-- HERE -->
  <b-form-file id="file-default"></b-form-file>
</b-form-group>
    Prepend, Append content (icons, etc.)

    b-input-group Properties - Bootstrap-Vue Docs

    Can use template #prepend and template #append

    <b-input-group>
  <template #prepend>
    <b-input-group-text>Your Content before input</b-input-group-text>
  </template>
  <b-form-input></b-form-input>
  <template #append>
    <b-input-group-text>Your Content after input</b-input-group-text>
  </template>
</b-input-group>

    Example

    new Vue({
  el: '#app',
  data() {
    return {
      file: null
    }
  }
})
    <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
/>
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
/>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form-group label="Your Label Here" label-cols-sm="2">
    <b-input-group>
      <template #prepend>
        <b-input-group-text><i class="fas fa-cloud-upload-alt"></i></b-input-group-text>
      </template>
      <b-form-file id="file-default" browse-text="Your Browse Here"></b-form-file>
    </b-input-group>
  </b-form-group>
</div>