What is the best method to place files from a file input into an array in the Firefox browser?

(I am using Vue 3) I have a functionality where I add files from an input file to an array, and then conditionally render these file names. Everything works perfectly on Chrome, but I encountered an issue with Mozilla Firefox. In Firefox, the array of files gets overridden by the last added file. For example:

  1. add file-1 || output: file-1
  2. add file-1 and then file-2 || output: file-1 file-1 (duplication).

If you'd like to view and test the code, you can do so here: https://codesandbox.io/s/elegant-poitras-exux2z?file=/src/App.vue
method:

methods: {
addFile (file) {
  this.form.files.push(file);
}}

Data structure:

  data() {
    return {
      form: {
        files: [],
      }};},

Output:

<div>
<input @input="addFile($event.target.files)" type="file" name="" id="">
<p  v-for="file in form.files" :key="file">
            {{ file[0].name }}
</p>
</div>
javascriptvue.jsfirefoxvuejs3

Answer №1

Here's a solution for you

methods: {
    addFile(file) {
        this.form.files.push({ ...file });
    }
}

The issue seems to be that $event.target.files may not be a new object each time addFile($event.target.files) is called

If you modify your code like this, you'll notice the difference

methods: {
    addFile(file) {
        if (this.form.files.length) {
            console.log(this.form.files[0] === file)
        }
        this.form.files.push(file);
    }
}

While this behavior is observed in Firefox 103, it changes in Firefox 104 (development version) where the result is false

Alternatively, you can try this approach

<p v-for="file in form.files" :key="file">
  {{ file.name }}
</p>

methods: {
  addFile(file) {
    this.form.files.push(file[0]);
  },
}

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

"Enhancing Forms with Multiple Event Listeners for Seamless Sub

I'm working on creating a countdown timer with 3 buttons for controlling the timer: start, cancel, and pause. The timer itself is a text input field where you can enter a positive integer. I need to use core JavaScript, not jQuery Start Button: Init ...

javascripthtmlformsdomweb

Spinning Earth orbits around the Sun

My goal is to create a 3D Solar system, starting with the Sun and Earth using THREE.SphereGeometry() var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(50, 100, 100), new THREE.MeshBasicMaterial({side: THREE.DoubleSide, map:txt2})); sphere2.position.se ...

javascripthtmlmaththree.js

How is it possible that the SetTimeout code continues to run even after calling clearTimeout

I have this code snippet within my react component: //some code var timeout = null; //global variable //some more code useEffect(() => { if(...some condition) { console.log('test1'); timeout = setTimeout(() => { ...

javascriptreactjs

Filtering data based on the model in React Native allows you to refine and organize

This code snippet represents a modal that contains two custom dropdown components, a text input, and a button. When the button is clicked, it filters data from an API. Currently, I am struggling to create a functional filter function despite multiple atte ...

javascriptreactjsreact-native

Single input results in array output

I have a pair of items in this array list. $.each(data.recalls,function(i) { var recall = data.recalls[i].nnaId; var description = data.recalls[i].remedyDescription; console.log(recall); console.log(description); $('textarea[name= ...

javascripthtmlarrays

Creating an inline function in JavaScript for an anchor tag

I'm attempting to open a new window with a specific URL while also sharing the current page's address through an inline function. Here's what I have so far: a href="javascript:void(0);" onClick='(function() { var link = string.conc ...

javascriptinline

multer error: req.file is not defined

I am facing an issue while trying to send a file using axios from my Vue.js to my Node.js. The problem is that the req.file parameter always remains undefined. Here is a simplified version of the code from my Vue component: Inscription.vue : <template& ...

vue.jsexpressmulter

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

javascriptjqueryhtmlcssjson

Troubleshooting Next.js 14.1 Pre-rendering Issue: A Step-by-Step Guide

I just updated my Next.js from version 14.01 to 14.1 and encountered an error during the build process of my application. How can I resolve this issue? The error message reads as follows: Error occurred while prerendering page "/collections". For more inf ...

javascriptreactjstypescriptnext.js

Dividing an array into categories with typescript/javascript

Here is the initial structure I have: products = [ { 'id': 1 'name: 'test' }, { 'id': 2 'name: 'test' }, { 'id' ...

javascriptarraysjsontypescript

Exploring the Vue router and lifecycle hooks for components

Encountering perplexing behavior with the Vue router and looking for insights. Check out this sample code: // main.js import Vue from "vue"; import Router from "vue-router"; import FirstPage from "@/components/FirstPage"; imp ...

vue.jsvue-router

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

javascriptjqueryhtmlcss

What could be causing the inconsistency in the success rate of my Get request, with it working occasionally but returning a

Why is it that my Get request works on occasion, but most of the time it returns a 404 error? I've been experimenting by removing the "next()" function, but it doesn't make a difference. I've also tried placing "res.json(req.user.firstName) ...

javascriptnode.jsreactjsexpresspassport.js

Unable to execute a JavaScript function when triggered from an HTML form

This is the code for a text conversion tool in HTML: <html> <head> <title> Text Conversion Tool </title> <script type="text/javascript"> function testResults(form) { var str = form.stringn.value; var strArray = str.split(" ...

javascripthtmlformsfunction

Trigger function in React after the page finishes loading

I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach: componentDidMount(){ this.props.photos.forEach(picture => ...

javascriptreactjs

Can you explain to me the syntax used in Javascript?

I'm a bit puzzled by the syntax used in this react HOC - specifically the use of two fat arrows like Component => props =>. Can someone explain why this works? const withLogging = Component => props => { useEffect(() => { fetch(`/ ...

javascriptreactjstypescript

What is the process for deploying a Vue app in a production environment?

Looking for guidance on deploying a Vue app in production? I've built the frontend of my project with Vue, and the backend uses Express.js APIs. Now, I'm ready to deploy it for production, but unsure of the process. After running "npm run build ...

vue.jsweb-deployment

Unable to manipulate or customize the V-slot component

I recently implemented the v-flip feature on my Nuxt webpage, resulting in the following template: <div class="about__cards"> <vue-flip class="about__single-card" active-click width = "350px" height="450px"> <template v-slot:front> ...

cssvue.jsnuxt.jsv-slot

Utilizing Angular's DomSanitizer to safely bypass security scripts

Exploring the capabilities of Angular's bypassSecurityTrust* functions has been a recent focus of mine. My objective is to have a script tag successfully execute on the current page. However, I keep encountering issues where the content gets sanitized ...

javascripthtmlangularangular-dom-sanitizer

Tips for utilizing the multiselect() function without deleting current values and incorporating new values determined by another selection

Currently, I am working on an e-learning project that involves managing a large number of student registrations. I have implemented a search box to find students' names and add them to a list. However, I encountered an issue when trying to search for ...

javascriptphpajax