VueJS array is returned by a global media library

I am currently working on a project that involves a global VueJS file along with child vuejs files that vary depending on the page. One of my goals is to develop a media manager that can be called multiple times on a single page, allowing users to either select images or upload them through a modal window. While I have figured out the image uploading aspect, what remains unclear is how to handle the selection process and return the chosen image back to the original element in an array that can be assigned to a specific variable. Example scenario: Let's say there is a vuejs element named article_image with a variable "article_image_data" and a corresponding button. Clicking this button should trigger the modal manager, where users can choose an image and then press "Select." Upon closing the modal, the selected image data will be sent back as an array and assigned to "article_image_data". This system could interface with other sections on the same page such as a category section.

Answer №1

Simplify things by setting up your modal manager to listen for the change event on your file input.

<!-- ModalManager.vue -->
<template>
  <div class="modal">
    <input type="file" @change="$emit('selectedFiles', $event.target.files)">
  </div>
</template>

Then, in the parent component that uses the modal manager, you can access the file list when the selectedFiles event is triggered.

<!-- ArticleImage.vue -->
<template>
  <ModalManager
    @selectedFiles="onSelectedFiles"
    v-if="modalOpen">
</template>

Now it's easy to work with a FileList

export default {
  components: {
    ModalManager
  }
  data () {
    return {
      modalOpen: false,
      articleImageData: null,
    }
  },
  methods: {
    onSelectedFiles (fileList) {
      console.log('Received a FileList from ModalManager', fileList)
    }
  }
}

If you require more complex management for your modals, you can pass events from child to parent components like this:

<element @childEvent="$emit('childEvent')">

The core idea remains consistent

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

Sending variables through methods in Vue.js is not functioning as expected

I have a straightforward form that utilizes Vue.js with Firebase (specifically the package vue-firestore). I have methods to manage user registration in Firebase, change the displayName value, and log out the current user. After this, I am registering some ...

Show a loading progress image during the page loading process (not during form submission)

Is there a way to show a loading GIF image while a page is loading or during postbacks using jQuery and JavaScript for long running tasks or processes that take a significant amount of time to execute? I attempted a solution but the loading image is not d ...

What are the techniques for integrating PHP code into JavaScript/Ajax?

I am curious about how to integrate PHP code into JavaScript/Ajax. Here is the PHP code I am working with: if ($folder = opendir('data/Tasklist/')) { while (false !== ($file = readdir($folder))) { if ($file != '.' && $ ...

What is the reason for the failure of this react ternary return statement?

My slideboard is set up to show a warning component (currently just a "test" div) when the prop "columnsItem" exceeds 50. Everything works fine, but when I switch back to a slideboard with fewer columns, all I see is a blank white screen. Can you help me ...

transferring a node.js string to the frontend of a react application

I have a node.js backend function that looks like this: app.get('/returnTestValues', (req, res) => { var results = "hello friends" res.send(results); }) In the front end, using React, my code is as follows: impo ...

Displaying the server's feedback upon successfully uploading a file onto the server

I am utilizing an HTML5 input control that allows users to upload a .csv file: <input id="ImportFile" type="file" name="ImportFile" data-val="true" data-val-required="Please select a file" title="Browse for a file to upload" /> This input control i ...

The functionality of OBJLoader has ceased to function properly following the implementation of revision

Recently, I encountered an issue while working with the objloader feature of the three.js library to display a cube in a web browser. Everything was working perfectly until I updated to revision 55 from git. Since then, I have been unable to render the c ...

Creating an infinite loop animation using GSAP in React results in a jarring interruption instead of a smooth and seamless transition

I'm currently developing a React project where I am aiming to implement an infinite loop animation using GSAP. The concept involves animating a series of elements from the bottom left corner to the top right corner. The idea is for the animation to sm ...

I have implemented a feature in my code where the camera rotates when clicked. However, the rotation currently jumps to a 90-degree angle instantaneously. How can I adjust this to create

I'm working on an app that allows me to rotate the camera in order to view a specific entity, but I'm encountering a problem where the rotation is too abrupt. How can I make it transition more smoothly? I attempted to attach an animation compone ...

Each time, vue-router instantiate a fresh Component instance

I have encountered a frustrating issue with vue-router that keeps bothering me. Every time I navigate between routes, a new instance of the component is created and the old instances remain active in the background! My expectation was that when I switch t ...

Access array information using AngularJS

Sorry for any language issues. I am trying to figure out how to extract an array data from AngularJS in order to save it using Node.js. This is my AngularJS script: angular.module('myAddList', []) .controller('myAddListController&apos ...

Modifying the appearance of a Three.js collada object with new textures and colors

After successfully implementing a three.js example from the official site with my collada objects (.dae) using ColladaLoader.js, I am now wondering how to change the color attribute of the loaded collada object and add a custom texture. So far, my attempts ...

Whenever I attempt to alter the text of a single button in the map using ReactJS, the change reflects on all buttons simultaneously

Currently, I am facing an issue while trying to create a map in React JS with buttons. When I click on a button, it changes the text of all buttons instead of just the specific one. I believe the problem lies in not specifying the button_id, but I am unsur ...

What is the best way to refresh a div every 20 seconds?

I'm currently working with this script: <script id="_wauwgs">var _wau = _wau || []; _wau.push(["small", "p00ystfryeuc", "wgs"]); (function() {var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/small.js" ...

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

Using Selenium WebDriver in JavaScript to Extract Text from an Array

During my experimentation with Selenium webdriver in javacript, I encountered a challenge when trying to extract text from an array of WebElements (specifically cells within a table). The usual command getText() did not work as expected when attempting to ...

How can you use JavaScript to assign a data value to a hyperlink?

I'm currently facing an issue with assigning a value to the data-attribute of an anchor tag. Below is the code snippet in question: <script> window.onload = function(){ document.getElementById("setcolor").click(); } var color = "red"; document ...

Unable to suppress error in AngularJS $http.get() call when using catch() method

Below is a simplified version of the code I'm working with, running in CodePen for example: var app = angular.module("httptest", []); app.controller("getjson", ["$scope", "$http", function($scope, $http) { $http.get("https://codepen.io/anon/pen/L ...

Selenium - Implementing browser shutdown cleanup steps in Selenium tests

I have encountered a challenge where I need to execute some tasks before the close button on Google Chrome browser is clicked and the window is closed. This involves logging out of the website among other things. Completely clearing cookies is not an opti ...

Can you explain the purpose of the window.constructor and global.constructor functions in JavaScript?

Can someone explain the purpose of this function? I've been searching for information but can't find anything. I tested it in Firefox: window.constructor() // TypeError: Illegal constructor new window.constructor() // TypeError: Illegal constru ...