Vue component for resizing and resetting image files

In my Vue project, I am utilizing vue-image-upload-resize.

Everything is functioning well except for the two issues I am facing:

  1. Is there a way to eliminate the text near the 'choose file' button?

https://i.sstatic.net/YjyPg.png

  1. How can I reset the control after uploading a file? When I attempt to upload the same file again, it does not trigger the setImage event. I prefer not to use JQuery in this scenario

Answer №1

HTML:

<div class="input">
    <image-uploader></image-uploader>
</div>

CSS:

.input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
  1. You may utilize $refs

HTML:

<div class="input" @click="initiate">
    <image-uploader ref="image"></image-uploader>
</div>

JavaScript:

methods: {
    initiate() { this.$refs.image.$el.children[1].value = "" }
}

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

Unable to save data retrieved using jQuery JSONP

My current project involves fetching photo data from Flickr using a jQuery AJAX call with JSONP. However, instead of immediately using the data, I want to store it for future use. In some cases, users will be able to perform different queries on the pre-fe ...

If the token is null, my intention is to return to the sign-up page, but unfortunately, I am unable to redirect the page back

import React from 'react'; import { AppBar,Typography , Button , Toolbar} from '@material-ui/core'; import {Redirect, useHistory} from 'react-router-dom'; const Admin = () =>{ const history = useHistory(); let ...

Parsing dates arriving from a Restful Service in JavaScript

When I make a Restful call, the JSON response contains dates in a strange format like this: /Date(-62135568000000)/ What is the simplest way to convert it to a normal date format like (January 10, 2016)? I have read some articles that suggest using rege ...

Encountered an error while trying to compile the demo using VUE CLI3.0

click here for image description view image details WARNING Development server initialization... 95% copy files CopyPlugin ERROR Compilation failed with 1 error at 12:29:34 error found in ./src/router.js Module parsing error: Unexpected token (17 ...

Combine, condense, and distribute JavaScript files using Express without applying gzip compression to the response

Currently, I am developing a web application using Express. My goal is to merge, minify, and serve .js files efficiently. To achieve this, I have created a middleware with the following code: var fs = require('fs'), path = require('path ...

Guide on accessing a nested array within a JSON object using JavaScript

I'm currently faced with a json object that contains nested arrays and names with spaces like Account ID. My goal is to only display the Account ID's within my Vue.js application. While I can access the entire response.data json object, I'm ...

Selecting multiple values in a SelectMenu with Discord.js (DJS)

I want to be able to select multiple values, each corresponding to a specific role. For example: If I choose "member", the SelectMenu will assign the role "Member" If I choose "member" and "logs", the SelectMenu will assign the roles "Member" and "logs" ...

Using jQuery to select a div element that has been dynamically loaded using ajax, or inserted into the DOM using the html()

Greetings from a newcomer to stackoverflow! After searching for similar questions and answers, I still couldn't find a solution to my specific problem. Here's the situation: I have a webpage that uses ajax to load main content. The function for ...

Tips for showcasing an image on an HTML page

I am encountering an issue with my HTML page that includes a Button. When clicked, it is supposed to display an image using an Ajax call. The functionality works properly in Postman Rest Client. However, when accessed through a browser, it only shows raw ...

Middleware for Socket.IO, utilizing io.use

I recently came across a post on Stack Overflow discussing the usage of middleware syntax in a web application built with expressJS and Socket.io. This was something new to me, as I had only seen middleware used with the express instance before. The exampl ...

Transitioning from Chrome's USB App API to the Web USB API

My current challenge involves migrating my API from a Chrome App to a Progressive Web Application due to the deprecation of the platform. I need to retain USB support in my web platform application, and someone recommended utilizing the Web USB API. Howev ...

What could be the reason for being unable to execute the 'ng' command even after a smooth

I have successfully installed Angular CLI 1.5 using the following command: C:\ANGULAR-WORKBENCH>npm install --global @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c6c9cce5948b908b95">[email protect ...

Using jQuery to implement interactive hover effects on individual items within a list

I'm currently developing a project that involves displaying speech bubbles next to each list item when hovered over. These speech bubbles contain relevant information specific to the item being hovered on. To achieve this functionality, I've crea ...

Passing components through props in Vue 3

In my previous Vue 2 project, I had implemented a custom routing solution which sometimes required passing components as props. <template> <div> <component :is="component" :data="componentData"/> </ ...

How to use Vanilla JavaScript to toggle a click event on a list item (LI) that

I have a script that scans through a webpage and identifies a unique string, for example: multus –a –um. The page contains several <LI> elements with various text content, including instances of multus –a –um. I need a solution to locate an & ...

Encountering an error when mapping a list using a function and clicking on it reads: "The property 'value' cannot be read as it is undefined."

Attempting to map a list using a function outside of the render() function in React results in an error that states "Cannot read property 'value' of undefined." The function includes a div with an onClick attribute and an assigned function. He ...

Placing an image overlay on a YouTube video does not have clickable functionality on devices such as iPods/iPhones

We have been experimenting with the YouTube iframe APIs, specifically incorporating an overlay image on top of a video. The idea is that by clicking on this image, users can skip ahead in the video. However, we've encountered an issue where the image ...

Tips for retrieving IDs when a selection is made in fcbkcomplete? Check out the example on jsfiddle!

Take a look at the code snippet below. I am attempting to extract the ids of the selected items in the fcbkcomplete box and display them as comma-separated values in the textbox with the id="interest". Although I wrote a function for this purpose, it is no ...

How come my total isn't zero after I get a 1 on the dice roll?

I've been working on a dice game where if either of the dice rolls a 1, the score is set to 1. However, I'm having trouble getting that part of my code to work properly. I'm confident that everything else is functioning correctly. v ...

Retrieving JSON data from a URL with PHP

Attempting to retrieve JSON data from the following URL: $search_data&format=json&nojsoncallback=1 The information I am aiming to obtain based on the above link is as follows: { "places": { "place": [ { ...