Utilizing the input type file within an anchor tag to create a dropdown item

I am facing an issue while trying to incorporate the input type file within a dropdown item inside an anchor tag.

Here is the code snippet causing the problem:

 <div className="dropdown-menu actions-text">
     <a className="dropdown-item" href="#" onClick={e => props.viewJob(e, item.id, item.jdName)}>
         <i className="fa fa-envelope mr-2 view-icon" />
         View JD
     </a>
     <a className="dropdown-item" href='#'>
         <i className="fa fa-cloud-upload mr-2 upload-icon" aria-hidden="true" />
         Upload Resume
     </a>
     <input type='file' title="" onChange={(e) => { props.uploadResumeFolder(e, item.id, item.jdName) }}
            directory="" webkitdirectory="" mozdirectory="" allowdirs="" multiple />
     <a className="dropdown-item" href="#"><i className="fa fa-download mr-2 download-icon" aria-hidden="true" />
         Download Tracker</a>
</div>

Whenever I add another option at the top, the next one in line gets clicked instead of the desired file upload option. It always selects the second one by default.

How can I fix this issue?

javascripthtmlcssbootstrap-4

Answer №1

Have you experimented with a similar approach?

<a href="#" onClick="(function(e){
    console.log('clicked', e);
    document.getElementById('X1').click();
})();">try clicking here</a>

<input hidden type='file' title="" onChange="(function(e){
    console.log('file input has changed', e)
})();" id="X1" />

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

Difficulties with validating phone numbers

I'm having an issue with my JavaScript code that is supposed to validate a phone number field, but it doesn't seem to be working. Even if I enter incorrect values, the form still submits. Here's the snippet of my code: <script> functi ...

javascriptphone-number

Tips for generating a JSON string with nested structure

Can someone assist me in generating a JSON based on the HTML elements provided below? { "AppName": "ERP", "ModuleDesc": [ { "Name": "Payroll", "AcCESSRIGHTS": [ { "Create": "Y", "Retrive": "Y", "U ...

javascriptjqueryhtml

Animate CSS with Javascript in reverse direction

Forgive me if this is a silly question, but I'm having trouble. I need a slide-in navigation menu for smaller screens that is triggered by JavaScript. Here is what I currently have: HTML <nav class="responsive"> <ul class="nav-list unstyl ...

javascripthtmlcss

What could be causing req.body to consistently come back as an empty object?

I am struggling with req.body always returning an empty object regardless of what I try. I have experimented with: var jsonParser = bodyParser.json(); and then including jsonParser in the function -> app.post('/api/get-last-project',jsonPar ...

javascriptnode.jsexpressbody-parser

shallow rendering does not recognize this.props as a function

I'm currently facing an issue while trying to test my (legacy) component using jest/enzyme. Here is a snippet of the component: export default class MyComponent extends Component { constructor( props ) { super( props ); this.handl ...

javascriptreactjsjestjsenzyme

What causes the Top Navbar in Twitter Bootstrap to exceed the container when fixed?

While working with the default fixed-top navbar in Bootstrap, I encountered an issue where it spans the full width of the viewport. In order to contain it within a specific container div, I tried applying a CSS override for the left side: .navbar-fixed-to ...

htmlcsstwitter-bootstrap-3

Mongoose failing to persist subdocument

After trying to insert into my collection, I noticed that the sub-document is not being saved along with it. This issue has left me puzzled. This is the scheme/model I am working with: import { Schema, Document, Model, model } from 'mongoose' ...

javascriptmongodbtypescriptmongooseinsert

Recent Google algorithm changes impact websites built on AngularJS and JavaScript

Exciting news from Google today (May 28, 2014) - JavaScript content will now be rendered by the Googlebot itself! This means there's no need to worry about serving pre-rendered pages just for crawling purposes. You can find out more details on this an ...

javascriptajaxangularjsseo

What are the best techniques for streamlining nested objects with Zod.js?

As a newcomer to zod.js, I have found that the DataSchema function is extremely helpful in verifying API data types and simplifying the API response easily. However, I'm curious if there is a way to streamline the data transformation process for myEx ...

javascripttypescriptzod

The "div width 100%" property functions flawlessly when tested locally, yet fails to operate on the live server

Hello, I recently launched my new website at www.leafletsdistributors.com. However, I'm encountering an issue with the Get in touch section (the light grey colored area). Despite setting the width to 100%, it's not fully extending across the scre ...

htmlcss960.gs

Saving large data in NodeJS using MongoDB and Mongoose in a non-blocking manner

Currently, I am in the midst of developing a straightforward application utilizing NodeJS, ExpressJS (with EJS), MongoDB, and Mongoose. Here's a synopsis of the issue at hand that requires some recommendations: Situation 1) Triggered by a specific e ...

javascriptnode.jsmongodbexpressmongoose

iOS - A clever trick for manually setting focus on an input/textarea

Recently, there have been numerous discussions about the issue in iOS where focusing on an input/textarea element cannot be achieved through manual means. (Check out the threads here and here) It appears that iOS necessitates a genuine tap or click for foc ...

javascriptjqueryios

Pass the input array using a jQuery Post request without the need to submit the form

I am looking to send data to a URL without the need to submit a form and reload the page, but my JQuery skills are not very strong. Can someone show me how to achieve something like this in HTML? <input type="text" name="name"> <input type="text" ...

jqueryhtmlajaxforms

Elevation on Tab button from the upper side

On my website, I have a large form where pressing the tab key switches between input fields. The inputs will also jump to the top if we reach the bottom of the form. The issue is that I have a fixed header at the top, covering the first 60px. Is there a w ...

jqueryhtmlcss

Modifying the input placeholder color with ng-style

I am working on setting the color of my input placeholder using a dynamic color defined in a $scope variable in my controller for my HTML code. The $scope variable is structured as follows: $scope.primaryColor={"color":colorVar}; //colorVar represents th ...

javascriptangularjs

What is causing the issue with using classes in Javascript to clear the form?

<!DOCTYPE html> <html> <head> <title>Onreset</title> </head> <body> <form> Username: <input type="text" class="abc"><br><br> Password: <input type ...

javascripthtml

updateStatusCallback function is not defined in the Facebook example using jQuery

I've been trying to incorporate Facebook integration into my HTML code, specifically adding features like Facebook login and sharing functionalities. However, I've hit a roadblock in the process. Even after searching extensively for solutions, I ...

javascriptjqueryhtmlajaxfacebook

Uncertainty surrounding the distinction between global variables (var) and block variables (let, const) in Node.js

It's common knowledge that var is a global variable in node js and can be accessed from anywhere. However, I found myself perplexed by the following examples: In the first example, accessing global_1 poses no issues as it is a global variable. var g ...

javascriptnode.js

Restricting or postponing HTTP requests in an AngularJS service

I recently developed a service for my AngularJS app that retrieves data by making $http calls through various methods. However, I encountered an issue where these requests were being triggered every time an HTML element in the view (a product details div) ...

javascriptangularjs

What is the best way to create an animated, step-by-step drawing of an SVG path

I am interested in creating an animated progressive drawing of a line using CSS with SVG/Canvas and JS. You can view the specific line I want to draw here <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with cust ...

javascriptcsscanvassvg