Upload Image

The UploadImageComponent is an Angular component designed to facilitate the uploading and manipulation of images. It provides a user-friendly interface for selecting, uploading, cropping, and deleting images.

Usage

The component is typically used within a form to handle image uploads. It communicates with the server for direct upload or can be used to obtain base64-encoded image data.

<base-upload-image
  id="profilePicture"
  name="profilePicture"
  [label]="'Profile Picture'"
  [control]="profilePictureControl"
  [url]="'http://localhost:3000'"
  [uploadPath]="'/files/upload'"
  [deletePath]="'/files/'"
  [path]="'/files/'"
  [compressOptions]="{ quality: 0.8 }"
  [maxSize]="1024 * 1024"
  [uploadDirectly]="true"
  [croppingImage]="true"
  [croppingOptions]="{ aspectRatio: 1, maintainAspectRatio: true }"
  [objectPath]="'user'"
  (imageUploaded)="handleImageUploaded($event)"
  (imageDeleted)="handleImageDeleted()"
  (fileChanged)="handleFileChanged($event)"
></base-upload-image>

Styling

The component's styling is managed through the associated SCSS file (upload-image.component.scss). Adjustments to the appearance of the drag area, buttons, and feedback messages can be made by modifying the styles in this file.

Notes

The component provides a comprehensive solution for image uploading and manipulation.
Customize the component's behavior using various input properties.
Ensure that the necessary dependencies (such as ngx-image-cropper) are correctly installed.

For more detailed information, refer to the inline code comments in the source files.

ComponentsToast

PrototypesEmail verification