Search code examples
2sxcdotnetnuke

2Sxc DNN: Custom Input Type: Image Cropper

I'm currently trying to extend the functionality of a 2sxc App in DNN. I created a new content-type and added my custom input-type (image cropper with cropper.js) as explained in this Tutorial: How To Create Custom Input Fields (v11.2)

It currently looks like this: current state

And the Data is currently stored as a base64 string.

The last thing that is missing now, is to save the cropped image, if possible with 2sxc ADAM. I found this Tutorial: Recipe: Form Files SaveInADAM in Your Custom WebAPI, but I don't know where to put the cshtml file. Here is my current code:

How to save the image with 2sxc ADAM?

Solution

  • This sounds like a great idea.

    Just before I guide you to completing this, I would like to note that you could also just save the crop coordinates (instead of the new image) and then use the built in image-resizer to crop to these at runtime.

    If you want to do that, you could save the coordinates as json or something in the field.

    Now if you really want to save the cropped image, use the SaveInAdam(...) command in your API controller https://docs.2sxc.org/api/dot-net/ToSic.Sxc.Dnn.ApiController.html#ToSic_Sxc_Dnn_ApiController_SaveInAdam_System_String_System_IO_Stream_System_String_System_String_System_Nullable_System_Guid__System_String_System_String_

    You can also find examples of this in the Mobius App.