"Troubleshooting: Ajax File Uploader Plugin Not Functioning Properly

Today, our web site's file upload feature using the javascript plugin Simple-ajax-uploader suddenly stopped functioning (09/05/2019). The upload div/button is unresponsive when clicked.

This issue is not limited to our site; even the official plugin site is affected. It seems to be isolated to Chrome and specifically on computers where Chrome has been closed and restarted today.

We came across this article which mentions that Chrome Dev tools were updated today. Interestingly, though, our Chrome version remains unchanged since the restart (76.0.3809.132). The restart definitely triggered the bug - perhaps something changed during that process. But what exactly caused this glitch?

javascriptajaxgoogle-chromefile-uploadgoogle-chrome-devtools

Answer №1

Encountering the same issue earlier today.

Implemented a swift jQuery solution...

$('input[type=file]').css('position','relative');

Answer №2

UPDATE: Good news! Version 2.6.5 of the plugin has resolved the issue. You can disregard the information below.

Hey there, it's the plugin maintainer. For a temporary solution, consider removing or commenting out line 2002:

'position' : 'absolute',

Alternatively, it seems like the problem doesn't occur in Firefox. Nonetheless, I'll work on getting a fix out soon.

Answer №3

During my investigation on Chrome, I have confirmed that the button is indeed not functioning properly. The issue lies within the Stacking Context, with different browsers having their own unique implementations.

In essence, the outer div is obstructing the click events from reaching the inner input.

