The challenge of implementing a file input button in Vuejs

Having trouble using a button to trigger the input file? Every time I click on the button, it redirects me to http://localhost:3000/availability?vue-file-input= instead of opening the file selector. Can someone please help me identify where I have made a mistake?

<div class="vue-file-wrapper">
 <button class="vue-button" @click="document.getElementById('fileInput').click()">Choose&nbsp;File
 </button>
 <div>{{ filename }}</div>
 <input
   type="file"
   ref="file"
   style="display:none"
   name="vue-file-input"
   id="fileInput"
   :disabled="user.availability"
   @change="onFileSelected"
 >
</div>
javascriptvue.js

Answer №1

Instead of manipulating the DOM directly, consider using Vue Refs for a more efficient solution:

<div class="vue-file-wrapper">
  <button class="vue-button" @click.prevent="$refs.file.click()">Choose&nbsp;File
  </button>
  <div>{{ filename }}</div>
  <input
    type="file"
    ref="file"
    style="display:none"
    name="vue-file-input"
    id="fileInput"
    :disabled="user.availability"
    @change="onFileSelected"
  />
</div>

To see this in action, check out the demonstration on jsfiddle: https://jsfiddle.net/Lgc5rnzs

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

What is the process for including parameters in a javascript/jquery function?

This unique script enables you to click on a specific element without any consequences, but as soon as you click anywhere else, it triggers a fade-out effect on something else. Within the following code snippet, you can interact with elements inside $(&apo ...

javascriptjqueryparametersparam

Issue encountered while trying to import firebase-functions-test for testing using mocha

I've been attempting to configure a Firebase Cloud Functions repository for running mocha tests. However, I keep encountering an error when utilizing import * as firebase from "firebase-functions-test"; or const firebase = require("fire ...

javascripttypescriptfirebasegoogle-cloud-functionsmocha.js

No output from JavaScript loop when trying to print an array

I've been looking all over the place and haven't been able to find a pure JavaScript solution for my problem that I can implement into my code. The issue involves a script that is meant to display an array of images, but currently it only display ...

javascriptarrays

Trigger $.ajax upon submission of an HTML form

When my HTML form is submitted, I want to make use of $.ajax. Currently, I am able to determine the form submission using .submit(). However, when I place the $.ajax within the .submit() function, it does not execute as expected. In contrast, if I move th ...

javascriptjqueryajaxforms

The onmouseout event is triggered when the mouse leaves a table row or cell

My image has an onmouseover function that displays a table with options over the image (dimming the image). The table also has an onmouseout function to hide the table and show the image again. The issue I'm facing is that when the mouse moves between ...

javascripthtmlcss

I am interested in creating a ranking system in JavaScript using JSON data based on points

I have a desire to create the following: var users = {jhon: {name: 'jhon', points: 30}, markus:{name: 'Markus', points: 20}}; // I want it to return like this 1. Jhon with number of points: 30 // 2. Markus with number of points: 20 ...

javascriptjson

The concept of transparency in Internet Explorer 8 stands out in

Has anyone been able to achieve transparency in IE8 for the foreground color, not just the background color? I've tried various solutions but they all seem to focus on the background color. I need the transparency effect for user-generated colors, so ...

javascripthtmlcssinternet-explorer-8opacity

Is it possible to utilize relative paths with webpack dev server in React JS projects?

While running the development server on localhost:3000 using npm run start, everything functions as expected. I am utilizing react-scripts and have not ejected the react app. Currently, my goal is to configure the dev server behind a reverse proxy so that ...

javascriptreactjswebpackreverse-proxyreact-scripts

Changing the source value of a video according to the selected option in a dropdown selection

Trying to dynamically update the src attribute of a video tag based on the selected option in a select box. Here's my code: <video src="default.mp4" id="videobox">Your browser does not support the video tag.</video> <select id="test"& ...

javascriptjqueryhtmlvideo

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

I've implemented this lengthy jQuery script to enable dynamic dropdown loading and updating when selections are changed. However, I'm facing issues in Internet Explorer where the script loads the dropdowns initially but doesn't trigger oncha ...

javascriptjqueryhtml

The Kendo grid row mysteriously vanished while trying to edit it immediately after inserting a new row

I have configured a Kendo grid in the following manner, but I am encountering an issue where after adding a row, it disappears when I attempt to edit it before sending the changes to the server. However, upon refreshing the page, the row reappears. Any i ...

javascriptkendo-uikendo-grid

Setting a specific 30-second interval for the datetime on the y-axis in Highcharts JS

I need to create a graph where the y-axis represents time in 30-second intervals, ranging from 2:00 to 5:30. The data I have is in seconds and I want to display it on the graph accordingly. I came across an example that displays time in hours and minutes, ...

javascriptangularhighchartsecmascript-6

What is the best way to pass the output of one grunt task to another grunt task?

I'm uncertain if grunt is capable of accomplishing this task. I have two grunt tasks that need to be executed. The first one involves creating a mock post, while the second one requires running the penthouse task to inline CSS. Any unconventional meth ...

javascriptnode.jswordpressgruntjsgrunt-exec

Can someone explain how to trigger a JavaScript confirmation dialog box before the page loads in an ASP.NET application?

Below is the server side code snippet I am using: protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack == false) { string confirmValue = Request.Form["confirm_value"]; if (confirmVal ...

javascript.net

Significant increase in response time observed after 3 minutes of inactivity on the Web API

I've encountered a peculiar issue in both my preproduction and production environments (but not in development). My website performs various operations on a Web Api that is hosted on the same IIS server. Typically, a specific POST request is process ...

javascriptsqlajaxiisasp.net-web-api

Use the forEach method to replicate the functionality of the map function

Attempting to replicate the functionality of array.map() using forEach(). var map = function () { var empMap = []; numbers.forEach(function (number) { empMap.push(number); console.log('empMap', empMap); }); return(empMap); } var ...

javascriptarraysforeach

sending data from a callback to an express router

As I embark on learning node.js, I've encountered a challenging issue. In my passportAuth.js file, I create a user and have a callback to ensure the user is created successfully. The code snippet looks something like this: req.tmpPassport = {}; var ...

javascriptnode.jsasynchronousexpress

When the cancel button is clicked, the collapse attribute ceases to function

Check out this code snippet containing a button and a div: <button id="button2" class="btn btn-success btn-block" type="button" data-toggle="collapse" data-target="#collapseGroupTwo" aria-expanded="false" aria-controls="collapseGroupTwo"> <sp ...

javascriptjqueryhtmlcss

The resolution of the Ajax call promise remains elusive

When I make an AJAX call to a REST API in my JavaScript code, the purpose is to fetch a JSON file. The structure of the AJAX call resembles something like this: $.ajax(ajaxObj).then(function(response) {}).catch(function(err) {}); The network monitor refl ...

javascriptjqueryjsonajaxdebugging

What is the best way to position a container div over another container using Bootstrap or CSS?

https://i.sstatic.net/q1qGi.png I'm working on a Bootstrap 4 layout where container B needs to overlay part of container A. I want to achieve a design where container B appears on top of container A. Any suggestions or references on how to achieve th ...

javascripthtmlcssbootstrap-4