Utilizing formData.append in TypeScript to handle arrays

Question

Utilizing formData.append in TypeScript to handle arrays

Hey there! I'm facing an issue while trying to send a form to my Profile endpoint. The problem lies in the 'user:{}' field, as I am unable to properly insert my array data into this specific field.

Here is a breakdown of the fields within my endpoint:

{
  "id": 4,
  "ci": "123456",
  "photo": "http://127.0.0.1:8000/media/profiles/12809632_10208569440535095_617453747387788113_n_zAUAVMf.jpg",
  "phone_number": "+59177621589",
  "user": {
    "id": 5,
    "username": "sdanderson",
    "first_name": "ssss",
    "last_name": "ssss"
  },
  "experience": "null",
  "typeskill": [
    {
      "id": 1,
      "skill_name": "developer"
    }
  ]
}

Additionally, here is the service function that I have created for making a PUT request:

putProfile(id:string,token:string,body:any,files:any):Observable<Profile>{

//saving the data to be sent to the endpoint for updating
    let formData: FormData = new FormData();

    for (let file of files) {
        formData.append('photo', file);
    }
    formData.append('ci',body['ci']);  
    formData.append('phone_number', body['phone_number']); 
    formData.append('experience',body['experience']);
    formData.append('user',body['user']);//inside this field, I have: body['user'].id, body['user'].first_name, and body['user'].last_name

    //add headers
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append("Authorization","Token "+ token);

    return this.http.put(this.api+"profile/"+id+'/',formData,{headers})
        .map(this.extractData)
        .catch(this.handleError);
}

angular typescript

Answer 1

Answer №1

The method append() in FormData can only receive objects of type string or blob. If you want to append an array, you should use the JSON.stringify() method to convert your array into a valid JSON string.

This is how you can do it:

formData.append('user', JSON.stringify(body['user']));

To find out more about JavaScript's JSON object, click here.

Answer 2

The method append() in FormData can only receive objects of type string or blob. If you want to append an array, you should use the JSON.stringify() method to convert your array into a valid JSON string.

This is how you can do it:

formData.append('user', JSON.stringify(body['user']));

To find out more about JavaScript's JSON object, click here.

Answer 3

Answer №2

you can give this method a shot, it has been successful in my past projects

 let data = new FormData();

    for (let file of files) {
        data.append('image[]', file);
    }

Answer 4

you can give this method a shot, it has been successful in my past projects

 let data = new FormData();

    for (let file of files) {
        data.append('image[]', file);
    }

Answer 5

Answer №3

Dealing with a comparable issue, I opted to create an array in the key. In your scenario, it would be implemented as follows:

formData.append('user[id]', body['user']['id']);
...

This method proves beneficial when interpreting JSON on the server side is not feasible or desired.

Answer 6

Dealing with a comparable issue, I opted to create an array in the key. In your scenario, it would be implemented as follows:

formData.append('user[id]', body['user']['id']);
...

This method proves beneficial when interpreting JSON on the server side is not feasible or desired.

Answer 7

Answer №4

I needed to include four images under the same formdata id. Here is how I achieved it in my code:

const selectedFiles = event.target.files;
  for(let i=0; i<selectedFiles.length; i++){
    this.formData.append("images", selectedFiles[i]);
  }

Answer 8

I needed to include four images under the same formdata id. Here is how I achieved it in my code:

const selectedFiles = event.target.files;
  for(let i=0; i<selectedFiles.length; i++){
    this.formData.append("images", selectedFiles[i]);
  }

Answer 9

Answer №5

My task involved integrating Angular frontend with a Spring backend, where I had to handle a formData containing a file being sent. The additional requirement was to send an array to the backend using the same endpoint for transaction rollbacks.

Note: Another potential and perhaps better approach would have been to utilize spring-boot-multipart-requests

putProfile(id:string,token:string,body:any,files:any):Observable<Profile>{

    let formData: FormData = new FormData();

    for (let file of files) {
        formData.append('photo', file);
    }
   ...
    
    let json = JSON.stringify(body['user']);
    formData.append('jsonUserArray',json);
    
    //service call  
    ...
}

//backend spring boot

@PostMapping("/profile/{id}")
public ResponseEntity<Object> updateProfile(@PathVariable("id") int id,
                                           @RequestParam(required=false) String jsonUserArray,
                                           @RequestParam(required=false) MultipartFile file,
                                           @NotNull(message = "Authentication error.") Authentication authentication) throws Exception {
    ResponseEntity<Object> response = null;
    boolean accept = accept.equals("true") ? true: false;
    //convert the json to list of Users
    ObjectMapper mapper = new ObjectMapper();
    List<User> listUsers = mapper.readValue(jsonUserArray, new TypeReference<List<Users>>(){});
    ...
    //service call  
}

Answer 10

My task involved integrating Angular frontend with a Spring backend, where I had to handle a formData containing a file being sent. The additional requirement was to send an array to the backend using the same endpoint for transaction rollbacks.

Note: Another potential and perhaps better approach would have been to utilize spring-boot-multipart-requests

putProfile(id:string,token:string,body:any,files:any):Observable<Profile>{

    let formData: FormData = new FormData();

    for (let file of files) {
        formData.append('photo', file);
    }
   ...
    
    let json = JSON.stringify(body['user']);
    formData.append('jsonUserArray',json);
    
    //service call  
    ...
}

//backend spring boot

@PostMapping("/profile/{id}")
public ResponseEntity<Object> updateProfile(@PathVariable("id") int id,
                                           @RequestParam(required=false) String jsonUserArray,
                                           @RequestParam(required=false) MultipartFile file,
                                           @NotNull(message = "Authentication error.") Authentication authentication) throws Exception {
    ResponseEntity<Object> response = null;
    boolean accept = accept.equals("true") ? true: false;
    //convert the json to list of Users
    ObjectMapper mapper = new ObjectMapper();
    List<User> listUsers = mapper.readValue(jsonUserArray, new TypeReference<List<Users>>(){});
    ...
    //service call  
}

Utilizing formData.append in TypeScript to handle arrays

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Steps to automatically update a component when the button is clicked

How can I use a single route in Angular 5 to direct all paths for an outlet to a single component?

Updating the navigation bar in Node/Angular 2 and displaying the sidebar once the user has logged in

Connection to mongo is currently unavailable for Middleware next

Updating the display in Angular 4 following modifications to an array

Creating a loading spinner with the help of an rxjs BehaviorSubject

Unable to close keyboard on Ionic 5 app for both Android and iOS platforms

Having trouble locating module '@angular/http'?

How can I display the value of a radio button that has been chosen?

Solving Checkbox Change Event Issue in Angular

Define the static property as an array containing instances of the same type

Tips for Integrating an Angular App into a Different Website

The Angular framework always initializes the list items in CDK drop List starting from the initial index

Sorting List Algorithm

Access the array values by their respective keys in an object that is returned from a custom JavaScript file utilizing the Node.js file system

ag-Grid open-source server-side filtering

Angular and Ionic collaborate by using ngFor to pass on the item.id during a (click) event

Ways to initiate an HTTP request within switchMap upon emission of a BehaviorSubject value

Exporting several functions within a TypeScript package is advantageous for allowing greater flexibility

The system is unable to process the property 'items' due to a null value