Multiple proof upload page

[raphodn]

Story

Following #639 where we added a dedicated "single proof upload" page.
Some users want to upload multiple proofs at the same time (proofs with the same type, location, date & currency = Price tags)

How

A dedicated page.
Loop on all selected images and upload them one by one.

ProofImageInputRow < ProofInputRow < AddPriceMultiple / AddPriceSingle / ProofAddSingle / (ProofAddMultiple)

[raphodn]

@serpico I just deployed #1043 in staging, if you want to test it out !
https://prices.openfoodfacts.net/proofs/add/multiple

One big caveat I think, is that it doesn't check each image exif if they are indeed from the same date.

[serpico]

I gave it a first try here are a few thoughts/feedback :

• I think we need a note or something to tell the user the "image level" is where it's at ( see screenshot ), I was looking for something at the bottom of the page for how for how to trigger the 2nd, n upload.

• From what I understood I selected 2 pictures ( ctrl + clic ) after clicking on "Select from device gallery" it went smoothly at first but after more careful observation only one appears in the proof ( appear to be effectively uploaded ) , cue only one image appears on the "zoomed preview" ( step 2 - after selecting the pics and pressing Done ).

Q : In case it works and X images are selected and validated in the file manager window should we have an equal number of X of "zoomed preview" images appearing here, like "stacked" ?

• On a second try I got a few error pop pups ( see below )

I'll wait for your answer/advice before going any further

[raphodn]

Thanks for the feedback !
I only tested locally, and sometimes got these errors, I thought I had fixed them but doesn't seem so...
I'll give it a try in staging, and do a second PR with some fixes/improvements 👍

[raphodn]

ok @serpico i did a quick fix ! the code isn't pretty, but it should work now 🙏

[serpico]

edit : Ok I got it !!! CTRL + click to select several images in the file manager window after pressing one of the "image-step" ( take picture/gallery/recent ) buttons - IMHO we need something ( an explainer, a pop up...) that says " you're about to upload only 1 image, if you want to upload more than one go back to .... and select several with CTRL + click..."

There must be something that eludes me here somehow.

I ( think ) do all the things required ( type, image, location, etc...) then the only button I have ( at the bottom ) is Upload, I click it.

I type up the EAN, the price

And I press Upload

On the following page I have the same picture ( of course, I wasn't able to upload any other ), but the price field is reset/virginized although the price I just added appears at the top of the right part of the screen as if I could enter another product and another price for the same picture ?

This feels more like "Upload multiples prices from the same picture" rather than "Multiple proof upload" don't it ?

TLDR: where is the button to upload another proof image, X other proofs image ?

[raphodn]

Wait you're not on the right page 😅

I'm talking about a new-dedicated-experiment page.
Experiments > Add multiple proofs.

Actually it shouldn't be possible to select multiple images elsewhere... 🤔

[serpico]

Wait you're not on the right page 😅

I'm talking about a new-dedicated-experiment page. Experiments > Add multiple proofs.

Actually it shouldn't be possible to select multiple images elsewhere... 🤔

I think I was on the right page

[serpico]

This morning I tried to upload 22 proof images in one go.

• As far as I can tell there might be some delay in the images being visible in dashboard > proofs. I had time to input 10 prices and only those 10 proofs were visible, I thought maybe the others weren't uploaded, but I reloaded the page ( either F5 or CTRL + R , I don't remember ) and another batch of 10 were visible - at least we need to warn the user to avoid confusion.

• Is there a way to clearly define/ensure the order in which the images will be uploaded ( and appear in dashoard > proof ) ? ( based on the order they appear in the previews ( step 1 and 2 ) ( see screenshots ) - or even better, based on the order the user select them in the file manager ( i.e in chronological or reverse chronological order for example ) For some user it could be significant ( when you have a list of EAN you want to process from top to bottom - not secara amburadul ).

In fact this probably need further investigation, the order seems not even to be the same between the 1st and the 2nd preview...compare the 2 screenshot, it's the same batch, step 1 and 2, in step 1 the mascarpone ( plastic pot green color ) was at the top, in step 2 it's in 3rd, finally in step 3 ( dashoard > proof ) it's 4th in the order ( fondue, arachides coques x2 which pictures are inverted/upside down and finally, relegated off the podium our old friend mascarpone ) - notice also the position of the inverted price tag, changing at each preview step.

Preview step 1

Preview step 2 I took 3 screenshots, from the top of the page down so we can see/follow the order of the preview.

Dashboard > Proofs the red line indicate the beginning of this batch, pic on the left of the red line, bottom row is the 1st of this batch, all the pictures on the top row follow from right to left.

Recap of the respective order by step :

Step 1 : mascarpone, fondue, raclette, raclette, cacahuètes

Step 2 : fondue, cacahuètes, mascarpone

Dashboard > proofs : fondue, cacahuètes, cacahuètes, mascarpone

[raphodn]

Todo

• show an info (or warning ?) message to remind users to send images from the same location + date
• raise an error if images have different dates
• investigate the ordering post-upload
• RAM: show thumbnail after upload ?

[thibaultmol]

Is it possible that all the images get loaded into ram in one go or something?
I'm not sure what's going on but I can say that on my phone firefox grinds to a halt and eventually the tab crashes if i try to add my 17 images which combined are 177MB (they're very high res)

also small fyi: I don't know if you're using the gps coordinates of the images that are uploaded, but if you do: do know that CERTAIN android phones seem to strip the gps coordinates exif data from images when uploading them through a browser, regardless of location permissions of the browser or the website. BUT this can be circumvented if you let it open a 'file picker' instead of 'an image picker'

[raphodn]

The code loops on each image, compresses them into .webp, and sends them to the server.

My photos are usually 10MB big, it's a bit slow but I didn't actually measure the split between the compression & the actual uploading to the server.

The photos displayed before upload are the raw/full-size so the browser might have a hard time at that moment ?

[thibaultmol]

I don't know what's going on, but the memory spiking is def happening because of the upload. (ignore my extremely high cpu usage, my pc is doing other things in the backgrounds atm. but it's unrelated, as i could repro this as well when my cpu usage was normal)

Kooha-2024-12-06-17-59-45.webm

here are my images: https://drive.proton.me/urls/PT8X329AWW#CBGZzMfgoh4k

[raphodn]

Linked to #1047

[serpico]

For the 2nd step ( where the proofs appear oversized - which is good, it makes the price easier to distinguish ) would it be an improvement to have a simple EAN search box ( button or press enter to validate ) on the right side for each proof ?

I intentionally de-zoomed the browser so the screenshot would show several proofs - but the rationale is the same at 100% zoom.

There's a lot of empty space on the right of the screen and it feels like it will be faster to input all the prices at this stage rather than upload only then go to the dashboard > Proofs and enter each and every price individually.

[raphodn]

From the discussions we're having with the rest of the team, and the speed we're going with integrating assisted contribution, we are rather focused at having a seperation between proof upload & price upload.

• these proofs wil arrive here for instance: New page that lists all Price tag proofs without any prices yet (= open for contribution) #1115
• soon these proofs will have their price & barcode auto-extracted, and users will be presented with individual price tags instead
• and we'll just need users to validate/amend on a per-price tag level

So short answer: the multiple proof upload page will stay as is (except for the todo i listed above !!)

[serpico]

Thanks for the clarification