Preserving alterations to media files using an image cropper

I've created a special controller for an image cropping tool that pops up over a media item in the content section. Right now I can manipulate the crops in the overlay, but when I click "Save Crops", the changes don't stick. However, if I use the image cropper in the media section, everything works as expected.

I tried following the guidelines in the documentation to save the changes using the media resource:

    mediaResource.getById(1234)
       .then(function(media) {
             media.name = "I want a new name!";
             mediaResource.save(media, false)
               .then(function(media){
                   alert("Retrieved, updated and saved again");
               });
       });

In my overlay object, I have a submit function that is triggered when the user clicks on the "Save Crops" button:

submit: function (model) { //when user clicks save crops button
                    $scope.overlay.saving = true;
                    mediaResource.getById($scope.images[0].udi)
                        .then(function (media) {
                            media.umbracoFile = $scope.overlay.value;
                            mediaResource.save(media, false, []).then(function (media) { //save changes to media item, or create if new

                                console.log("On saving start end:", $scope);
                                $scope.overlay.saving = false;
                                $scope.overlay.show = false;
                                notificationsService.remove(0);
                                notificationsService.success("The crops for '" + media.name + "' have been saved");
                            });
                        });
                }

When I click on "Save Crops," which calls the submit function, I don't receive any error messages, but the changes are not actually saved. I'm confused about what steps to take with the media object to ensure my modifications are properly saved.

Answer №1

Ah, I believe I understand your point now. The default setting for the umbracoFile property of the Image utilizes the ImageCropper data type. This data type saves all image and cropping details within a JSON string formatted like this:

{
"src":"/media/1050/Image1.jpg",
"focalPoint":{"left":0.5,"top":0.5},
"crops":[
    {"alias":"crop1",
    "width":500,
    "height":800,
    "coordinates":{
        "x1":0.30206315789473687,
        "y1":0.0,
        "x2":0.28148947368421051,
        "y2":0.0}
        }
    ]
}

To display this information, you can retrieve the umbracoFile property as a string:

var fileData = image.GetPropertyValue("umbracoFile").ToString();

Therefore, when passing the model to your submit function, it needs to recreate the entire structure along with its respective values.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to create a Facebook reveal tab using either Javascript or .NET?

As a developer who jumped into Facebook development just before the recent changes, I am feeling lost when it comes to building apps now. I see many questions similar to mine about creating fan-gating features using Javascript only. Is there an up-to-date ...

What could be the reason for my failing express test?

I'm in the process of configuring a server using Node/Express and I want to write ES6 code, so I've incorporated babel into my setup. Currently, the server is operational, and I can successfully make the necessary requests. However, I am facing ...

Utilize Google Maps geocoding functionality to pinpoint a location and then

I've encountered this strange phenomenon, but first let's take a look at the code: HTML <div ng-app='maptesting'> <div ng-controller="MapCtrl"> <div id="map_canvas" ui-map="myMap" style ...

Adding inline SVGs to a Nuxt 3 Vite project: A step-by-step guide

Hey there, I've been struggling with importing inline SVGs into my Nuxt3 Vite project. Any advice would be greatly appreciated. I discovered that using <img src="~/assets/images/icons/push-icon-chatops.svg" /> works, but I actually ne ...

After manipulating the array, Vue fails to render the input fields generated by the v-for directive

After setting the value externally, Vue component won't re-render array items. The state changes but v-for element does not reflect these changes. I have a component that displays items from an array. There are buttons to adjust the array length - &a ...

What is the process for updating the values of Kendo Grid row elements by utilizing data from an external combobox?

I am currently working with a kendo grid that utilizes the roweditor function, allowing users to edit values of networks labeled as network1, network2, and network3 within the grid - let's refer to this as gridNetwork. On the same page, there is also ...

I am encountering an issue where JSON.parse is returning undefined when trying to

Upon receiving a string from my server, I am attempting to parse it into a JSON object. Here is the string and relevant code snippet: stringToParse = "\"{'female': 16, 'brand': 75, 'male': 8}\"" d ...

Guide on Generating SAS Token for Azure Table Storage in a jQuery Application

I am currently working on a jQuery web application that requires read-only access to an Azure Table Storage, fetching one record at a time by passing in the PartitionKey and RowKey. To simplify my code, I have integrated the Azure Storage JavaScript Client ...

Merging a variable and its corresponding value in JavaScript

I am attempting to achieve a similar functionality in Angular javascript (with simplified code): var modelName = "date"; if (attrs.hasOwnProperty('today')) { scope.modelName = new Date(); } In the scenario above, my intention is for scope.m ...

Is there a way to compare timestamps in PostgreSQL using moment.js and focus only on the date aspect?

I've encountered a small issue that has me stumped - I'm trying to figure out the best solution for it. The problem lies in a table I have, with attributes named "Start" and "End". My objective is to store every row in an array where the "Start" ...

How can I create a tooltip function in JavaScript/jQuery that uses the "this" keyword?

JSFiddle link: http://jsfiddle.net/lustre/awpnd6L1/1/ I am curious if it's possible to create a JavaScript function that consolidates the mouseenter code for a "More Info" tooltip. Rather than copying the code multiple times, is there a way to stream ...

Develop a responsive shopping cart using PHP and JavaScript

I am in the process of developing an ePos system that allows users to add items to their basket by simply clicking on them, and then calculates the total price without needing to refresh the entire page. I initially attempted to use $_SESSION and store th ...

Tips for troubleshooting Grunt in PHPStorm (or WebStorm)

Looking for tips on debugging grunt, such as using an event listener function, in PHP Storm. Does anyone have any ideas? I know that PHP Storm has Node.js support, but I'm not sure how to configure debug settings for debugging a grunt task. For examp ...

Is it possible to customize the MongoDB Collection before loading the web application by fetching data asynchronously using Promises?

I am currently working with MongoDB and NodeJS, trying to preload my Collection customers every time the site is loaded. The process involves emptying the collection, populating it with empty Documents, and then replacing them with real data fetched from a ...

Typing in Text within Kendo Textbox using Protractor

I'm encountering an issue with Protractor while trying to input text into a Kendo TextBox. The error message I receive is "ElementNotVisibleError: element not visible". Interestingly, when the text box is clicked on, the "style="display: none;" change ...

Having trouble with Angular resource when trying to overwrite URL

Currently, I have integrated angular resource to fetch a record from my AP. Here is the relevant controller information for this scenario. $scope.formInformation = formService.get({id:$state.params.form_id }); Additionally, here is the service code s ...

Sending an HTTP POST request from Angular 4 to Java SpringMVC results in the issue of POST parameters not

Currently, I am developing a REST API using Java Maven Spring Boot and Spring MVC. I have encountered an issue where Angular POST request parameters are not being recognized by SpringMVC's @RequestParam. Below is the Angular code snippet; saveAsSit ...

What is the method to update a div containing the video title when a user clicks on a related video?

How can I make a div update with the title of the currently playing video when a user clicks on another video? I am having trouble finding an event in the API that lets me know when the video source has changed. Is there a specific event I should be listen ...

Unpack an array with entries and an iterator

I am working with an array of objects, each containing the same properties. My goal is to create a function that will return an array of arrays, where each inner array holds values based on the property names of the objects. Here is an example input: inp ...

Issues with Google Analytics Event Tracker Inconsistent Performance

I am experiencing an issue with a Google Analytics event that is triggered when a user clicks on a form submission button to enroll in a course. The event uses data attributes within the button element. What's puzzling is that the event seems to be w ...