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

Utilize MaterialUI's stepper component to jazz up your design with

Is there a way to customize the color of a material ui Stepper? By default, the material UI stepper's icons use the primary color for both "active" and "completed" steps. class HorizontalLinearStepper extends React.Component { state = { activeS ...

Tips for Sending Props While Utilizing CSS Modules

I've been working with a button component that utilizes the Tailwindcss framework and css modules for some extra styling. It currently looks like this, incorporating template literal to integrate the red background styling. CSS Module: .red { back ...

Updating AngularJS scope does not occur when a value is selected using jQuery

When writing a test using cucumber and selenium, I encountered an issue with a dropdown selection. After selecting a value using jQuery, pressing next resulted in an error. The problem seems to be that Angular has not updated its scope properly. <sele ...

Storing JSON strings in PHP differs from storing them in JavaScript

Using JavaScript, I can save a cookie using JSON.stringify(), which saves the cookie directly like this: '[{"n":"50fb0d0cc1277d182f000002","q":2},{"n":"50fb0d09c1277d182f000001","q":1},{"n":"50fb0d06c1277d182f000000","q":1}] Now, I am sending this t ...

Capturing the MulterError

While using Multer, I encountered an issue with returning a custom error if a file already exists. My current approach involves using "cb(new Error('Flyer already exists'));" within a callback function when the file is detected as existing. Howev ...

Looking through a Json file and retrieving data with the help of Javascript

I am currently working on developing a dictionary application for FirefoxOS using JavaScript. The structure of my JSON file is as follows: [ {"id":"3784","word":"Ajar","type":"adv.","descr":" Slightly turned or opened; as, the door was standing ajar.","tr ...

What is the best way to modify the views directory for deploying on Vercel?

Currently facing an issue trying to deploy my Express application with EJS template on Vercel. Post deployment, encountering an internal server error along with the following message in the logs: Error: Failed to lookup view "home.ejs" in views directory " ...

What methods can be used to report errors with Sentry while offline?

One key feature of my app is its ability to function both offline and online. However, I'm wondering how I can ensure that errors are still sent to my Sentry dashboard even when a user is offline. ...

What is the method for dynamically creating an object in AngularJS by utilizing variables?

Creating Javascript Objects Dynamically Dynamic Object Creation in AngularJS Although I have the ability to create objects on the fly, I am facing challenges when trying to incorporate it into my own code. Here is a snippet of what I currently have: var ...

Managing actions on dynamically generated dropdown options in <select> elements

If I have a function that generates a dropdown, it is called from a parent component where props like state key, array, and onChange function are passed in. The dropdown items are dynamically created from the array. What I want is for the parent's sta ...

Guide on handling asynchronous data return within a reducer

I'm struggling to properly handle the state when receiving data from the back-end of my application. This is the code I have: if (action.type === actionTypes.getList) { const id = action.payload.userId; Axios.post(`${apiUrl}/lists`, { ...

Utilizing JSON Data with JQuery: A Beginner's Guide

I am using a setTimeout function to reload another function every 5 seconds. The update_list function is responsible for rendering entrances in a view. However, when there are many entrances and you have scrolled down, the list empties and reloads every e ...

Clicking an AngularJS button within a form is causing an unexpected page refresh

I am facing an issue with adding a new input field on click. I have two buttons, one to add and another to remove the input box. When I click on the add button, it should add a set of input boxes, but currently, it only adds one and refreshes the page, dis ...

Utilizing a custom filter for object manipulation within Vuetify's v-autocomplete

When using vuetify v-autocomplete with an object where the object consists of Key-Value pairs, the search functionality is based on the item-text. In my example, I am displaying the object as {1200-Chloride Systems}. Is it possible to make the search funct ...

Having trouble formatting an AJAX POST request properly

Despite my best efforts, I continue to encounter the dreaded 500 (Internal Server Errors) every time I try to execute a POST request to https://rates.tradelanes.us/bankaccount/record/create. I suspect it has something to do with the format of my data. Howe ...

Save the status of checkboxes in a JSON file using boolean values of true or false

When a user submits a form, I am retrieving the values of checkboxes and storing them as an array. The simplified form structure is as follows: <!-- gym_create.html - other input fields are omitted for brevity --> <form class="create-gym" role=" ...

Showing a property only as you scroll through the page

Seeking assistance on creating a scrolling effect for a box shadow property using HTML, CSS, and JS. The goal is to have the shadow appear with a subtle transition while scrolling and then disappear when scrolling stops. Here's the code I've be ...

SystemJS could not locate the root directory for RxJS

There seems to be an issue with SystemJS loading rxjs modules on Windows, as it throws a 404 Not Found error on the rxjs directory. This problem does not occur on OSX, and all modules are up to date. GET http://localhost:8080/node_modules/rxjs/ 404 (Not F ...

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

Implementing file change detection using view model in Angular

When using the input type file to open a file and trigger a function on change, you can do it like this: <input type="file" multiple="multiple" class="fileUpload" onchange="angular.element(this).scope().fileOpened(this)" /> The functi ...