I am encountering an issue while attempting to upload a base64 encoded image from https://pastebin.com/1ereVVqh to imgur. The error message I keep receiving is as follows:
HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "https://api.imgur.com/3/image", ok: false, ...}
error:
data: {error: "Invalid URL (data:image/jpeg;base64,/9j/4AAQSkZJRg…CGmGI2nNxt/MW7l/qMleILRMoczAlq57S8Ia6HQg3UY5Z//Z)", request: "/3/image", method: "POST"}
status: 400
success: false
__proto__: Object
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for https://api.imgur.com/3/image: 400 OK"
name: "HttpErrorResponse"
ok: false
status: 400
statusText: "OK"
url: "https://api.imgur.com/3/image"
__proto__: HttpResponseBase
The code I am using is shown below:
upload.controller.ts
handleFileInput(e) {
const reader = new FileReader();
if (e.target.files && e.target.files.length) {
const [file] = e.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.imgurService.upload(reader.result, this.user.uid).subscribe((imgurResponse: ImgurResponse) => {
this.logger.debug(imgurResponse);
});
};
}
}
imgur.service.ts
upload(base64Img: any, uid: string) {
this.logger.debug('Handling file input');
this.logger.debug(base64Img);
this.logger.debug(`Uploading picture to ${this.IMGUR_UPLOAD_URL}`);
const headers = new HttpHeaders().set('Authorization', `${this.IMGUR_CLIENT_ID}`);
const formData = new FormData();
formData.append('image', base64Img);
formData.append('name', uid);
formData.append('type', 'file');
return this.http.post<ImgurResponse>(`${this.IMGUR_UPLOAD_URL}`, formData, { headers });
}
Does anyone have any insights into why this setup is not functioning as intended?