Skip to main content

Getting 502 (Bad Gateway) when uploading image to Cloudinary via API call

Azeez

I'm trying to upload image to Cloudinary via the REST api  from Angular 7 app but i keep getting a 502 (Bad Gateway) response. Please help!

I have tried searching for solutions online but could not find any that addresses the issue

The service that connects to Cloudinary API is as below:

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type' : 'application/x-www-form-urlencoded',
    'X-Requested-With': 'XMLHttpRequest'
  })
};

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

  CLOUDINARY_URL = 'https://api.cloudinary.com/v1_1/xxxx/image/upload';
  CLOUDINARY_UPLOAD_PRESET = 'xxxx';

  constructor(private http: HttpClient) { }

  uploadImage(file: any):Observable<any> {
    console.log(file);
    let formData = new FormData();
    formData.append('file', file);
    formData.append('upload_preset', this.CLOUDINARY_UPLOAD_PRESET);
    console.log("upload image in progress");
    return this.http.post<any>(this.CLOUDINARY_URL, formData, httpOptions);
  }
}

The function that reads user selected image file is as below:

cloudFileChangeListener(event: any): void {
    let file = event.target.files[0];
    console.log(file);
    this.isImageUploading = true;
    this.imageService.uploadImage(file).subscribe(response => {
      this.isImageUploading = false;
      console.log(response);
      this.imageUrl = response.secure_url;
    }, err => {
      this.isImageUploading = false;
      console.log(JSON.stringify(err));
    })
  }

Error returned is as below:

{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":502,"statusText":"Bad Gateway","url":"https://api.cloudinary.com/v1_1/xxxx/image/upload","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://api.cloudinary.com/v1_1/dexihbyv4/image/upload: 502 Bad Gateway","error":"<h2>Incomplete response received from application</h2>"}
0

Comments

3 comments

Date Votes
  • Raya Straus

    Hi Azeez, 

    Can you please open a ticket at support@cloudinary.com with a live example? 

     

    0
  • Serhii Diukarev

    did you find a solution?

    0
  • Aleksandar Kostadinov

    Hi Serhii,

    Just adding a response here since I saw you had opened a ticket directly with us that we've looked into, but in case anyone else comes across this thread.

    This was because in the upload parameters the 'callback' was defined instead of a 'notification_url'. The callback parameter redirects to the specified URL after upload and the 502 response was from that remote address. If you're looking for a field to set the webhook where the API response will be sent to, it should be set in the 'notification_url' parameter. For more details on that and in general about the upload method parameters please refer to the following section in the documentation -
    https://cloudinary.com/documentation/image_upload_api_reference#upload_method

    0

Post is closed for comments.

Didn't find what you were looking for?

New post