Problem/Motivation

Steps to reproduce

1. enable media, media_library core modules.
2. create a media field for a node type
3. set Media Library as a form widget for that media field
4. enable autosave for that node type, and for the easier testing, set 2000 as The interval to use for triggering autosave in milliseconds.
5. create a node with that type
5. edit that node and click to Add media on the media field and try to upload files there

Expected behavior:
After uploading the image files, media can be created there.

Actual behavior:
When the upload and the autosave happens at the same time, the upload stops, and the form widget is kinda stuck. Media is not created and I cannot retry the upload, I have to close the media library modal form, and again click to Add media. But even if I set "The interval to use for triggering autosave" to a higher number, then if I upload something just when the autosave AJAX call happens, it breaks the process again.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#5 3208516-05-disable-autosave-during-file-upload.patch570 byteskaszarobert

Comments

kaszarobert created an issue. See original summary.

kaszarobert’s picture

kaszarobert
Primary language Hungarian
commented
Issue summary: View changes
hchonov’s picture

hchonov
Primary language Bulgarian
Location Burgas
commented

Autosave should not be running while there is another element that is currently executing an AJAX request.

See autosave_form.js: 

          Drupal.autosaveForm.timer = setInterval(function () {
            if (!Drupal.ajax.instances.some(isAjaxing)) {
              triggerAjaxSubmitWithoutProgressIndication(Drupal.autosaveForm.autosave_submit_class);
            }
          }, Drupal.autosaveForm.interval);

Could you please confirm that the issue occurs only while the form is autosaving and you start uploading a media? Could you also please post the responses from both AJAX requests? The one of the autosave request and the one of the media upload?

kaszarobert’s picture

kaszarobert
Primary language Hungarian
commented

I encountered this problem with the Media Library form widget. But I can also confirm that it causes problems for Image or File fields, too, if I select a file to upload and right after that the Autosave happens, the file is not uploaded. But in case of File fields at least I can try the upload again. The Media Library's modal window doesn't work after the upload was unfinished, so I have to reopen it to make it work again.

When the Media Library upload starts, this AJAX call happens:

http://drupal9.localhost/web/media-library?media_library_opener_id=media_library.opener.field_widget&media_library_allowed_types%5Bimage%5D=image&media_library_allowed_types%5Bvideo%5D=video&media_library_selected_type=image&media_library_remaining=1&media_library_opener_parameters%5Bfield_widget_id%5D=field_bevezeto_media&media_library_opener_parameters%5Bentity_type_id%5D=node&media_library_opener_parameters%5Bbundle%5D=article&media_library_opener_parameters%5Bfield_name%5D=field_bevezeto_media&media_library_opener_parameters%5Bentity_id%5D=50051&media_library_opener_parameters%5Brevision_id%5D=50051&hash=q9JNHga6rGfJdjAdhLUynnDi7dO5BRbSuyqgRftFogc&ajax_form=1&_wrapper_format=drupal_ajax&_wrapper_format=drupal_ajax

The response is:

