When I upload a file using v-file-input, it displays two names

While working with nuxt, I made an interesting discovery. See the pattern here

The top name is the file that was uploaded, and the bottom one is the target file name. I plan to remove the bottom name and replace it with the top. This is what I envision: Expect this new pattern

My main question is how can I change the filename in the input tag after it has been uploaded.

Answer №1

Check out the code snippet below:

<input type="file" @change="uploadFile" ref="fileInput" />

You can remove the label and it should function as intended.

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

Mongooses do not clutter the array with unnecessary lines

I need help generating a sorted list from the database. Here is my current code: const subs = await Sub.find({}, {userName: 1, score: 1, _id: 0}).sort({ score: 'desc' }); The output I am getting looks like this: { userName: 'test1', ...

Using dynamic variables in the $.getJSON function

This specific inquiry represents my current goal, with an added layer of complexity. My aim is to streamline the process by creating a single 'fetchData' function in my VueJS project that can retrieve multiple JSON files without duplicating code ...

Displaying HTML with AngularJS dynamic data-binding

Here is a sample view: <div ng-show=""> <div style='background-color: #13a4d6; border-color: #0F82A8'> {{headerdescription}} <div style='float: right'>{{price}} $</div> </div> <div style=&apos ...

html css javascript, Is it possible to execute a script before a webpage finishes loading?

My current setup is similar to a lightbox feature, but I'm facing an issue where the script waits for the entire webpage to load before running. Is there a way to ensure that my script runs first without waiting for the webpage to fully load? CSS: # ...

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

I am experiencing some issues with full screen divs that overlay each other on scroll and a background image. When scrolling back to the top in Chrome, the background shifts down slightly, and in Safari, the same issue occurs when scrolling down. I have cr ...

One way to showcase a single piece of data without the need for looping is by utilizing the `

I am encountering an issue. Why does the insertAdjacentHTML("afterend") output keep looping? I only want to display "1" once, not repeatedly. var btn = document.getElementById("btnClick"); btn.addEventListener("click", function (e) { e.preventDefaul ...

Performing AJAX requests within loops using Javascript can be a powerful tool

Utilizing jQuery to make an AJAX request and fetching data from a server. The retrieved data is then added to an element. The goal is for this process to occur 5 times, but it seems to happen randomly either 3, 4, or 5 times. Occasionally, the loop skips ...

Is it possible for Vue to retrieve refs on mounted during nextTick following the dynamic import of the component?

Utilizing Nuxt js and Element UI, I have dynamically imported Element UI plugins in the plugins folder. export default () => { Vue.component("ElForm", () => import("element-ui/lib/form")); Vue.component("ElFormItem", ...

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

My HTML page consists of 2 div blocks and 2 links. I want to open the content of the first div in a new window when the first link is clicked, and the content of the second div in another new window when the second link is clicked. You can find the code h ...

"Challenges Arising in Deciphering a Basic JSON Array

After countless attempts, I am still struggling to solve this issue. My PHP code is functioning properly, as it returns the expected data when "Grove Bow" is selected from the dropdown menu: [{"wtype":"Grove Bow","was":"1.55","wcc":"5","wbdmin":"12","wbdm ...

Tips for handling binary data retrieved from a SQL query (such as LONGBLOB type) in node.js

I am trying to send binary data to the client using node.js, but I have encountered a limitation where write can only send string or Buffer. How can I successfully send binary data to the client? dbconnect.selectBinary(conn,function(result) { //resul ...

Sending a javascript variable to an angularjs scope

Currently, I am utilizing Flask to render an HTML template and wish to transfer the variable add_html_data, which is passed via Flask's render_template, to the scope of an AngularJS controller. I have attempted the following: <body> <di ...

Tabbed horizontal slider

I am trying to combine two scripts in order to create a tab-based system with a scrollbar located at the bottom of the content. I have merged the following Ajax tabs: with this slider: However, when I open the slider's tab, I am unable to move the s ...

The system is unable to locate the command "nvm"

Lately, I've been experimenting with using nvm to manage different versions of node. After successfully installing nvm on my Mac OS Catalina(10.15.6), I was able to easily switch between versions through the terminal. However, when attempting to do t ...

Cypress - A Guide to Efficiently Waiting for the Outcome of a Javascript Function Import

I am interested in creating a Javascript library to act as a wrapper for 3rd party APIs. I have decided to write the API wrapper as a standalone file rather than using Cypress Custom functions, so that I can share the library with teams who are not using C ...

Triggering an Ajax call for form validation only occurs when the form is not validated

I am struggling with a simple form that has an Ajax call, but the ajax call gets executed even if the form is not validated. In the code snippet below, the line console.log("This line should execute only if Form is validated"); gets executed when the form ...

Switch the hue when altered

My document contains various input elements such as text, radio buttons, and checkboxes. I want each of these elements to change color when a change is made. This is the method I am currently using: $("document").on('click', 'change', ...

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...

What is the best way to pass the text of a selected option in a dropdown menu to a function when a button is clicked in AngularJS?

Alright, so I've got this HTML page with a select element. The select has three options defined in the $scope below: <div id="mainID" ng-controller="theController"> <form name="assetTypeForm" class="form-horizontal" role="form" novalidat ...

Is there a way to split a <v-carousel-item> within a <v-carousel> component into two columns using Vuetify?

I am looking to incorporate this carousel design into vuetify3. How should I go about it? https://i.stack.imgur.com/XQXOC.jpg ...