fix: Prever FileReader over URL.createObjectUrl

Apparently, URL.createObjectUrl is not supported in JSDom, see:
https://github.com/jsdom/jsdom/issues/1721

With FileReader we have the option to avoid it altogether.

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -233,10 +233,13 @@ describe('ContributionForm.vue', () => {
         })
 
         it('supports adding a teaser image', async () => {
+          const spy = jest.spyOn(FileReader.prototype, 'readAsDataURL').mockImplementation(() => {})
           expectedParams.variables.imageUpload = imageUpload
           wrapper.find(ImageUploader).vm.$emit('addHeroImage', imageUpload)
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
+          expect(spy).toHaveBeenCalledWith(imageUpload)
+          spy.mockReset()
         })
 
         it('content is valid with just a link', async () => {

webapp/components/ContributionForm/ContributionForm.vue

@@ -194,8 +194,15 @@ export default {
       this.$refs.contributionForm.update('content', value)
     },
     addHeroImage(file) {
-      this.imageUpload = file
+      this.formData.image = null
-      this.formData.image = file ? URL.createObjectURL(file) : null
+      if (file) {
+        const reader = new FileReader()
+        reader.onload = ({ target }) => {
+          this.formData.image = target.result
+        }
+        this.imageUpload = file
+        reader.readAsDataURL(file)
+      }
     },
     addImageAspectRatio(aspectRatio) {
       this.formData.imageAspectRatio = aspectRatio

webapp/components/PostTeaser/PostTeaser.spec.js

@@ -66,7 +66,7 @@ describe('PostTeaser', () => {
     }
 
     it('has no validation errors', () => {
-      const spy = jest.spyOn(global.console, 'error');
+      const spy = jest.spyOn(global.console, 'error')
       Wrapper()
       expect(spy).not.toBeCalled()
       spy.mockReset()