Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix active storage firefox #30568

Merged
merged 1 commit into from Sep 13, 2017
Merged

Conversation

@lazaronixon
Copy link
Contributor

@lazaronixon lazaronixon commented Sep 11, 2017

Summary

Direct upload on firefox is not working because it can’t handle click
events on “input[type=submit]”.
After a successful upload we can see on console a xml parse error, it
happens because AWS S3 success body response is empty, so changing the
reponseType suppress this error.

Other Information

Xml parse error on console is not a problem, it works without problem.
If i use button.focus() before button.click() it works too, but on next lines of code we have a condition to insert a hidden input[submit] tag and again firefox cant click hidden input[submit] tags

@@ -7,6 +7,7 @@ export class BlobUpload {

this.xhr = new XMLHttpRequest
this.xhr.open("PUT", url, true)
this.xhr.responseType = "text"

This comment has been minimized.

@lazaronixon

lazaronixon Sep 11, 2017
Author Contributor

Suppress xml parser error on console

activestorage/app/javascript/activestorage/ujs.js Outdated
if (button) {
const { disabled } = button
button.disabled = false
button.click()

This comment has been minimized.

@lazaronixon

lazaronixon Sep 11, 2017
Author Contributor

button.focus() before click solves here too

activestorage/app/javascript/activestorage/ujs.js Outdated
button.type = "submit"
button.style = "display:none"
form.appendChild(button)
button.click()

This comment has been minimized.

@lazaronixon

lazaronixon Sep 11, 2017
Author Contributor

button.focus() not solves here because display:none

activestorage/app/javascript/activestorage/ujs.js Outdated
@@ -42,29 +41,12 @@ function handleFormSubmissionEvent(event) {
if (error) {
inputs.forEach(enable)
} else {
submitForm(form)
form.submit()

This comment has been minimized.

@javan

javan Sep 12, 2017
Member

This will prevent submitting "remote" forms via XHR, unfortunately, and do a full HTTP request instead. See:

# Must trigger submit by click on a button, else "submit" event handler won't work!
# https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
formContent += '<input type="submit" />'
form.querySelector('[type="submit"]').click()

Will need to explore using the button.focus() solution you suggested below.

@lazaronixon
Copy link
Contributor Author

@lazaronixon lazaronixon commented Sep 12, 2017

Seems focus solved the problem... I tested second case without focus and it works too...

@javan
Copy link
Member

@javan javan commented Sep 12, 2017

Can you squash your commits, please?

@lazaronixon lazaronixon force-pushed the lazaronixon:fix-active-storage-firefox branch 2 times, most recently to c06b614 Sep 12, 2017
Direct upload on firefox is not working because it can’t handle click
events on “input[type=submit]”.
After a successful upload we can see on console a xml parse error, it
happens because AWS S3 success body response is empty, so changing the
reponseType suppress this error.
@javan
javan approved these changes Sep 13, 2017
@javan javan merged commit 38b3af7 into rails:master Sep 13, 2017
2 checks passed
2 checks passed
codeclimate All good!
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@javan
Copy link
Member

@javan javan commented Sep 13, 2017

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.