Submit new profile will not work on Chrome

[bdavidxyz]

Describe the bug

If you create a new developer profile, then the main form submit will not work on Chrome, because 1) the avatar field is mandatory 2) the avatar field uses createObjectURL, which is not tolerated anymore for a media object on Chrome.

To reproduce

Steps to reproduce the behavior:

0. Use Google Chrome
1. Register
2. Click on "I'm looking for work"
3. Fill the whole form, scroll down to 'Save', and click on 'Save'.
4. See error

Expected behavior

The profile is successfully created

Actual behavior

Avatar field is in error. Chrome Console shows : Failed to execute 'createObjectURL' on 'URL'

See StackOverflow answer : https://stackoverflow.com/a/53821674/2595513
"This error is caused because the function createObjectURL no longer accepts media stream object for Google Chrome"

Please note that there are no bug when using Firefox.

Screenshots

I don't have a screenshot, alas

Additional context

No additional context

[joemasilotti]

Thanks for reporting this!

I just ran through in Chrome and was able to create my profile without issue. However, I didn't see the photo preview when I selected one from disk.

Regardless, I'd like to get this fixed. If you (or anyone else) wants to get this fixed then please comment on this issue.

[ryy]

Hi, I'm interested in working on the "I didn't see the photo preview when I selected one from disk." issue. Is it still available?

Maybe, we need to update not only the src attribute inside the img tag but also the src attribute of the source tag.

<!-- avatar -->
<picture>
  <!--  we have to update src of source tag -->
  <source media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)" srcset="avatar.jpeg"> 

  <!-- only change to src of img tag in app/javascript/controllers/file_upload_controller.js -->
  <img alt="Developer's avatar" data-file-upload-target="image" class="h-24 w-24 sm:h-32 sm:w-32 ring-4 ring-white object-cover rounded-full bg-gray-300" src="avatar.jpeg">
</picture>

[joemasilotti]

Oh, good call @ryy! Can you submit a PR so I can test it out?

[ryy]

@joemasilotti

I'm sorry.
I would like to write a system test but it's not working and is taking a long time. Headless-chrome will not start😱
I'll just post the diffs🙏

railsdevs.com/app/javascript/controllers/file_upload_controller.js

Lines 7 to 13 in 0da13f8

	select(event) {
	const file = event.currentTarget.files[0]
	this.imageTarget.src = window.URL.createObjectURL(file)
	this.imageTarget.srcset = window.URL.createObjectURL(file)
	this.imageTarget.classList.remove(this.visibilityClass)
	this.errorTarget.classList.add(this.visibilityClass)
	}

// railsdevs.com/app/javascript/controllers/file_upload_controller.js
  select(event) {
    const file = event.currentTarget.files[0]
    this.imageTarget.src = window.URL.createObjectURL(file)
    this.imageTarget.srcset = window.URL.createObjectURL(file)
+  const picture = event.currentTarget.closest('div').querySelector('picture');
+  if(picture) {
+    const sources = picture.querySelectorAll('source');
+    sources.forEach(source => {
+      source.srcset = window.URL.createObjectURL(file);
+    });
+  }
    this.imageTarget.classList.remove(this.visibilityClass)
    this.errorTarget.classList.add(this.visibilityClass)
  }

[joemasilotti]

@ryy, don't worry about a system test for this.

Can you please submit a PR without it so I can review and merge? Thanks!

[ryy]

@joemasilotti
I've just submitted a PR!

[joemasilotti]

Awesome, thanks! I’ll review soon.

[joemasilotti]

Closed via #787.