matheusmurta
2/15/2019 - 5:01 PM

Angular 7 upload POST HTTP with formData file images

Angular 7 upload POST HTTP with formData file images

  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';
  import { Event } from '../models/event';
  import { HttpClient, HttpHeaders  } from '@angular/common/http';
  import { StorageService } from 'src/app/services/storage.service';
  import { environment } from 'src/environments/environment';

  @Injectable({
    providedIn: 'root'
  })
  export class EventService {

    constructor(private http: HttpClient,private storageService: StorageService) { }

    getEvents():Observable<Array<Event>>{
      // return this.http.get<Array<Event>>(environment.apiUrl + '/events');
      return this.http.get<Array<Event>>(environment.apiUrl + '/events');

    }

    getEventById(eventId: number):Observable<Event>{
      // return this.http.get<Array<Event>>(environment.apiUrl + '/events');
      return this.http.get<Event>(environment.apiUrl + '/events/' + eventId);

    }

    getUserEvents():Observable<Array<Event>>{
      // return this.http.get<Array<Event>>(environment.apiUrl + '/events');
      return this.http.get<Array<Event>>(environment.apiUrl + '/user/events/');

    }

    deleteEvent(eventId: number): Observable<Event> {
      return this.http.delete<Event>(environment.apiUrl + '/events/' + eventId);
    }

    addEvent2(file, file2): Observable<any> {

     let  event =  {
      "name": "que nao var nao vai dar esse porra birlll",
      "description": "tetetete",
      "place": "casa",
      "category_id": 8,
      "logo": "teste.png",
      "banner": "teste.png",
      "is_private": false,
      "has_accessibility": false,
      "event_start": "01/01/2019 08:00",
      "event_end": "01/01/2019 10:00",
      "is_online": false,
      "eventLots": [
          {
              "name": "Lote Único",
              "ticket_price": 0,
              "start_date": "01/12/2019 00:00"
          }
      ]
  }

    console.log(JSON.stringify(event));
    console.log(file);
    console.log(file2);
   
      let formdata: FormData = new FormData();
      formdata.append("json", JSON.stringify(event));
      formdata.append('logo', file);
      formdata.append('banner', file2);

      formdata.forEach((value, key) => {
        console.log("key %s: value %s", key, value);
      })


      console.log(FormData)

      const auth_token = this.storageService.getCurrentUser().token;
      const headers = new HttpHeaders({ 'Access-Control-Expose-Headers': 'Content-Disposition' , 'Authorization':  auth_token });
      
  
      return this.http.post<any>( environment.apiUrl + '/user/events', formdata , {headers : headers})
    }

    addEvent(event: Event): Observable<Event>{


    //   event =  {
    //     "name": "Aqui nao",
    //     "description": "cara e brabo",
    //     "address_city": "São Joaquim de Bicas",
    //     "place": "casa",
    //     "category_id": 8,
    //     "logo": "teste",
    //     "banner": "teste",
    //     "is_private": false,
    //     "has_accessibility": false,
    //     "event_start": '01/01/2019 08:00',
    //     "event_end": "01/01/2019 10:00",
    //     "is_online": false,
    //     "eventLots": [
    //         {
    //             "name": "Lote Único",
    //             "ticket_price": 20,
    //             "start_date":  '01/01/2019 08:00',
    //             "end_date":  '01/01/2019 08:00',
    //             "max_individual_quantity": 1,
    //             "description": "aaaaa",
    //             "ticket_quantity": 100
    //         }
    //     ]
    // }

      const auth_token = this.storageService.getCurrentUser().token;
      const headers = new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': auth_token });
      return this.http.post<Event>(environment.apiUrl + '/user/events', event, {headers : headers})
    }

    editEvent(event: Event, eventId: number): Observable<Event>{
      return this.http.put<Event>(environment.apiUrl + '/events/' + eventId, event)
    }
  }