File Upload or Image Upload In angular 6 with spring boot

Question

Please help me or suggest me

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

What is a possible way to upload an image in a form using formcontrolName if possible please give some suggestion

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

I am trying to upload an image file with other information like firstname, lastname and file and this is working perfect:

/* 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);

But my problem is I am sending FORM file with some string and Object, but FormData doesn't accept Object:

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

2nd option I am trying:

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 Object array that I assign with formDetails this is getting null value.

I am not sure how to do read image in one rest Service API calls? and for rest API I am using spring boot Rest Controller

can you suggest me any idea..

if you not able to answer please share or edit upvote so I and you can get answer — harkesh kumar
– harkesh kumar, Commented Aug 29, 2018 at 9:50
Did you print userobjArr in console if it is a form Object then userobjArr.getRawData() — Siddharth Jain
– Siddharth Jain, Commented Sep 14, 2018 at 10:45
Perhaps I'm oversimplifying or misunderstand the issue, but can you not just JSON encode the object into a string and JSON decode it on the other side? — thewildandy
– thewildandy, Commented Sep 14, 2018 at 10:48

Jaga · Accepted Answer · 2018-08-30 05:02:14Z

try this one :)

onBmpFileUploadChange(event) {
    const self = this;
    const target = event.target || event.srcElement;
    const files = target.files;
    let arrPath = files[0].name;
    arrPath = arrPath.split('.');
    if ((arrPath[1] === 'bmp') || (arrPath[1] === 'BMP')) {
      const xhttp = new XMLHttpRequest();
      const formData = new FormData();
      console.log('uploadBitmap');
      formData.append('bitmapFile', files[0]);
      xhttp.onreadystatechange = function () {
        event.target.value = null;
        if (this.readyState === 4) {
          if (this.status === 201) {
            console.log('bmpUploadedSuccessfully');
          } else {
            console.log('bmpUploadFailed')));
          }
        }
      };
      xhttp.open('post', '/formatgraphics', true);
      xhttp.setRequestHeader('Pragma', 'no-cache');
      xhttp.send(formData);
    } else {
      console.log('uploadFailedInvalidFile')));
    }
  }
}

Collectives™ on Stack Overflow

File Upload or Image Upload In angular 6 with spring boot

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related