[{
	"command": "settings",
	"settings": {
		"ajaxPageState": {
			"theme": "claro",
			"theme_token": "8V2df7JG3jXM9vOOT8ZT2Cn3ld9LX1o9Gf8urd3MJvk",
			"libraries": "autosave_form\/drupal.autosave_form,book\/drupal.book,ckeditor\/drupal.ckeditor,ckeditor\/drupal.ckeditor.plugins.drupalimagecaption,claro\/drupal.nav-tabs,claro\/global-styling,claro\/media_library.theme,claro\/node-form,comment\/drupal.comment,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/drupal.autocomplete,core\/drupal.collapse,core\/drupal.date,core\/drupal.message,core\/drupal.states,core\/normalize,file\/drupal.file,filter\/drupal.filter,layout_discovery\/onecol,media_library\/ui,media_library\/widget,menu_ui\/drupal.menu_ui,node\/drupal.node,path\/drupal.path,settings_tray\/drupal.settings_tray,shortcut\/drupal.shortcut,text\/drupal.text,toolbar\/toolbar,toolbar\/toolbar.escapeAdmin,tour\/tour,user\/drupal.user.icons,views\/views.ajax,views\/views.module,workspaces\/drupal.workspaces.toolbar"
		},
		"ajaxTrustedUrl": {
			"\/web\/media-library?media_library_opener_id=media_library.opener.field_widget\u0026media_library_allowed_types%5Bimage%5D=image\u0026media_library_allowed_types%5Bvideo%5D=video\u0026media_library_selected_type=image\u0026media_library_remaining=1\u0026media_library_opener_parameters%5Bfield_widget_id%5D=field_bevezeto_media\u0026media_library_opener_parameters%5Bentity_type_id%5D=node\u0026media_library_opener_parameters%5Bbundle%5D=article\u0026media_library_opener_parameters%5Bfield_name%5D=field_bevezeto_media\u0026media_library_opener_parameters%5Bentity_id%5D=50051\u0026media_library_opener_parameters%5Brevision_id%5D=50051\u0026hash=q9JNHga6rGfJdjAdhLUynnDi7dO5BRbSuyqgRftFogc\u0026ajax_form=1\u0026_wrapper_format=drupal_ajax": true
		},
		"ajax": {
			"edit-upload-upload-button--7RycD9vtyPk": {
				"callback": "::updateFormCallback",
				"wrapper": "media-library-wrapper",
				"url": "\/web\/media-library?media_library_opener_id=media_library.opener.field_widget\u0026media_library_allowed_types%5Bimage%5D=image\u0026media_library_allowed_types%5Bvideo%5D=video\u0026media_library_selected_type=image\u0026media_library_remaining=1\u0026media_library_opener_parameters%5Bfield_widget_id%5D=field_bevezeto_media\u0026media_library_opener_parameters%5Bentity_type_id%5D=node\u0026media_library_opener_parameters%5Bbundle%5D=article\u0026media_library_opener_parameters%5Bfield_name%5D=field_bevezeto_media\u0026media_library_opener_parameters%5Bentity_id%5D=50051\u0026media_library_opener_parameters%5Brevision_id%5D=50051\u0026hash=q9JNHga6rGfJdjAdhLUynnDi7dO5BRbSuyqgRftFogc\u0026ajax_form=1\u0026_wrapper_format=drupal_ajax",
				"event": "mousedown",
				"keypress": true,
				"prevent": "click",
				"dialogType": "ajax",
				"submit": {
					"_triggering_element_name": "upload_upload_button",
					"_triggering_element_value": "Upload"
				}
			}
		},
		"file": {
			"elements": {
				"#edit-upload-upload--sMd8Z4jivXs": "png,gif,jpg,jpeg"
			}
		},
		"pluralDelimiter": "\u0003",
		"user": {
			"uid": "1",
			"permissionsHash": "b052e2f212dc5f0bfce7e0fda34eea7f0e2b0ad52b0b67eadba0633472a650da"
		}
	},
	"merge": true
}, {
	"command": "update_build_id",
	"old": "form-IGTuiN58t5wkz7WQfwRAnkI6t2agJNr_TkenEnRpsJU",
	"new": "form-1-979eYFJhJ6XkDaApeyMUsCFEHjfvMYlDes3ZkuZp0"
}, {
	"command": "insert",
	"method": "replaceWith",
	"selector": "#media-library-wrapper",
	"data": "\u003Cdiv id=\u0022media-library-add-form-wrapper\u0022\u003E\u003Cform class=\u0022js-media-library-add-form media-library-add-form media-library-add-form--without-input media-library-add-form--upload\u0022 data-drupal-selector=\u0022media-library-add-form-upload-3b7sfhy8p-c\u0022 enctype=\u0022multipart\/form-data\u0022 action=\u0022\/web\/media-library?media_library_opener_id=media_library.opener.field_widget\u0026amp;media_library_allowed_types%5Bimage%5D=image\u0026amp;media_library_allowed_types%5Bvideo%5D=video\u0026amp;media_library_selected_type=image\u0026amp;media_library_remaining=1\u0026amp;media_library_opener_parameters%5Bfield_widget_id%5D=field_bevezeto_media\u0026amp;media_library_opener_parameters%5Bentity_type_id%5D=node\u0026amp;media_library_opener_parameters%5Bbundle%5D=article\u0026amp;media_library_opener_parameters%5Bfield_name%5D=field_bevezeto_media\u0026amp;media_library_opener_parameters%5Bentity_id%5D=50051\u0026amp;media_library_opener_parameters%5Brevision_id%5D=50051\u0026amp;hash=q9JNHga6rGfJdjAdhLUynnDi7dO5BRbSuyqgRftFogc\u0026amp;ajax_form=1\u0026amp;_wrapper_format=drupal_ajax\u0022 method=\u0022post\u0022 id=\u0022media-library-add-form-upload--3b7SfHy8p-c\u0022 accept-charset=\u0022UTF-8\u0022\u003E\n  \u003Cdiv class=\u0022media-library-add-form__input-wrapper js-form-wrapper form-wrapper\u0022 data-drupal-selector=\u0022edit-container\u0022 id=\u0022edit-container--Xqbo3H6AR3I\u0022\u003E\u003Cdiv id=\u0022ajax-wrapper--pPGF9ndQE-o\u0022\u003E\u003Cdiv class=\u0022js-form-item form-item js-form-type-managed-file form-type--managed-file js-form-item-upload form-item--upload\u0022\u003E\n      \u003Clabel for=\u0022edit-upload-upload--sMd8Z4jivXs\u0022 id=\u0022edit-upload--AJZ3x7QMkcg--label\u0022 class=\u0022form-item__label\u0022\u003EAdd file\u003C\/label\u003E\n        \u003Cdiv id=\u0022edit-upload--AJZ3x7QMkcg\u0022 class=\u0022js-form-managed-file form-managed-file is-single has-upload no-value no-meta\u0022\u003E\n  \u003Cdiv class=\u0022form-managed-file__main\u0022\u003E\n    \n    \u003Cinput data-drupal-selector=\u0022edit-upload-upload-smd8z4jivxs\u0022 type=\u0022file\u0022 id=\u0022edit-upload-upload--sMd8Z4jivXs\u0022 name=\u0022files[upload]\u0022 size=\u002222\u0022 class=\u0022js-form-file form-file form-element form-element--type-file form-element--api-file\u0022\/\u003E\u003Cinput class=\u0022js-hide upload-button button js-form-submit form-submit\u0022 data-drupal-selector=\u0022edit-upload-upload-button\u0022 formnovalidate=\u0022formnovalidate\u0022 type=\u0022submit\u0022 id=\u0022edit-upload-upload-button--7RycD9vtyPk\u0022 name=\u0022upload_upload_button\u0022 value=\u0022Upload\u0022\/\u003E\n  \u003C\/div\u003E\n\n  \n    \u003Cinput data-drupal-selector=\u0022edit-upload-fids\u0022 type=\u0022hidden\u0022 name=\u0022upload[fids]\u0022\/\u003E\n\u003C\/div\u003E\n\n            \u003Cdiv id=\u0022edit-upload--AJZ3x7QMkcg--description\u0022 class=\u0022form-item__description\u0022\u003E\n      One file only.\u003Cbr \/\u003E200 MB limit.\u003Cbr \/\u003EAllowed types: png gif jpg jpeg.\n\n    \u003C\/div\u003E\n  \u003C\/div\u003E\n\u003C\/div\u003E\u003C\/div\u003E\n\u003Cinput class=\u0022js-media-library-add-form-current-selection\u0022 data-drupal-selector=\u0022edit-current-selection\u0022 type=\u0022hidden\u0022 name=\u0022current_selection\u0022 value=\u0022\u0022\/\u003E\u003Cinput autocomplete=\u0022off\u0022 data-drupal-selector=\u0022form-1-979eyfjhj6xkdaapeymuscfehjfvmyldes3zkuzp0\u0022 type=\u0022hidden\u0022 name=\u0022form_build_id\u0022 value=\u0022form-1-979eYFJhJ6XkDaApeyMUsCFEHjfvMYlDes3ZkuZp0\u0022\/\u003E\u003Cinput data-drupal-selector=\u0022edit-media-library-add-form-upload-form-token-qkm0afm00sw\u0022 type=\u0022hidden\u0022 name=\u0022form_token\u0022 value=\u0022pJ_gopr94NaNGnkKZTHwxfUYsNvJxtSnpWMxSX4Xflk\u0022\/\u003E\u003Cinput data-drupal-selector=\u0022edit-media-library-add-form-upload-3jwjqoar5og\u0022 type=\u0022hidden\u0022 name=\u0022form_id\u0022 value=\u0022media_library_add_form_upload\u0022\/\u003E\n\u003C\/form\u003E\n\u003C\/div\u003E",
	"settings": null
}, {
	"command": "invoke",
	"selector": ".js-media-library-add-form-added-media",
	"method": "focus",
	"args": []
}]

But even if the upload is not finished, the autosave_form's AJAX call does happen:

http://drupal9.localhost/web/node/50051/edit?destination=/web/admin/content&ajax_form=1&_wrapper_format=drupal_ajax

And then the response is:

[]

If you look at the URLs, the Media Library widget uses a different callback URL than the autosave_form. Maybe the code that checks for AJAX calls should be updated in some way to check for those if possible?

kaszarobert’s picture

kaszarobert
Primary language Hungarian
commented
Status: Active » Needs review
StatusFileSize
new 3208516-05-disable-autosave-during-file-upload.patch570 bytes

I found a workaround: if the focused element is a file input (that also means someone clicked to the Browse button and right now the file dialog is open), then disable the autosave. That way the start of the file upload AJAX call and the autosave AJAX call cannot happen at the same time. The autosave will continue after the file upload is complete. I attach a patch for it.