Question: How to use multiple Croppas in a component

[fontzter]

Hi, I would like to allow the user to upload multiple (infinite?) images. I tried having an empty array with a v-for directive and adding a copy of the current croppa to it. It works partially but I cannot get it drawn properly even using the @new-image-drawn method. Is there a recommended way to do this? Thanks!

[zhanziyang]

I cannot get it drawn properly

How is it drawn then? Can you post a screenshot and code snippet? Thanks.

I made a demo where you can add multiple croppa. I wonder if this is the way you want it to work. https://codepen.io/zhanziyang/pen/dmJgRe

[fontzter]

Thanks so much. I got further yesterday, but I am still having issues removing them. I want it to be dynamic so that when a user adds an image another croppa is available for the next image (without needing to click an add button). I also don't want to leave multiple croppas around if the user removes one.

Here is what I have so far: https://codepen.io/fontzter/pen/bvayZd?editors=1111

Thanks again!

[fontzter]

I think this is doing what I want now. https://codepen.io/fontzter/pen/bvayZd

I had to reference the data item with the index rather than the v-for iterator: v-model="croppa[i]" instead of v-model="c". Also, I only show the croppa if it is the last (empty one) or if it has .imageSet. This way when an image is removed, the element is hidden. Not perfect, but I think it is working as I wish. Thanks again.

[theprobugmaker]

@zhanziyang @fontzter Can you explain how the upload would work for multiple images like this? I want to create something similar where an user have his album and can select multiple images but I wanted to know how the upload portion would work in that case.

[nicksellen]

If anybody is interested, I implemented a MultiCroppa component for a project, it consists of:

• MultiCroppa.vue
• function to convert to multipart form data
• ... then the backend has to do some special handling

As I wanted to be upload a JSON document, with multiple images at arbitrary places without the document it took quite a bit of fiddling. I basically send a multipart upload with 1 application/json document for the main doc (named "document"), and then any number of image parts, where the filename is a dot-seperated path reference into the JSON document (e.g. "some.place.for.images.0.image"). It really depends on how you want to do the server handling.

Perhaps if I did it again though, I'd implement a seperate image upload API that gives you an image ID you can reference in the document... would make things simpler, and has the UX advantage that the uploads can happen whilst the user is writing the message/caption to go with the images.

Editing the document to add/remove images later also required special handling, as I want to be able to do partial updates to the server, just sending new images, or meta info about which to delete.

(I did not find a way to support multiple image selection in the "select image" dialog though...)