Finding the identification number of the file input in Plupload

I am facing a challenge with my application where I have multiple instances of Plupload on one page, divided into 3 categories. These instances can be manually added by inserting a new table row. Testing the dynamic uploading functionality using Codeception has proven to be difficult as there is no straightforward way to attach a file to a specific Plupload file input due to the unknown generated id and the inability to add a specific css class.

To retrieve the id of the current Plupload file input, I attempted the following:

init: {
                Init: function(up) {
                    console.log(up.id); // o_1aa1e71ku20lole1v7s1veqetje0
                    console.log(up.runtime); // html
                }
}

The issue arises when up.id does not match the id of the file input:

<input id="html5_1aa1e71krlg119o9ks61uvl17ledv" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,image/png,image/gif,application/pdf">
    

I am seeking assistance in how to obtain the id in order to apply a custom css class based on the section it belongs to, or if there is an alternative method to target a specific dynamically added Plupload input using Codeception?

Answer №1

To retrieve the value using JavaScript and utilize it accordingly.

For example, in my scenario, the code looks something like this (although my HTML structure may be complex, the concept remains consistent)

$id = $driver->executeJS('return $("#Product_5_idProduct").parent(".product-container").find(".moxie-shim.moxie-shim-html5").attr("id")');

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

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

In my Django project, I am utilizing pure CSS and Bootstrap. Everything appears as expected when I test it on my local machine. However, once deployed, the appearance changes. The font looks different from how it did before deployment: After deploying to ...

As soon as I integrated Bootstrap into my project, the color of the <li> tag became disordered and altered to a different hue

After integrating Bootstrap into my project, I noticed that the colors of the -li- tags became disordered and changed to a different color. How can I manage the colors while using Bootstrap in my project and also control them when hovering? <nav> ...

Is the float floating within another float?

This question may have a strange title, but I couldn't think of anything better to call it. So, here's the situation: I have a grid layout where I need my .search-wrapper to be 50% wide and floated to the right. In my demonstration on jsfiddle, ...

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

Is it possible to apply a margin to <details><summary> elements?

I am struggling with adding a margin to each of the children in my nested <details> elements .container { margin: 20px; } .parent, .child { outline: none; border: none; user-select: none; cursor: pointer; } <div class="container"> ...

What is the method for locating the background color within the html code on the Reddit platform?

I've been on a mission to uncover the elusive background color that rules the Reddit website. Despite my efforts in inspecting elements and identifying potential background layers, changing them did not alter the overall background color. There must b ...

Animation failing to be queued properly

Here is a snippet of code that moves a heading icon back and forth when you hover over the heading: jQuery('h1.heading').hover( function(){ $icon = jQuery('.heading-icon', this); if( ! $icon.is(':animated') ){ ...

Using Font Awesome Icons and Bootstrap to Enhance Google Maps Info Bubble?

I'm currently working on customizing links within a Google Maps info-bubble using Bootstrap and font awesome Icons. Successfully integrated a list-group from bootstrap for my links in the info bubble, but running into issues when trying to include a ...

Adjust the location of the scrollbar without affecting the alignment of the text

Currently, I'm experiencing a design issue with the textarea tag in my React project. The layout looks like this: https://i.stack.imgur.com/JG1sm.png I am looking to shift the scrollbar to the right without altering the text direction (rtl). Utilizin ...

Expanding a centered div beyond 100% width will cause the div to only enlarge towards the right side

I am currently in the process of revamping the login page for my website. I am facing a challenge where I am unable to adjust a div element to extend beyond 100% without it overflowing to the right side instead of the left. Despite trying various methods, ...

Troubleshooting problem with CSS borders in Microsoft Edge Browser

I am currently working on implementing the concept found at the following link: https://www.w3schools.com/howto/howto_js_tabs.asp, but with the additional feature of borders around the elements. However, I have encountered an issue specifically with Micro ...

I want to display the image column as the second column on large screens and as the first column on small screens in Bootstrap version 5

Having an issue with my Bootstrap v5 setup. I have a simple two-column layout with an image and text. I need the image to display in the second column on large screens and be the first column on medium and large screens. <div class="container" ...

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. https://i.sstatic.net/fGoqA.png Specifically, I included t ...

Implement a delay for updating the style of a button by using the setTimeout function

Is it possible to create a button that, when clicked, changes color to green and then reverts back to its original style after 3 seconds? I am able to change the button color using an onClick event in my script. However, I encounter scope errors when tryi ...

I am experiencing an issue with the Search Filter where it is not successfully removing

My goal is to filter colors when a user searches for a color code. Currently, the search function displays the correct number of filtered items, but the color bubbles are not being removed as intended. I am working on removing the bubbles when a search is ...

Enhance the appearance of your Vuejs application with conditional style formatting

I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example: If area1 == 'one', then assign the td-one CSS style. <tr v-for="version in versions" :key="version.id"> < ...

How can you create HTML elements with a unique perspective?

To achieve a unique perspective when rendering HTML elements, we explored various methods. However, we found that CSS skew transformations did not produce the desired effect, often distorting the element's aspect ratio or creating unwelcome warping. ...

Issue with Bootstrap 4: why isn't the second row taking up the full width

The body's structure is depicted in the following code: <main role="main" class="container"> <div class="starter-template"> <div class="row text-center"> <div class="col-md-4"> <d ...

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

Creating a simulated textarea with a scrollbar and dynamically refreshing the content

Due to limitations on markup content inside <p> tags, I have decided to create my own custom textbox. This textbox will function as a console where the battle progress is logged. Initially, I attempted using nested divs for each log, but encountered ...