Activate the b-form-file function by selecting the b-button

Working with BootstrapVue, I am trying to trigger my b-form-file after clicking on a b-button for style reasons. Additionally, I want the b-form-file to be hidden so it is not visible.

I attempted the following approach, but it did not work for me:

<b-button variant="danger" @click="$refs.upload.click()">Upload</b-button>
<b-form-file ref="upload"></b-form-file>

If you have any ideas on how I can solve this issue without using jQuery code or regular HTML input elements (I need to use b-form-file), please share your thoughts. Thank you!

-> I want to avoid jQuery code and cannot use base HTML input - I need to utilize b-form-file

javascriptvue.jsvuejs2bootstrap-vue

Answer №1

If you need to create a method for clicking on a button, here is an example:

<b-button variant="danger" @click="open">Upload</b-button>
<b-form-file id="upload"></b-form-file>

<script>
     export default {
          methods: {
            open: ()=> {document.getElementById('upload').click()},
          }
     }
</script>

Answer №2

<b-form-file 
    ref="signatureFile" 
    @input="validate(signature)" 
    accept=".jpeg, .jpg, .png"
    v-model="signature" 
    class="d-none" 
    plain
></b-form-file>

<b-button  
    @click="$refs.signatureFile.$el.click();" 
    variant="tertiary"
>
    {{ Signature ? Signature.name : 'Choose File' }}
</b-button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating a Script into Your NextJS Project using Typescript

I've been trying to insert a script from GameChanger () and they provided me with this code: <!-- Place this div wherever you want the widget to be displayed --> <div id="gc-scoreboard-widget-umpl"></div> <!-- Insert th ...

javascripttypescriptnext.js

The issue with combining Laravel 5.4 event broadcasting and Vue.js has been a challenging obstacle to

Looking to set up a chat system using Laravel 5.4, Vue.js, and Pusher API with Echo. I have tried twice to establish communication with Pusher, but I haven't received any callbacks in my Vue component. I am working locally with MAPM. I have installed ...

phplaravelvue.jspusher

"Using only JavaScript to target and manipulate child elements within the

I'm currently transitioning from using jQuery to pure JavaScript, and I've just started but am encountering difficulties. Specifically, I am unsure how to select child elements in the DOM. <div class="row-button"> <input type="submi ...

javascript

How come my form isn't functioning properly on mobile devices?

I recently downloaded a form from the website and integrated it within my desktop site successfully. However, when accessed on mobile devices, specifically iOS, the submit button changes to "sending ..." and the form gets stuck without displaying any erro ...

javascriptphpajaxforms

JavaScript is experiencing an error where it cannot define a function, rendering it unable to generate a JSON object due to its inability to recognize that the

I've created a JavaScript script function that holds cart items for ordering food. This function takes two parameters: ID and price. Here is a snippet of my script file: <script> function addtocart(mitem, mprice) { var price = ...

javascriptdjangodjango-templates

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

javascriptjquerycsstypescript

Error 504: The timeout issue occurred during an ajax call

When I make an ajax call to process a large amount of data and then reload the page upon success, I encounter a 504 Gateway Timeout error. The ajax call is initiated with the following parameters: $.ajax({ type:'POST', cache:false, a ...

javascriptajax

Increase the gap between the legend and the chart when utilizing charts.js

I'm currently working on a project using charts.js and running into a slight issue. The legend for my bar chart is overlapping with the values displayed. I've been attempting to troubleshoot this problem without much success so far, so I would g ...

javascriptchart.js

Create a custom Android home screen widget using JavaScript or another programming language

I have a project in mind to create an Android App and include a home-screen widget. While I know it can be done with Native Android, my preference is to use JavaScript for development. Would anyone happen to know of any other solutions that allow the use ...

javascriptvue.jsandroid-widget

The Jqueryui image link is not displaying the image despite no error being reported

Can anyone help me figure out what I'm missing? I'm currently working with ASP.NET MVC 5 and have downloaded the JqueryUI combined via Nuget package. Despite no error references for css/js files, the close button is still not showing in the ima ...

javascriptjquerycssasp.net-mvcjquery-ui

Matching dynamic routes with a slug and number in vue.js is a powerful feature that

Seeking assistance with creating a route pattern for eShop product slugs. The URLs in question are as follows: http://example.com/product/product-title-51 http://example.com/product/another-product-title-137 http://example.com/product/another-product-45-t ...

vue.jsvuejs2vue-router

The Angular directive ng-if does not function properly when trying to evaluate if array[0] is equal to the string value 'Value'

In my code, I want to ensure that the icon is only visible if the value at array index 0 is equal to 'Value': HTML <ion-icon *ngIf="allFamily[0] === 'Value'" class="checkas" name="checkmark"></ion-icon> TS allFamily = [ ...

javascriptangulartypescript

What is the best way to use jQuery to update the color of an SVG shape?

Hello everyone! I'm excited to be a part of this community and looking forward to contributing in the future. But first, I could really use some assistance with what seems like a simple task! My focus has always been on web design, particularly HTML ...

javascriptjqueryhtmlcsssvg

Scrape data from websites where the main URL remains constant but the information in the table varies

If you take a look at this link, you'll notice that when the next page is selected, the table on the website gets reloaded with new content without any change in the URL. Even after inspecting the developer tools > Network > XHR, it's difficult t ...

javascriptpythoncssajaxparsing

Tips for preventing the need to re-render every child component generated by the v-for directive

Here is a paragraph about the list of child components: <question-list-item v-for="(item, index) in questionListParsed" :key="item.id" :both-question="item" :class-id="classId" ...

vue.jscomponentsvue-componentvuexv-for

Customized function enabling dynamic menu display based on varying screen dimensions

Looking for assistance with JS and jQuery as I am relatively new to it. Any help would be greatly appreciated... I'm currently working on a responsive header where I want to implement onclick functions for mobile and tablet resolutions only. I' ...

javascripthtmljquerycssjquery-events

Is it no longer possible to export static pages in Next.js 14?

I'm currently experiencing a problem where my CSS styles are not being exported when I try to convert my project into static HTML pages. Here is the configuration in my next.config.js file: ** @type {import('next').NextConfig} */ const next ...

javascriptnext.js

React's Conditional Rendering

Let's imagine having these initial conditions: this.state = {plans: [], phase: 'daybreak'} along with a dynamic JSON object fetched from an API containing various schedules that may change periodically, for example: plans = {"daybreak": " ...

javascriptarraysjsonreactjsreact-native

Creating personalized Stop and Play controls for Swiper.js Autoplay feature in a React/Next project

My quest to create a Swiper in React with autoplay functionality using Swiper.js has been quite a challenge. Despite following the instructions diligently and researching extensively, I couldn't find a solution. I even tried referencing a jQuery examp ...

javascriptreactjsnext.jsswiper.js

Removing an event from Fullcalendar

With the help of a post on StackOverflow, I managed to modify my select: method to prevent users from adding an event on a date before NOW. However, there is a drawback. When a user clicks on an empty time slot and the system displays an alert message, th ...

javascriptjqueryfullcalendar