I recommend either utilizing a custom button or adjusting the styling of the current one (I've discovered that removing the position property from the outer div resolves the problem. Keep in mind that various properties such as position, transform, opacity, and z-index can lead to stacking context issues. Experiment with adding/removing/modifying these properties in both the outer div and the inner input).

In any case, it is a style-related matter rather than a JavaScript issue.

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

How can information be seamlessly transferred between two HTML pages using a script?

For my listview, I need to pass values like "name", "info", "hap", "lat," and "lon" to page2.html. What is the best way to achieve this? In PHP, I typically use POST or GET methods, but is there a more efficient approach? If using GET is recommended, how ...

javascriptjqueryjquery-mobilecordova

Creating an external link in Angular with query parameters

I have created an app where users have their addresses listed, and I want to implement a feature that allows me to open Google Maps when clicking on the address. However, I am currently facing an issue where instead of getting the actual value of {{ this. ...

javascriptangulartypescript

What could be causing the template UI to not display the Vue data?

As someone new to Vue, I have defined my Vue code in the following way: import Vue from "vue"; export default Vue.extend({ data: () => { message: "show message"; }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js ...

javascriptvue.js

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?

Currently, I am attempting to implement a functionality where I have two buttons at the top of my page. One button displays "French" by default, and when I click on the "English" button, it should replace the text with "French" using show and hide methods. ...

javascripthtmlcssbuttonhtml-table

The battle between Iteration and Recursion: Determining the position of a point in a sequence based

One of the challenges I'm facing involves a recursive function that takes a point labeled {x,y} and then calculates the next point in the sequence, recursively. The function in question has the following structure: var DECAY = 0.75; var LENGTH = 150 ...

javascriptmathrecursioniterationsequence

Updating or deleting query strings using JavaScript

My URL is structured as follows: http://127.0.0.1:8000/dashboard/post?page=2&order=title I am seeking a way to eliminate the query string ?page={number} or &page={number} Due to my limited knowledge of regular expressions, I am wondering if there ...

javascriptregex

Exploring the possibilities with New Relic and React

I am working with a react-router layout which currently contains a string that includes the New Relic javascript snippet. Now, I want to utilize the Browser Agent and set a custom attribute. newrelic.setCustomAttribute(name, value) The global variable n ...

javascriptreactjsnewrelic

Challenges when utilizing AJAX and JQuery for selecting multiple items and retrieving data from a JSON file

I am currently working on a live search feature that extracts data from a JSON file using AJAX and jQuery. The goal is to make the fetched value clickable and populate a multiselect field with it. Once this is achieved, the plan is to capture the remaining ...

javascriptjqueryjsonajaxmulti-select

Issue with the file input functionality in MySQL Ajax Table Editor

Currently, I am utilizing the MySQL Table editor from this project: , in order to manage MySQL tables by adding, updating, and deleting data. stop_list(stop_list_id,full_names,nationality,gender,document_type,document_number,date_of_birth,hair_colour,heig ...

phpmysqlajax

What is the proper method for terminating an Express app.all?

Here's a snippet of my code where I utilize the app.all method. In this scenario, I am invoking the fetchBuildings function based on the building ID or hash provided in the URL. Subsequently, I am assigning values to the title, description, and image ...

javascriptexpress

Encountering issues with resolving dependencies in webdriverIO

I'm attempting to execute my WebdriverIo Specs using (npm run test-local) and encountering an error even though I have all the necessary dependencies listed in my package.json as shown below: [0-2] Error: Failed to create a session. Error forwardin ...

javascriptnode.jsselenium-webdrivernpmwebdriver-io

What are the potential drawbacks of directly modifying the state in ReactJS?

According to the documentation, it is stated that An example provided explains how directly modifying state will not re-render a component: // Incorrect this.state.comment = 'Hello'; Instead, the correct way is to use setState(): // Correct ...

javascriptreactjs

Getting information from MongoDB using Node.js and Angular

Currently, I am facing difficulty in retrieving data from MongoDB (I'm also using Mongoose) and sending it to Angular in order to populate the ng-repeat list with the retrieved data. I have managed to either display the data on a blank page directly f ...

javascriptangularjsnode.jsmongodbmean-stack

Having trouble retrieving the iframe document using JavaScript

I'm currently facing an issue when trying to fetch an image from a website (not specifically Bing, this problem arises with every site). Upon running the code, it seems to be failing at the 'if' statement, indicating that there might not b ...

javascriptiframe

Setting the select option in AngularJS with predefined options can be easily achieved with

I am encountering an issue with a select element that has predefined options. Even though the select element is using ng-model, when the model is set to one of the option values, it fails to be selected. Below is the snippet of HTML code: <select clas ...

javascriptangularjs

Is there a way to repeatedly call a function without losing its previous outputs, without relying on a database? What alternative should I consider using instead?

I'm looking to create multiple tables using the same function in JavaScript. However, when I call the function again, the previous table disappears. I am new to coding in JavaScript and would appreciate any suggestions on how to handle this issue. I p ...

javascriptjquery

Tips for sending JSON-formatted data from a route to jQuery

Currently, I am facing a challenge with passing a JSON file retrieved from an API to jQuery. The goal is to implement an infinite scroll functionality using jQuery before displaying it in an EJS file. The issue arises when `res.json(data)` is utilized; ins ...

javascriptjquerynode.jsexpressroutes

Is there a way in JavaScript to disable a function's functionality?

I am dealing with a function that includes an if statement and an onclick function. My goal is to prevent the entire function from running if the if statement evaluates to true. I have attempted using return false, but it did not yield the desired outcom ...

javascriptecmascript-6vue.jsfrontend

Is it possible for me to choose to establish a new scope within a directive?

Encountered an issue while reusing a directive where some tags had a second directive with a new scope created using new or {}, while others did not have one. Attempting to create a new scope when one already existed resulted in an error being thrown by An ...

javascriptangularjsscope

What sets Observables (Rx.js) apart from ES2015 generators?

From what I've gathered, there are various techniques used for solving asynchronous programming workflows: Callbacks (CSP) Promises Newer methods include: Rx.js Observables (or mostjs, bacon.js, xstream etc) ES6 generators Async/Await The trend ...

javascriptecmascript-6generatorreactive-programmingrxjs5