How can i upload images with text in angular 7 with form builder to Nodejs?

Question

I want to make a Blog component in Angular where i want to upload image with texts (like captions) in single click.

I have used form builder also but it didn't worked.

e.g

profile.component.html

<form [formGroup]="profileEdit" (submit)="onEditSubmit(profileEdit)" enctype="multipart/form-data">
   <div class="form-group">
        <div class="image-upload">
             <label for="file-input">
                   <img src="../../../../assets/test.jpg" alt="Paris" style="width:20%;">
             </label>
            <input id="file-input" type="file" name="image" formControlName="image" #image (change)="onFileSelect($event)" multiple/>
        </div>
    </div>
    <div class="form-group">
         <label class="form-label" for="name">Your Name</label>
                <input type="text" class="form-control" formControlName="name" #name placeholder={{user.user.name}} tabindex="1" required>
     </div>

     <div class="text-center">
         <button type="submit" class="btn btn-start-order" [disabled]="profileEdit.pristine || profileEdit.invalid">Save</button>
      </div>
</form>

And profile.component.ts file

export class ProfileComponent implements OnInit {
  private _profileData:any;
  public edit:boolean=false;
  public user:any;

  public editedProfile:any;


  profileEdit:FormGroup;

  constructor(private _fb:FormBuilder) { 
           this.createForm();
       }

  ngOnInit() {
        };
  };

  createForm(){
  this.profileEdit = this._fb.group({
   name: [null,Validators.required],   
   image:[""]
 });

}

  onEditSubmit(){
    const formData = new FormData();
    formData.append("image",this.profileEdit.get("image").value);
    formData.append("name",this.profileEdit.get("name").value);


//formData.append("user",JSON.stringify(user));

//console.log(formData);
/*this._profile.editProfile(formData).subscribe(data=>{
  this.editedProfile = data;
  if(this.editProfile){

  }else{

  }
});*/
console.log(this.profileEdit.value);
  }

  onFileSelect(event) {
     if (event.target.files.length > 0) {
     const file = event.target.files[0];
      this.profileEdit.get("image").setValue(file);
    }
   }
}

I want to upload the image with the text to nodejs by single component

Muhammed Sidan · Accepted Answer · 2019-07-07 17:09:07Z

2

You can send image and text from angular app to nodejs through formdata

<input type="file" (change)="fileProgress($event)">
<input type="text" #caption> //Enter your caption
<button (click)="fnPostImage(caption.value)">post image</button>

export class PostImage {

public fileData;

 constructor(private http: HttpClient) { }

 fileProgress(event) {
    this.fileData = event.target.files;
  }

 fnPostImage(caption) {
    const formData = new FormData();    
    for (var i = 0; i < this.fileData.length; i++) {
      formData.append("image", this.fileData[i], this.fileData[i].name); 
     } 

    formData.append("caption", caption);

    this.http.post('https://api_url', formData).subscribe( (response) => {
       console.log(response) 
    }) 

  }

}

answered Jul 7, 2019 at 17:09

Muhammed Sidan

3313 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i upload images with text in angular 7 with form builder to Nodejs?

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