The file input modification event is disregarded if the identical filename is selected for upload

In my Vue.js application, I am utilizing Vuetify's v-file-input component. The file uploaded is connected to formData.file and its validation is controlled by the rules prop.

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
/>

When I upload a file like /tmp/foo.txt, everything functions as expected. However, if I modify the content of this file and attempt to upload it again, the fileValidationRules are not executed.

Evidently, this occurs because Chrome doesn't trigger the change event when the file name remains the same. Is there a way for me to overcome this issue so that each file selected by the user gets bound to formData.file and triggers fileValidationRules?

javascriptvue.jsvuetify.js

Answer №1

To reset the input's value and trigger the onchange event regardless of the selected path, set the input's value to null upon each onclick event.

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

Answer №2

If you want to clear the value of a file input, you can set it to null.

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
  ref="file"
/>

onClick() {
   this.$refs.file.value = null;
}

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

Tips for accessing variables from the _.map function

My code involves working with the results from a callback function in the underscore library. However, when I try to log the results using console.log, I keep getting an undefined variable error. Here is the snippet of my code: var newMenu = _.map(this.s ...

javascriptnode.jsreactjsunderscore.js

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

javascriptphphtmlforms

Retrieving Form Validation State using Vue.js and Element UI

https://i.sstatic.net/Onc72.gif Instructions to Replicate The link for the recurring issue can be found here: https://stackblitz.com/edit/typescript-vuejs-element-3kko7a password input 2 username input 11 Change username to 2// should be able to submi ...

vue.jsvuejs2element-ui

Utilizing commas in JavaScript

Hi everyone, I'm having an issue with printing the message "Invalid password, Must Contain:". The problem I'm facing is that when I write the code in JavaScript, the comma is being interpreted as an operator instead of a regular English comma. Th ...

javascripthtmlasp-classic

Convert HTML templates into JavaScript on the client side using Angular framework along with Browserify, Babel, ES2015, and Gulp

Having trouble with my Browserify Angular configuration file, specifically when using require() to load HTML templates. I attempted to use stringify or browserify-ng-html2js in the transform() function, but it resulted in multiple transform calls in my gul ...

javascriptangularjsgulpecmascript-6browserify

Troubleshooting inactive CSS hover animation

Greetings! I'm facing an issue with a CSS hover animation. Here are two demos I've created: In the first DEMO, the animation works perfectly. However, in the second DEMO, it doesn't seem to be functioning. On the second demo, there are two ...

javascriptjquerycss

The fixed blocks are covering the Blueimp gallery within the relative container

Check out this DEMO I created to showcase something interesting. In this demo, you will find a basic example of setting up a blueimp gallery, a navigation bar, and a button. <div class="nav">nav</div> <div class="wrapper"> <div id ...

javascripthtmlcssimage-gallery

What is the best Document Object Model (DOM) to utilize alongside Spider

I want to incorporate the GoogleMaps JavaScript library into SpiderMonkey using the python wrapper, but the absence of a DOM is hindering my progress. Is there a method to inject a DOM into this setup in order to successfully make it function? ...

javascriptpythondomspidermonkey

Scroll the table automatically when the currently selected row is the second-to-last row

Having trouble with a scrolling table issue. https://i.sstatic.net/PFyN3.png Upon page load, the first row (ROW 1) is automatically selected and highlighted. Clicking the next button selects and highlights the subsequent rows. However, once ROW >= 8 (e ...

javascriptjqueryhtmlcssangularjs

<dt> and <dd> have not been added after the previous element

I can't seem to figure out why the dt and dd elements are not being added to the dl I created. Here's my initial attempt: // Dictionary list var words = [ { term: "Procrastination", definition: "Pathological tendency to s ...

javascripthtml

What is the best way to showcase data from input fields within a bootstrap modal dialog?

After the user has entered their details and clicks submit, I would like to present the information in a Bootstrap modal with a confirmation button below. This serves as a preview of the data before it is saved to the database. Here's what I have so ...

javascriptjqueryhtmltwitter-bootstrap

Struggling to adjust the dimensions of a React Barcode to the specified width and height?

I've encountered an issue with resizing the React Barcode Image. I prefer all barcodes to have a width of 200px and a height of 100px. From what I understand, the width of the barcode will expand when the length value increases. Below is my current co ...

javascriptreactjs

Navigating using Javascript library in Angular 2 framework

I am currently utilizing Parse, an external JS library, within Angular JS 2. Nevertheless, I am encountering issues when attempting to call the function gotoMain() from within a callback function of Parse. It appears that certain elements are not being l ...

javascriptparse-platformangular

Stripe: Either a source or customer must be provided

I've been working on incorporating Stripe into my online shopping cart project, but I've hit a roadblock. Whenever I try to submit the checkout form, I keep encountering the error message: "Must provide source or customer." I suspect there might ...

javascriptnode.jsmongodbstripe-payments

Ways to delete a particular query parameter from a URL in Next.js

http://localhost:3000/?search=test&type=abc&category=xyz When searching for "test" along with the type and category, the URL changes accordingly to the link provided above. return router.push( { pathname: `/`, query: { ...

javascriptreactjsnext.js

Unusual behavior of middleware in express 4 causing a strange dynamic effect

I've encountered an issue where a dynamically created middleware in an Express 4 route is not getting called and causing a timeout. 'use strict'; var bodyParser = require( 'body-parser' ); var logger = require( './logger&apo ...

javascriptnode.jsexpress

Jpicker is renowned for its transparency feature

I am currently using the Jpicker jpicker-1.1.6.js script which can be found at Below is a snippet of my code: <script type="text/javascript"> $(function() { $.fn.jPicker.defaults.images.clientPath='/img'; var ...

javascriptjquery

Curved lines on canvas

I am currently using the stroke and path features in the canvas to create two lines, with the intention of giving them a curved, wave-like effect. I would like to achieve this without having to create an actual image in Photoshop. Is there anyone who can ...

javascripthtmlcanvas

The findIndex method is failing to retrieve the accurate index

The index returned by findeIndex in an express router function is incorrect. module.exports.nearestOffices = (req, res, next) => { Order.findById(req.params.idOrder).exec() .then(order => { return Promise.all([ Promise.resolve(or ...

javascriptarraysnode.jsexpressmongoose

What steps should I take to optimize the performance of this code by implementing rate-limiting for its execution speed?

As I pondered the task at hand, I realized that using a sleep function might be beneficial. However, Javascript lacks a built-in sleep function. How can I tweak this process to avoid hitting a Parse rate-limit? My goal is to execute one (1) Parse.Cloud.ru ...

javascriptparsingsleep