Image upload concepts

Image upload

Client side

the Vue ImagesUploader :: startUpload handles the upload lifecycle

the code was refactored (in 65e0c49, August 2019) to rely on src/js/upload-file.js

the goal is to "build an object that ships all data needed for one file to upload :

• file : OS file object to upload
• key : unique key that identify it
• document : c2c document that will be saved once the file is uploaded
• dataUrl : raw representation of the image (used in HTML src attribute)
• status : INITIAL, SAVING, SUCCESS or FAILED
• percentCompleted "

Library blueimp-load-image-5.16 is used, initially only to parse exif metadata and handle jpeg rotation

In 7e60575 (June 2020) we added error handling and "handle resizing in addition to orientation : no resizing for SVG, images under 2 MB. For other images, limit height to 2048px (thus allowing panos)".

4 callbacks are used to update the ImagesUploader:

• onDataUrlReady is called at the end of the preProcess
• onUploadProgress to update the progress bar
• onSuccess, onFailure at the end

Server side

on server side the entry point for '/upload' is in views.py :: upload it filters for jpeg/png/gif/svg, optionally orients jpg, rasterizes svg, builds miniatures eg 200x200, 1500x1500... and returns image key to the client.

Thoughts on image format support

• Currently jpeg/png/gif/svg are supported

Other relevant formats:

• AVIF is supported by all browsers.
• "Ultra HDR" jpeg with an embedded HDR gain map is used by Google Pixel phones since 2023/Android14/Pixel8. It's supported by Chrome and Safari. It's not supported on c2c, see below.
• HEIF is used by Samsung phones from ~2018 to today ; and by Apple iPhones between 2017/iOS11/iPhone7 and 2024. It's only supported by Apple Safari browsers. It's not supported on c2c, see #1699.
• Jpeg XL is used by iPhones since 2024/iOS18/iPhone16. It's only supported by Apple Safari browsers. It's not supported on c2c.

HDR gain format support

HDR gain map is not supported because the gain map is stripped by blueimp-load-image. Reusing Image head could help.