Resolve "Web IDE mangles some images uploaded"
What does this MR do?
Issue: #270870 (closed)
Some (not all) images uploaded through Web IDE are mangled. Apparently this is a regression that happened due to the fix in !44699 (merged)
Example of mangled image: gitlab-com/www-gitlab-com!65367 (fe63b8a4)
Note:
This error cannot be reliably reproduced. But it is undeniable that it was caused by a mismatch between atob in app/assets/javascripts/ide/components/new_dropdown/upload.vue and btoa in app/assets/javascripts/ide/stores/utils.js.
Basically, a browser bug sometimes makes atob(btoa(binary_data)) not equal to binary_data due to differences in encoding. hence we should avoid using atob and btoa at all.
Solution:
In !44699 (merged), we use btoa to encode image/binary content and upload. This is an unreliable approach. Instead we should fetch the blob and get its base64 contents.
Screenshots (strongly suggested)
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Related to #270870 (closed)