Getting a file object with v-file-input in Nuxt.js

For my Nuxt.Js apps, I utilized Vuetify.js as the UI framework. In order to obtain the file object when uploading files, I incorporated the v-file-input component from Vuetify.js and wrote the following code snippet:

    <template>
    <div>
        <v-file-input
            label="fileinput"
            multiple
            v-model="files"
            @change="getFileObject()"></v-file-input>    
    </div>    
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue{
    files:any = []
    fileObj:any = {}
    async getFileObject(file:any){
        this.fileObj = await file
        console.log(this.fileObj)
    }
}
</script>

Despite logging the file object using console.log, 'this.fileObj' remains undefined. How can I successfully retrieve the file object when uploading files? Any suggestions would be appreciated.

Answer №1

By excluding the empty argument from the handler, it will be implicitly passed. Furthermore, ensure that it is referenced in this.files which serves as the input's v-model:

@change="getFileObject"
methods: {
  getFileObject(file:any) {
    console.log(file);
    console.log(this.files)
  }
}

Answer №2

When the @change event is triggered, it passes a single parameter - an array of files:

@change="retrieveFileData($event)"></v-file-input>

To process this in your script:

async retrieveFileData(files: File[]){
    this.fileData = await files;
    console.log(this.fileData);
}

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

Having trouble getting SVG animations to work properly when using the static folder in Parcel?

As I was attempting to display my SVG file on the browser after uploading it to my domain, I followed a similar process to other projects where I had installed parcel. This involved creating a static folder and placing the SVG file inside it. While the SVG ...

Unable to access property 'scrollToBottom' as it is undefined

I'm encountering the error "Cannot read property 'scrollToBottom' of undefined" and haven't been able to find a solution anywhere, hence this post: Here is my use case: I have a custom accordion list, and on click of one of the list i ...

How the Marvel of jQuery Ignites the Power of

I require some assistance with the callbacks. It appears that they are not functioning properly. I am in the process of creating a jQuery-based game. I have designated a <div id='button'></div> for all the buttons that will be used ...

The HTML input type color will render as a text input displaying the selected color code

Currently, I am experimenting with using an input field that includes a color selector in Vue. <input type="color" v-model="model.$.message_color"> This is my first time working with the type="color" attribute. However, ...

Is it possible to execute a function when the AJAX request is successful and returns a status code of

I am looking to implement the success function to only run a certain function if the status code is 200. I have come across this example: $.ajax ({ success: function(data,textStatus,jqXHR){ external(); } )}; However, I have not found a clear ...

When updating a row, only update the column if a non-null value is provided, otherwise keep the original value as is

Can this task be accomplished? I have a function with specific parameters for it. When the function is first called, it generates all possible settings based on a JSON file and saves them in the database. The crucial column here is 'meta', which ...

Tips for incorporating the "define" function into your Mocha testing

Starting my journey with JavaScript testing, I made the decision to use Mocha. The specific modules I am looking to test are AMD/RequireJS. However, it appears that Mocha only works with CommonJS modules. Consequently, when trying to run it, I encounter t ...

Using Typescript: Undefined arrays could cause issues in the array map function

Encountering a Typescript error stating that '<array name>' is possibly undefined while attempting to map over an array in Typescript. Below is an example code snippet triggering this issue: type obj = { list?: string[] }; function dem ...

What is the best way to execute a JavaScript file with npm scripts?

Trying to use npm but encountering some issues. In my package.json file, I have: "scripts": { "build": "build.js" } There is a build.js file in the same folder that simply console.logs. However, when I execute npm run build I receive the error messag ...

What is the best way to assign multiple controllers to a single view in angularJS?

My Attempt: $routeProvider .when('/paintings', { controller: 'imageController' , 'getPaintingImages' templateUrl: 'paintings.html' }) .when('/foods', ...

Steps for implementing AJAX to display a success function and update database results in real-time

I'm struggling with allowing my AJAX call to send data to my PHP file and update the page without a reload. I need the success message to display after approving a user, but their name doesn't move on the page until I refresh. The goal is to app ...

Detecting if a string is in sentence or title case with a typeguard

When setting the sameSite property of a cookie, it must be either Strict, Lax, or None. However, the package I'm using uses lowercase values for this attribute. Therefore, I need to adjust the first letter of the string: let sentenceCaseSameSite: &quo ...

jQuery is optimized to work specifically with select id tags

Here is the HTML code snippet I've put together, along with my script. While I admit it might look a bit messy, please bear with me as I'm still in the learning phase. If anyone could offer some assistance on this matter, I would be extremely gra ...

WebSocket - "Port is already being utilized"

I implemented the files provided in this article: into my codeigniter project, but I keep encountering an error: Message: socket_bind() [function.socket-bind]: unable to bind address [48]: Address already in use The JS section shows me: Connecting... C ...

The jQuery bookmarklet in the djangobyexample book is completely unresponsive

As I work my way through Django By Example, I came across a chapter where a jQuery bookmarklet is created within a Django app. This allows users to easily save jpg images from websites into their user profile area within the Django app. Although the tutor ...

using JQuery, add a class on click event or on page load

Solved It! After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load. $('ul.tabs li').click(function(){ ...

Creating dynamic routing functionality in Angular 8 allows for a more personalized and

I am struggling with setting up routing in Angular 8. Here is how I am trying to do it: 'company/:id/activity' 'company/:id/contacts' However, I am not receiving any params in the activatedRoute: this.activateRoute.params ...

Troubleshooting automatic login problem in VB 2013 settings

For my application, I am utilizing the most recent version of Awesomium's WebControl. The goal is for it to automatically log in when it reaches "accounts.google.com/ServiceLogin" by executing some Javascript. In my.settings.java file, I have the foll ...

Issue in Typescript: The type 'RegExpMatchArray' cannot be assigned to a parameter of type 'string'

Here is the code snippet I am working with: import { persistState } from 'redux-devtools'; const enhancer = compose( applyMiddleware(thunk, router, logger), DevTools.instrument(), persistState( window.location.href.match(/[?&]debu ...

What steps can I take to ensure my CSS component remains unaffected by the global CSS styles?

My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled. The code snippet for impor ...