Feature Request: Mini thumbnail picture of item if you click and hold

[grocy]

Feature Request: Mini thumbnail picture of item if you click and hold

[berrnd]

If someone wants to try in the pre-release demo:

• A picture can be uploaded on the product edit screen
• On the stock overview page there is a new button next to consume which shows the picture of the product (only enabled when the product has a picture)

No demo data so far, I uploaded the picture above for product "Cucumber".

Still needs some polish, that's the first time we handle files, so also security things, file size checks, and so on (please don't overload my demo server :D).

The files are saved in data/storage/productpictures.

[BlizzWave]

I have a small addition to this. When editing products it would be useful with a small icon that shows if the product actually has a picture or not.

Please have a look at my example.

[cavebeat]

I'll second this. To have a basic image of the item.

[BlizzWave]

Does not like long file names. Gives you the error of maybe duplicate.
But I don't consider this a bug. Just a thing to note.
Maybe more accurate error messages?

[berrnd]

Changes since yesterday:

• Better file name validation
• Finished product edit page (added also possibility to remove a picture)
• On the stock overview page there is no separate button to show the picture, instead a little image icon next to the product name apperas and the whole name cell is clickable to show the picture, if the product has one
• The picture is also shown in the productcard (purchase/consume/etc. pages)

To workaround duplicate file names, just some random characters are prepended to the file name during the upload - I think that should be enough...

Let me know if you find any bugs or have any further/other ideas on this. :)

[BlizzWave]

Put picture and text in the center maybe?
Delete and upload button in view page

[berrnd]

Sure ... I'm happy when the rest seems to work... :)

Maybe I'm just a little worried about the (security) of the file upload API...

• Should not be possible to serve file from outside the data/storage directory (should already be fine because / is disallowed in the requested file name)
• The file is handled on both server and client side completely in RAM, no chunking or something and also no file size checks (only configured limits from PHP or the webserver will apply)
  • => So means is only good for small files as of now, so for product pictures it will be ok I think...

[berrnd]

I added a button in the dialog to jump to the product edit screen (and back on saving the product)...
Centering the title I did not get to work...

[BlizzWave]

I can make it center with CSS, but that will effect anything thats using BootBox - modal.
I dont know if theres anything else that uses that?

.modal-title {
    margin-left: auto;
}

[berrnd]

Thanks, yes that would affect every modal/dialog - I limited it to that one in ae58606.

[BlizzWave]

Something to note about the picture upload feature. It will accept any file. Not sure about the file size, but tried 25mb and that worked fine.

[berrnd]

The file API accepts all file types, but preselcting only image files in the file picker is possible - done in f90faca.

[eoldywib]

Would it be possible to add a gallery view to the stockoverview page?
Something like amazon pages (pictures+name)?
https://www.amazon.de/gcx/Geschenke-für-Erwachsene/gfhz/

I am going to install Grocy on a tablet for my grandma and for her reading the individual items will be a challenge. So, it would be very practical to show the items' image rather than their name.

Of course there will be performance challenges and images must be turn into thumbnails before hand.
However, then the results would be a elderly-friendly touch-enabled Grocy :)