Concealed Selenium File Upload through Drag and Drop User Interface

Struggling to insert an image into the specified input using selenium web-driver.

<input type="file" multiple="multiple" class="dz-hidden-input" accept="image/gif,image/jpg,image/jpeg,image/png,application/zip" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

Attempting to use sendKeys results in ElementNotVisible: Element is not currently visible due to hidden visibility.

Even trying to set value via JavaScript yielded a web-driver exception stating "The operation is insecure."

A closed issue similar to mine was found here.

Efforts made:

executor.executeScript("arguments[0].style.visibility='visible';",fileInput);

executor.executeScript("arguments[0].style.display='block';", fileInput);

Although attempting to make the element visible, send keys continued failing with the same error.

A similar problem was discovered in this question Uploading a file through selenium but file input element is hidden, however, in my case, the element remains invisible.

Using selenium IDE, it works with the type command.

If anyone has encountered and resolved this issue before, kindly share your experience.

Appreciate any assistance provided.

javascriptselenium-webdriver

Answer №1

To make the Input element visible, set its opacity to 1 and then input the file path using the SendKeys function. You can adjust the Opacity with the following lines of code:

executor.executeScript("arguments[0].style.opacity='1';",fileInput);
executor.executeScript("arguments[0].style.height='200px';",fileInput);   
executor.executeScript("arguments[0].style.width='200px';",fileInput);

After setting these properties, proceed with the sendKeys method.

Let me know if this solution works for you!

Answer №2

If you encounter difficulties in targeting dz-hidden-input with multiple dropzones on a single page, you can resolve it by following these steps:

  initialize: function() {
    this.hiddenFileInput.className = "dz-hidden-input dz-hidden-input-one";
  }

After that, you will be able to target the hidden input using $(".dz-hidden-input-one")

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

Placing a new item following each occurrence of 'X' in React components

Currently, I am working with a React component that uses Bootstrap's col col-md-4 styles to render a list of items in three columns. However, I am facing an issue where I need to add a clearfix div after every third element to ensure proper display of ...

javascriptjquerytwitter-bootstrapreactjs

The timeouts persist in firing and running even after being cleared and the component has been unmounted

I am currently working on creating bus animations based on an array of coordinates. I am using setTimeout to trigger a function that moves the marker to the next coordinate. However, I am facing an issue where the functions continue to execute even after c ...

javascriptreactjsreact-nativesettimeoutsetinterval

Minimize CPU consumption in your threejs application

I've been working on a project where I'm coding Snake in Threejs (I know there are simpler methods). Everything works smoothly until the snake reaches a certain size, causing CPU usage to spike to 50% or more and freezing the entire browser tab. ...

javascriptjquerythree.jsrendering

What is the best way to implement auto-saving functionality for multiple form fields in a React application?

Whenever I make changes to the first and second columns of an item in a text field, the onBlur event triggers an auto-save. This results in the entire row being reloaded due to the update caused by the first column's save. Is there a way to prevent t ...

javascriptreactjsfluxautosave

Encountering an undefined property error while using Array.filter in Angular 2

hello everyone, I am currently faced with an issue while working on a project that involves filtering JSON data. When using the developer tools in Chrome, it keeps showing me an error related to undefined property. chart: JsonChart[] = []; charts: JsonC ...

javascriptangularjstypescriptangularjs-filter

Breaking down a statement into individual elements within an array, incorporating keys alongside the elements within the array

let condition = "[AccNum]==true&&[AccNum]==[ARID]&&[AccNum]==aaaa || [ARID]!=true&&[DOB]&gt;[ARID] || [DOB]&gt;bbb&&[DOS]&gt;=[ARID]&&[DOS]&lt;[Gender]&&[66642]&lt;=cccc&&[66642] I ...

javascriptarrayssplit

I am facing issues with opening my web driver sampler for jmeter

My JMeter Webdriver sampler is encountering an issue while trying to open. The error message I received is as follows: 2019-07-09 18:55:00,153 ERROR o.a.j.JMeter: Uncaught exception: java.lang.NoSuchMethodError: com.google.common.base.Preconditions.che ...

