Uploading Files or Images in Angular 6 Using Spring Boot

Question

Uploading Files or Images in Angular 6 Using Spring Boot

I need assistance or recommendations

---------------#################---------------

Is there a way to upload an image in a form using formcontrolName? Any suggestions would be appreciated.

------------###########################---------------------

I have been attempting to upload an image file along with other information such as firstname, lastname and file and it is functioning correctly:

/* File Upload request  to Upload file  */
this.currentFileUpload = this.selectedFiles.item(0);
let formdata: FormData = new FormData();
formdata.append('firstName', "Harkesh");
formdata.append('lastName', "kumar");
formdata.append('file', this.currentFileUpload);

However, my issue lies in sending a FORM file along with a string and an Object, as FormData does not accept the latter:

let formdata: FormData = new FormData();
formdata.append('functionId', this.functionId);
formdata.append('processId', this.processId);
formdata.append('file', this.currentFileUpload);
formdata.append('formDetails', userobjArr);

A second option I am exploring:

let formdata: FormData = new FormData();
formdata.append('file', this.currentFileUpload);

userDetails.name = "";
userobjWrapper["functionId"] = this.functionId;
userobjWrapper["processId"] = this.processId;
userobjWrapper["taskId"] = this.taskId;
userobjWrapper["file"] = this.currentFileUpload;
userobjWrapper["formDetails"] = userobjArr;

userobjArr is an array of Objects that I assign to formDetails, which ends up with a value of null.

I am uncertain about how to fetch an image in one rest Service API call. For the REST API, I am utilizing a Spring Boot Rest Controller.

Any ideas on how to proceed would be greatly appreciated.

angular forms typescript file-upload multipartform-data

Answer 1

Answer №1

Here is a suggestion for you :)

onImageUploadChange(event) {
    const self = this;
    const target = event.target || event.srcElement;
    const files = target.files;
    let imgPath = files[0].name;
    imgPath = imgPath.split('.');
    if ((imgPath[1] === 'png') || (imgPath[1] === 'PNG')) {
      const xhttp = new XMLHttpRequest();
      const formData = new FormData();
      console.log('uploadingImage');
      formData.append('imageFile', files[0]);
      xhttp.onreadystatechange = function () {
        event.target.value = null;
        if (this.readyState === 4) {
          if (this.status === 201) {
            console.log('imageUploadedSuccessfully');
          } else {
            console.log('imageUploadFailed')));
          }
        }
      };
      xhttp.open('post', '/formatimages', true);
      xhttp.setRequestHeader('Pragma', 'no-cache');
      xhttp.send(formData);
    } else {
      console.log('uploadFailedInvalidImage')));
    }
  }
}

Answer 2

Here is a suggestion for you :)

onImageUploadChange(event) {
    const self = this;
    const target = event.target || event.srcElement;
    const files = target.files;
    let imgPath = files[0].name;
    imgPath = imgPath.split('.');
    if ((imgPath[1] === 'png') || (imgPath[1] === 'PNG')) {
      const xhttp = new XMLHttpRequest();
      const formData = new FormData();
      console.log('uploadingImage');
      formData.append('imageFile', files[0]);
      xhttp.onreadystatechange = function () {
        event.target.value = null;
        if (this.readyState === 4) {
          if (this.status === 201) {
            console.log('imageUploadedSuccessfully');
          } else {
            console.log('imageUploadFailed')));
          }
        }
      };
      xhttp.open('post', '/formatimages', true);
      xhttp.setRequestHeader('Pragma', 'no-cache');
      xhttp.send(formData);
    } else {
      console.log('uploadFailedInvalidImage')));
    }
  }
}

Uploading Files or Images in Angular 6 Using Spring Boot

Answer №1

Similar questions

Obtain the default/initial argument type of typescript for extension purposes

What is the title of this specific switch operator syntax?

How can we avoid printing out undefined data from an Observable in Angular 2?

The module "node_modules/puppeteer/lib/types" does not contain the export "Cookie"

Error: No provider found for _HttpClient in the NullInjector context

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

Innovative approaches to enhancing Feathers services through the use of relational data in design patterns

Utilizing the filter function to sort users in React using Next.js and TypeScript

Access data in an array using a specific index in Typescript

The intermingling of two Generics can lead to an unexpectedly deep and potentially limitless Type instantiation

The concept of overloaded function types in TypeScript

Having an excess of 32 individual byte values

Changing an array of objects into an object containing two arrays in TypeScript

I'm struggling to transfer information from my form to TypeScript in Angular

How is it possible that this is not causing a syntax or compile-time error?

Adding headers to json-server: Step-by-step guide

``There is a pesky jQuery bug causing the page to unexpectedly refresh upon submitting an

Top Recommendations: Comparing Standalone Components and Modules in Angular Version 14

Closing the form and then trying to reopen it results in a crash

How can you change the name of a component in Angular2 CLI?