advance image uploader

[Ajand]

Image Editor is a component that will be used when an image in the Image Uploader doesn't fit in the selected constraint. It will give the user the ability to crop the image into the desired ratio and it will automatically change the image size to fit into the constraint.

specs:

• select ratio
• move image
• zoom image
• return the selected part of image

[Ajand]

After spending so many hours around editing SVG I find out it's so hard to edit SVGs and I think it's really no need to edit them anyway. If somebody is uploading SVG he wants to show all of it 100% and it's going to be under the size limit probably and if it's more than that we have no way to reduce its size unless we make a jpeg out of it so I think it's better to give up the SVG support for this and rely on properly positioning them at the showtime.

[Ajand]

Image Editor Component is almost completed.

There are 3 issues that need discussion @scco

• Currently, all images can not get outside of the box, but for png logos, we should make it so users could change the position freely without restriction but the problem is if we do this, png rectangle photos will also be able to get outside of the box
• UI and styling need rework.
• Even though that we can use mouse cursor and wheel to zoom and move the image I think we still need some buttons to for more accessibility.
  https://user-images.githubusercontent.com/64213712/138718652-62b8b6a7-44c8-4796-8e76-5643cc3b4c1b.mp4

[Ajand]

Even if the Image Editor component is completed it's not mergeable yet, since it needs tight integration with the Base Image Upload component.

TODOs for completing integration with Base Image Upload:

• will add them incremnetally

[scco]

so here is the plan for the "advanced" image uploader that would be reusable for later
slideshows, profile pictures and all that.

• baseInputUpload.vue would need a rewrite to add context to "what kind of stuff" you upload
  and give it specs like desired aspect ration, file limit, size limit ....

• uri would need to change from string to object to store raw and processed images for later edit-ability

heres the architecture / wireframes & actually the design and flow
https://www.figma.com/file/sUQSYyPfooqTcVdajfZm0t/dgrants?node-id=1220%3A5447

• we would love to get this validated

• then we ajand builds this to the end ( editor is done - rest is simple vue work )

• i would jump on to do the stylings / tailwind stuff afterwards

• then we just need to modify some other files slightly from :src="{uri}" to :src="{ IF uri.processed else uri.raw }"

• we also considered to downsize the scope but we would need this to work anyway later, so we should do it "right" and reusable anyway to be able to do profile pictures and slideshow later on.

[metafraction]

what's the status here?

[Ajand]

@mk1r almost finished. Will be done this week I guess.

[Ajand]

The component is finished. I created a new screen for testing and styling it at /image-uploader and after that, I will integrate it since the integration will depend on #506 .
@mds1 Is there a way to merge this into the main repo as an image-uploader-editor branch so @scco could style it easier without needing to clone my fork?

[scco]

added ui for all of this !

will play a bit ping pong with ajand
to close our masterpiece with good UX / UI finaly

• some helper text needs to get dynamic / conditional logic
• trigger for draw / crop needs to work outside of ImageEditor in ImageRow
• theres no delete image function ( see TrashIcon )
• remove map mouse scroll for zoom , it feels bad and not work 100%
• reset to 100% zoom size > @click on %
• 100% : instead of factor, go for % . so not 3.4 but 350% , 90% , 30% ...
• smaller steps for zoom in / out .
• resize browser window needs somehow a redraw/recalc of img in edit mode
• edit already croped images some some actions seems to not work .
• i can upload all kind of files - how to test errormsg 🙂
• bypass svgs!
• add "bg-grey-100" on drag images over dragzone