Angular Image Cropper Not Retaining Cropped Image

I am currently implementing a feature using ngx-image-cropper

import { ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
user={ ..
};
image: any = '';
croppedImage: any = '';
transform: ImageTransform = {};
scale = 1;
showCropper = false;
profilePicUpload(e): void {
    this.imageChangedEvent = e;
    this.image  = e.target.files[0];
  }

  imageCropped(event: ImageCroppedEvent) {
    this.user.photo = event.base64;
    this.croppedImage = event.base64.substring(22);
  }
  imageLoaded() {
    this.showCropper = true;
  }

async addImg() {

 if(this.image){ 
      const path  = await this.UploadService.uploadFile(this.image);
      await new Promise(f => setTimeout(f, 2000));
      this.user.photo = '';
      this.user.photo += path;
     } 
}

Used the above code to upload an image but encountered an issue where the cropped image is not being saved, only the original image is saved.

If you have any solution for this, I would greatly appreciate it. Thank you!

Answer №1

Consider uploading the newly cropped image using this.croppedImage.

this.UploadService.uploadFile(this.croppedImage);

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

What is the best way to extract data from a proxy in VUE3?

Currently, I am utilizing the ref() function to store data retrieved from Firebase. However, when attempting to filter and retrieve a single record, the outcome is not as expected. Instead of returning a single object, something different is being displaye ...

Sizing the Angular CDK overlay backdrop appropriately when connecting it to a component

Is there a way to have a CDK overlay specifically cover a certain component using flexibleConnectedTo()? I am struggling with ensuring that the overlay backdrop only covers the targeted component, rather than the entire page. The CSS for the cdk-overlay-co ...

Implementing ng-multiselect-dropdown with option grouping

I've been working on organizing my options in ng-multiselect-dropdown but I'm having trouble finding references on how to do it. Here's the code I have so far: .html <ng-multiselect-dropdown [placeholder]="'Select one'" [data]= ...

Unit Testing JWT in Angular 2

Using JWT for authentication in my API calls. I am in the process of coding a service method. An interceptor is applied to all requests: public interceptBefore(request: InterceptedRequest): InterceptedRequest { // Modify or obtain information from ...

Implementing External Libraries with Angular: A Guide to Utilizing Tools for DOM Creation and Management

I am currently in the process of developing an Angular >2 library that serves as a wrapper for another library originally coded in vanilla/plain JavaScript. The external library in question is a gallery that performs actions such as DOM manipulation (c ...

Strategies for Implementing Pagination in an Angular 2 HTML Table Without the Use of Third-Party Tools

I have an HTML table that displays basic details along with images. I am looking to implement pagination for this table in Angular 2. Are there any alternatives to using ng2-pagination? ...

Struggling to link Angular frontend with Java backend?

Trying to make an API call in the backend, but encountering an error with no clear cause identified. The issue arose after configuring the spring security in the backend. The call should activate Preflighted requests OPTION. @Configuration @EnableWebSecur ...

Convert JS datetime to the appropriate ISO format

For a few days now, I have been attempting to save a timestamp from an API call to Postgres using my server-side C# code. When attaching DateTime.Now() to the data transfer object, everything seems to work fine. However, when trying to parse a datetime se ...

There appears to be a TypeScript error in the cheerio-select library located at /home/Documents/node_modules/cheerio-select/lib/index.d.ts(1,15): missing comma. Error code: TS1005

Hello, I encountered an error in my terminal while trying to run npm run dev & npm run build. [0] The compilation failed. [0] [0] /home/Documents/frontend/node_modules/cheerio-select/lib/index.d.ts [0] TypeScript error in /home/fislam/Documents/fronten ...

Troubleshooting the malfunctioning delete confirmation modal in Angular's ng-smart-table

Having trouble with ng-smart-table as the delete confirm modal is not displaying when the user tries to delete a row. Despite following the documentation and other examples, I have configured the delete settings for the table but the modal still does not ...

Changes in Angular forms are considered dirty when they differ from their initial state

I am utilizing Angular to design a basic input form like the one shown below. Is there a method available for me to monitor the "true" state of whether a form field has been edited or not, even if a user reverts back to the original value? For example, w ...

Angular 4: Triggering a Click Event within Dynamic HTML Content

After an extensive search, I am trying to discover a simple method for triggering a function when clicking on a link within dynamically generated HTML that is stored in a database. I am creating messages for users regarding transactions which contain vario ...

What method is the easiest for incorporating vue.js typings into a preexisting TypeScript file?

I currently have a functional ASP.NET website where I'm utilizing Typescript and everything is running smoothly. If I decide to incorporate jQuery, all it takes is running npm install @types/jQuery, and suddenly I have access to jQuery in my .ts file ...

Guide to integrating a legend with ngb-timepicker form?

Is there a way to add a specific tag to the fieldset of ngb-timepicker? I'm having trouble finding a solution for this. Has anyone else tried to do this before? ...

Exploring the integration of angular with html5 history.pushstate for navigation

Currently, I am enhancing my web application by implementing a new feature. This feature involves writing a script and loading it via a tag manager. The purpose of this script is to target specific UI components, remove them from the DOM, and inject new DO ...

Setting up default QueryParamsHandling in Angular

I have successfully developed an angular 9 application and implemented localization using @ngx-translate. To ensure that the app changes locale based on the 'lang' query parameter, I configured it accordingly. @Component({ selector: 'app- ...

The CSS styles are functioning correctly in index.html, but they are not applying properly in the component.html

When the UI Element is clicked, it should add the class "open" to the list item (li), causing it to open in a collapsed state. However, this functionality does not seem to be working in the xxx.component.html file. Screenshot [] ...

Utilize Charts.js to transform negative values into graphical representations

I am struggling with transforming the expense data into a positive number in my bar chart. The data consists of both income and expenses, and I want to display them as positive numbers for easier comparison. I attempted using Math.abs(this.barData[1]) in n ...

Typescript error points out that the property is not present on the specified type

Note! The issue has been somewhat resolved by using "theme: any" in the code below, but I am seeking a more effective solution. My front-end setup consists of React (v17.0.2) with material-ui (v5.0.0), and I keep encountering this error: The 'palet ...

Ways to effectively leverage the types from lib.d.ts?

It appears that the issue at hand is related to WebStorm IDE. I have reported it to WebStorm and you can track the progress here. Currently, I am working with Angular 2 and TypeScript 2. I am wondering how to explicitly utilize the location from lib.d.ts ...