seleniumselenium-webdriverjmeterwebdriverjmeter-plugins

Adding information to an array within a document in a MongoDB database

I am facing an issue where I am trying to add data to the readBook array in my User collection document. The code and console.log seem to indicate that the User is retrieved from the database and there is data to push, but nothing changes after the code ex ...

javascriptarraysnode.jsmongodbexpress

Show the elements of an array (that have been read and processed from a text file) on separate lines using JavaScript

Hello, I have the code below where a user can upload a text file. I attempted to display the output in a div after splitting it using the @ character. The array elements stored in variables are correctly displayed with new lines in an alert, but they are p ...

javascripthtml

Is it possible for a popup to appear without any user interaction

Do you ever wonder how certain websites are able to trigger pop-ups without being blocked by Chrome's pop-up blocker? I had always thought that pop-up blockers only allowed window.open if it was initiated by a user action. However, the situation seem ...

javascriptpopupwindow

Is there an Angular directive that can replicate a mouseenter event?

Is there a way to simulate a mouseenter event with a directive? I have been searching for a directive that can simulate a mouseenter event, but all I have found so far is one that binds a function to mouse over or karma tests for simulating mouse over. W ...

javascriptjqueryangularjsangularjs-directive

Determining Visibility in Selenium: isDisplayed() or isVisible()?

Can you explain the distinction between isDisplayed() and isVisible() functions in Selenium? These two methods are commonly employed to determine whether a web element is hidden on a webpage or not. ...

javaseleniumselenium-webdriverwebdriver

Require assistance with displaying a menu on a website using JQuery

Is there a way to create a menu similar to the one shown in the image below?https://i.sstatic.net/QxNPL.png To learn more about this menu, you can visit their website by clicking on this Link. I have copied some code (HTML code and links to CSS and .js fi ...

javascriptjqueryhtmlcss

When using react, it is not possible to have a <span> element as a child of a <

I designed a custom select dropdown feature for use in a redux-form within a react-redux application. The dropdown functions well, with no performance issues, but I am encountering a warning in the browser. Warning: validateDOMNesting(...): <span> c ...

javascriptreactjsfrontendredux

Using Javascript to perform redirects within a Rails application

Currently working on a Facebook application using Rails. There are certain pages that require users to be logged in, otherwise they will be directed to a "login" page. I am unable to use redirect_to for this purpose as the redirection must be done through ...

javascriptruby-on-railsrubyfacebook

Having trouble accessing an element after parsing JSON using jQuery, ending up with an "

Here is a snippet of code with a text and a button: <div id="divtest"> <h1> Bla </h1> </div> <button id="dugme1"> dugme </button> When the user clicks the button, the following script will be executed: $("#dugme1").cl ...

javascriptjqueryarraysjson

capture the element with the specified #hash using Jquery

Illustration: Assuming I visit google.com/#search function checkHash(){ if(window.location.hash != hash) { $("elementhashed").animate( { backgroundColor: "#ff4500" }, 1 ).animate( { backgroundColor: "FFF" }, 1500 ); hash = window.location.hash; } t=se ...

javascriptphpjquery

Could you provide the parameters for the next() function in Express?

Working with Express.js to build an API has been a game-changer for me. I've learned how to utilize middlewares, handle requests and responses, navigate through different middleware functions... But there's one thing that keeps boggling my mind, ...

javascriptexpressmiddleware

There has been an issue with parsing the JSON file due to an invalid character found at

I keep encountering a parse error whenever I attempt to send a post request to the server. $.post("../php/user_handler.php", formData, function(data) { var result = JSON.parse(data); if(result.status === 'error') { ...

javascriptphpjqueryjson

Creating a navigation bar that stays fixed at the top of

Hey there, currently I am utilizing a combination of jquery and css to affix my navigation menu at the top when scrolled. However, the problem is that my navigation menu is positioned beneath a div with a height set in viewport units (vh). The jquery scr ...

javascripthtmlcss