How sent image and JSON form Angular httpClient

Question

I want to send an image and JSON with one request to the server. This is my JS code, I want to send with Angular.

function onSubmit(){

  var formData = new FormData();
  formData.append("file", document.forms["userForm"].file.files[0]);
  formData.append('user', new Blob([JSON.stringify({
    "firstName": document.getElementById("firstName").value,
    "lastName": document.getElementById("lastName").value})], 
    {type: "application/json"}));

   var boundary=Math.random().toString().substr(2);
   fetch('/api/cateogry/saveCategory', {
     method: 'post',
     body: formData}).then(function(response) {
       if (response.status !== 200) {
         alert("There was an error!");
       } else {
         alert("Request successful");
       }
      }).catch(function(err) {
        alert("There was an error!");
      });;
    }

I want to send an image and JSON with field firstName,lastName. — SIn san sun, Mar 01 '19 at 13:07
Work good, I acept image and JSON on my backed but I want to translate JS code in to angular httpClient code. — SIn san sun, Mar 01 '19 at 13:09
Did you try - https://stackoverflow.com/questions/46059226/upload-image-with-httpclient — Anurag Srivastava, Mar 01 '19 at 13:10

score 0 · Answer 1 · answered Mar 01 '19 at 13:14

0

You could send the image as a String, convert the image to String using Base64 and then send it in the Json. take a look at this: Converting an image to base64 in angular 2

answered Mar 01 '19 at 13:14

Jon Fernandez

117
1
8

Yea, I know that, but I do not want to send as a bas64, I want to like this in my JS code. – SIn san sun Mar 01 '19 at 13:16

How sent image and JSON form Angular httpClient

1 Answers1