Guide on invoking a function within a Vue npm package

I have been working on displaying and modifying images of a car in my project. To achieve this, I utilized the vue-upload-multiple-image package for storing the images successfully. However, I encountered an issue when trying to retrieve these stored images using the same package. I converted the saved images to base64 format, and now my goal is to pass the list of images to a specific function within the package. This function will handle displaying the images when updating the car details.

Below is the function I need to invoke:


createImage(file) {
  let reader = new FileReader()
  let formData = new FormData()
  formData.append('file', file)
  reader.onload = e => {
    let dataURI = e.target.result
    if (dataURI) {
      if (!this.images.length) {
        this.images.push({
          name: file.name,
          path: dataURI,
          highlight: 1,
          default: 1,
        })
        this.currentIndexImage = 0
      } else {
        this.images.push({
          name: file.name,
          path: dataURI,
          highlight: 0,
          default: 0,
        })
      }
      this.$emit(
        'upload-success',
        formData,
        this.images.length - 1,
        this.images,
      )
    }
  }
  reader.readAsDataURL(file)
},

Link to the function in this file

When attempting to console.log the function, it returns undefined. I have considered using props but am unsure how it can assist me.


mounted(){
  console.log(this.createImage);

My aim is to simply call this function within my editcar component and provide it with the converted images. Your assistance in solving this issue is greatly appreciated. Thank you for reading this far.

Answer №1

I came across a solution to the issue in the documentation where there is a dataImages prop. The usage looks like this:

<div class="form-group m-form__group">
  <vue-upload-multiple-image
    @upload-success="uploadImageSuccess"
    @before-remove="beforeRemove"
    @edit-image="editImage"
    :dataImages="images"
  ></vue-upload-multiple-image>
</div>

The images must be in base64 format, so here is the function for the data.

data() {
  return {
    images :[],
  }
},
mounted() {
  this.ConvertImages();
},

This includes the following methods:

methods: {
  ConvertImages() {
    let images = this.car.images
    let image = this.images
    for (var i = 0; i < images.length; i++) {
      this.toDataURL(images[i].path, function(dataURL) {
        image.push({
          path: dataURL,
        })
      })
    }
  },
  toDataURL(url, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onload = function() {
      var reader = new FileReader()
      reader.onloadend = function() {
        callback(reader.result)
      }
      reader.readAsDataURL(xhr.response)
    }
    xhr.open('GET', url)
    xhr.responseType = 'blob'
    xhr.send()
  },
}, //END OF METHODS

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

A variable must be defined within a specific block in order to be recognized

In an effort to enhance my code within a passport function, I am looking to pull values from a mongodb Database rather than from an array. The initial functioning code appeared as follows: passport.use( new LocalStrategy( { usernameField: ...

The second AJAX request isn't functioning properly; it should only be executed once the first one has successfully completed

I am experiencing an issue with my ajax calls. The second call should only be triggered after the first one is successful. However, even though the first call always returns success, I keep getting an error for the second one. function proceedWithUnlock(t ...

Combining several JSON objects into a single JSON object using JavaScript

I am in need of merging JSON objects from various sources into a single JSON object using JavaScript. For example, I have two JSON objects with different values that I need to combine and add a new value to the final result. json1= { "b":"t ...

Issue with jQuery click event not firing on multiple buttons with identical names

These are the two buttons that appear multiple times but do not function: <button name='btnEditar' class='btn btn-outline-success me-4' data-bs-toggle='modal' data-bs-target='#staticBackdrop'><i class=&a ...

Achieving successful npm caching in Azure DevOps for a .net core Angular project

I have a project for a client that involves building an Angular 10/.Net Core project, and it currently takes around 15 minutes. I've been experimenting with caching to optimize the process. Despite trying different configurations, when I add eq(variab ...

I'm struggling to understand the purpose of using response.on

I have a code snippet here and I am curious about the functionality of "response.on" and why we are passing "data". What does this "data" represent? Also, could you explain what ".on" is specifically used for in this context? const express = require("exp ...

Rails Navigation Issue: JQuery Confirmation Not Functioning Properly

Having a Rails app, I wanted to replicate the onunload effect to prompt before leaving changes. During my search, I came across Are You Sure?. After implementing it on a form, I noticed that it only works on page refreshes and not on links that take you a ...

Altering the innerHTML of a <p> tag with a smooth transition

I am a beginner in the world of web design. I am currently working on a project where I need to continuously change the text inside a <p> element with a transition effect similar to a slideshow. Below is the code I have so far: <p id="qu">S ...

The jQuery code does not execute following the use of window.location.replace( url ) command

I'm facing an issue with my code that involves redirecting the page to the index page after clicking on a specific link ('#versionPageFromProdLink'). The index page contains certain content within a div, which I want to hide once the redirec ...

I'm confused as to why my React application is showing a blank screen even though I successfully imported and used an icon from Material UI. It compiled without any errors

I encountered an issue with my code when I added the "Avatar" line. To fix the problem of material UI not displaying properly, I had to use react icons instead. If possible, I would like recommendations for alternative packages that include the Avatar co ...

The browser fails to render an EJS-generated page when responding to a Fetch request

Today, I encountered a strange issue that has left me puzzled. In summary, I have been sending a PUT request from a user form to the backend. Since forms do not natively support PUT/DELETE requests, I had to use a script to handle this task for me. let for ...

PHP and Ajax Form Submission Directing to Backend PHP Script

While working on a portfolio, I encountered an issue with the contact form. When I click the submit button to send a message, instead of displaying the bootstrap alert message below the form, the page redirects to the PHP file. Although I receive the emai ...

What is Node.js's approach to managing concurrent operations?

Recently, I've been engrossed in this fascinating book that delves into JavaScript. In one section, it emphasizes that Node.js stands out due to its unique single-threaded event-based concurrency through an asynchronous-by-default API. I find it puz ...

Is there a way to `npm link` a typescript dependency that has peer dependencies?

In the midst of working on my React/Redux typescript project A, my team and I decided to streamline our process by extracting some of the React components and Redux code into a separate NPM module. This led me to create another React/Redux TS project B. I ...

Try uploading a file with the imageUpload function in JavaScript, could be something basic

Today I successfully uploaded a picture using a basic button (id: "imageUpload") to select and upload a file. Everything worked flawlessly, with the thumbnail of the picture appearing in "thumb1." Now, I am attempting to allow users to upload a picture by ...

Update npm installed packages failed due to an error with code EINVALIDPACKAGENAME

I'm currently in the process of updating my node modules globally. I've been using this particular command: sudo npm update -g However, when I run this command, it results in an error being displayed in the terminal: npm ERR! code EINVALIDPACKAG ...

Similar to TypeScript's `hasOwnProperty` counterpart

When working with TypeScript objects, is there a way to loop through a dictionary and set properties of another dictionary similar to how it is done in JavaScript? for (let key in dict) { if (obj.hasOwnProperty(key)) { obj[key] = dict[key]; } } If ...

Setting a random number as an id in the constructor in Next JS can be achieved by generating a

What steps can be taken to resolve the error message displayed below? Error: The text content does not match the HTML rendered by the server. For more information, visit: https://nextjs.org/docs/messages/react-hydration-error Provided below is the code i ...

Using Sinon with Ember to create a Mock Server

I am looking to test my controller by making an ajax call to my backend using Jasmine and Sinon. To fake my backend server with Sinon, I attempted the following approach: describe("fake server", function() { var server; beforeEach(function() { this ...

Node.js threw an error when trying to download a tarball, displaying a status code of

While attempting to install various modules in Nodejs using NPM, I encountered a situation where the installation process failed and returned an error: Error: 403 status code downloading tarball This same issue happened again when I tried to install node ...