Chrome version 83 encounters an issue preventing file uploads

Question

Chrome version 83 encounters an issue preventing file uploads

I recently updated my Chrome browser to version 83 and encountered some issues with certain forms that utilize an "Ajax upload" component. Despite researching the problems associated with this new version (https://developers.google.com/web/updates/2020/05/nic83), I was unable to find any information related to forms, iframes, files, ajax, or posts.

I plan to create a sample on Fiddler to demonstrate the issue, but I'm reaching out to see if anyone else has encountered similar difficulties.

Interestingly, I have another form using a multifile, drag-and-drop uploader (dropzone.js) that is functioning properly. However, converting it may not be simple, so a quick solution would be preferable.

A basic example (as I don't have a sandbox for testing uploads): https://jsfiddle.net/drvespa/7ue8k94r/3/

In Chrome 83 (also tested in Canary version 85): no errors are thrown as the submission of the form is not caught by the AjaxUpload component. The callback function is being triggered before the submission completes, resulting in an empty response.
In Firefox: an error occurs because the AjaxUpload component is attempting to deserialize the 404 error from the dummy upload page.

The library can be found at :

/**
* Ajax upload
* Project page - http://valums.com/ajax-upload/
* Copyright (c) 2008 Andris Valums, http://valums.com
* Licensed under the MIT license (http://valums.com/mit-license/)
* Version 3.6 (26.06.2009)
*/

javascript ajax google-chrome

Answer 1

Answer №1

The issue arises from the library generating an <iframe>, setting its src attribute, and immediately listening for the load event of that iframe.

/**
* Creates iframe with unique name
*/
_createIframe: function () {
    // unique name
    // We cannot use getTime, because it sometimes return
    // same value in safari :(
    var id = getUID();

    // Remove ie6 "This page contains both secure and nonsecure items" prompt 

    var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
    iframe.id = id;
    iframe.style.display = 'none';
    d.body.appendChild(iframe);
    return iframe;
},

Next, in the submit method

            var iframe = this._createIframe();

            // some synchronous operations

            addEvent(iframe, 'load', function (e) { // ...

Due to the presence of the src attribute in the iframe, Chrome initiates its loading process. However, since the src is a fake URL, this operation resolves synchronously, causing the load event to be scheduled for the following event-loop iteration.

const frame = document.createElement('iframe');
frame.src = 'javascript:return false';
document.body.append(frame);
frame.addEventListener('load', (evt) => console.log('loaded', frame.src) );

setTimeout( () => frame.src = "about:blank", 0 );

// Results in Chrome:
// loaded javascript:return false
// loaded about:blank

// Results in Firefox:
// loaded about:blank

Hence, the only load event caught by this library pertains to the initial load event of an empty document, rather than the actual request's load event.

To resolve this issue, simply remove the src="javascript:false;" from the library code: https://jsfiddle.net/9phxmqjw/

Answer 2

The issue arises from the library generating an <iframe>, setting its src attribute, and immediately listening for the load event of that iframe.

/**
* Creates iframe with unique name
*/
_createIframe: function () {
    // unique name
    // We cannot use getTime, because it sometimes return
    // same value in safari :(
    var id = getUID();

    // Remove ie6 "This page contains both secure and nonsecure items" prompt 

    var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
    iframe.id = id;
    iframe.style.display = 'none';
    d.body.appendChild(iframe);
    return iframe;
},

Next, in the submit method

            var iframe = this._createIframe();

            // some synchronous operations

            addEvent(iframe, 'load', function (e) { // ...

Due to the presence of the src attribute in the iframe, Chrome initiates its loading process. However, since the src is a fake URL, this operation resolves synchronously, causing the load event to be scheduled for the following event-loop iteration.

const frame = document.createElement('iframe');
frame.src = 'javascript:return false';
document.body.append(frame);
frame.addEventListener('load', (evt) => console.log('loaded', frame.src) );

setTimeout( () => frame.src = "about:blank", 0 );

// Results in Chrome:
// loaded javascript:return false
// loaded about:blank

// Results in Firefox:
// loaded about:blank

Hence, the only load event caught by this library pertains to the initial load event of an empty document, rather than the actual request's load event.

To resolve this issue, simply remove the src="javascript:false;" from the library code: https://jsfiddle.net/9phxmqjw/

Answer 3

Answer №2

I have successfully resolved an issue by setting the srcdoc attribute of the iframe to a specific url within the AjaxUpload component.

To accomplish this, I used the following code:

iframe.setAttribute('srcdoc', this._settings.action);

This simple solution effectively fixed the problem I was facing.

The function responsible for creating the iframe can be found in the AjaxUpload.js file:

_createIframe: function(){
    var id = getUID();            

    var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');        
    iframe.setAttribute('id', id);
    iframe.setAttribute('srcdoc', this._settings.action);

    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    return iframe;
}

Answer 4

I have successfully resolved an issue by setting the srcdoc attribute of the iframe to a specific url within the AjaxUpload component.

To accomplish this, I used the following code:

iframe.setAttribute('srcdoc', this._settings.action);

This simple solution effectively fixed the problem I was facing.

The function responsible for creating the iframe can be found in the AjaxUpload.js file:

_createIframe: function(){
    var id = getUID();            

    var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');        
    iframe.setAttribute('id', id);
    iframe.setAttribute('srcdoc', this._settings.action);

    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    return iframe;
}

Answer 5

Answer №3

Thanks to this solution, our team was able to successfully fix the issue with uploading attachments on Atmail in Chrome 83.

To implement this fix, we inserted the setAttribute line into the AjaxUpload.js file within the '_createIframe' function. Placing it right below the setAttribute('id', id) call proved to be effective :)

Answer 6

Thanks to this solution, our team was able to successfully fix the issue with uploading attachments on Atmail in Chrome 83.

To implement this fix, we inserted the setAttribute line into the AjaxUpload.js file within the '_createIframe' function. Placing it right below the setAttribute('id', id) call proved to be effective :)

Answer 7

Answer №4

Our team used an outdated plugin in the past:

http://jquery.malsup.com/form/#options-object

If you were supporting ie8 within the last decade, there's a specific option you may have encountered...

{
    url: '/branded/image_upload',
    type: 'POST',
    iframe: false
}

We even had to resort to using a

<textarea></textarea>

hack in the response.

This code has been passed through numerous iterations over time!

Answer 8

Our team used an outdated plugin in the past:

http://jquery.malsup.com/form/#options-object

If you were supporting ie8 within the last decade, there's a specific option you may have encountered...

{
    url: '/branded/image_upload',
    type: 'POST',
    iframe: false
}

We even had to resort to using a

<textarea></textarea>

hack in the response.

This code has been passed through numerous iterations over time!

Answer 9

Answer №5

Appreciate your help! To fix image and document upload in Opencart 1.5 after the Chrome Update, you can add this code snippet:

iframe.setAttribute('srcdoc', this._settings.action);

You can find where to insert this code in \admin\view\javascript\jquery\ajaxupload.js file.

var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
            // Added src="javascript:false;
            // This prevents the IE6 prompt "This page contains both secure and nonsecure items"
            // It won't cause any issues.
            iframe.setAttribute('id', id);
               iframe.setAttribute('srcdoc', this._settings.action);
               iframe.style.display = 'none';
               document.body.appendChild(iframe);

Answer 10

Appreciate your help! To fix image and document upload in Opencart 1.5 after the Chrome Update, you can add this code snippet:

iframe.setAttribute('srcdoc', this._settings.action);

You can find where to insert this code in \admin\view\javascript\jquery\ajaxupload.js file.

var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
            // Added src="javascript:false;
            // This prevents the IE6 prompt "This page contains both secure and nonsecure items"
            // It won't cause any issues.
            iframe.setAttribute('id', id);
               iframe.setAttribute('srcdoc', this._settings.action);
               iframe.style.display = 'none';
               document.body.appendChild(iframe);

Chrome version 83 encounters an issue preventing file uploads

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How to display JSON containing nested objects in AngularJS using the ng-repeat directive

Halting the execution of a jQuery function when a condition is true

Conceal a div using jQuery when clicked

What is causing the error "Expected an assignment or function call and instead saw an expression" to occur in this situation?

The ajax call made a double request, with the first one returning a status of 400 and the second one

Containers for Comparing Images are Unable to Flexibly Wrap

Retrieve data from the database and showcase it in the input fields

Try making a series of interconnected fetch requests in Redux Toolkit that rely on the completion of the previous fetch

Codeception's Webdriver appears to be malfunctioning as the $I->fillField command is not functioning properly, despite the field

Using React Native to display an SVG path inside an SVG viewbox

Froala Editor: Innovative external toolbar that pops up when the button is clicked

How to add values at a particular index within an array using JavaScript

Is it possible to apply a styling to a table data cell based on the table header relationship

Ways to execute function when state changes, excluding initial loading

React allows for items to be exchanged between two lists

How can I convert an HTML/CSS form into a PDF without altering its CSS design?

Creating a file structure for JavaScript files in a Vue CLI project

Is there a way to invoke a function within an Angular Service from within the same service itself?

What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

How to retrieve an unknown JSON key in Vue.js when using v-for loop?