Unable to successfully transfer a document

I am looking to upload a file onto my server. Here is what I have attempted:

<input (change)="uploadImage($event.target)" hidden accept="image/*" #uploadProfileImage type="file">
uploadImage(event) {
  const profileImage = event.files.item(0);
  this.profileService.postFile(profileImage).subscribe(data => {
    console.log(data);
    // do something, if upload success
  }, error => {
    console.log(error);
  });
}

postFile(fileToUpload: File): Observable<string> {
  const formData: FormData = new FormData();
  formData.append('fileKey', fileToUpload, fileToUpload.name);
  console.log(fileToUpload);
  return this.httpClient.post<string>('/api//profile/profile-picture', formData);
}

However, I encountered the following error:

Unexpected token I in JSON at position 0

https://i.sstatic.net/mE4n4.png

The server responds with "I have received the request!" as shown in the image, but an error still occurs.

What could be causing this issue?

Answer №1

In case someone encounters a similar issue:

The problem arises when the backend response is in string format. Converting it to JSON or an integer resolves the error.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 5: Ensure Constructor Execution Occurs Prior to Injection

I am working with a file that contains global variables: @Injectable() export class Globals { public baseURL:string; public loginURL:string; public proxyURL:string; public servicesURL:string; constructor(platformLocation: PlatformLocation) { ...

How to Keep Bootstrap 3 Accordion Open Even When Collapsed

I am in the process of building an accordion group with bootstrap 3. Here is the code I have so far: <div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <div class ...

Leveraging the 'window' object as a dependency in the useEffect hook within NextJS

I'm encountering an issue where I need a function to run when the type of window.performance.getEntriesByType("navigation")[0].type changes. I attempted to use useEffect for this purpose, but it resulted in a 'window is not defined&apos ...

The function .load callback was triggered on five separate occasions

I'm currently working with the code below and I have a feeling that I'm overlooking something important but just can't seem to figure it out. Basically, when the user clicks a button, a fragment of the page is loaded. Once this loading is s ...

I'm looking to find the Angular version of "event.target.value" - can you help me out?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/pages/home/home.component.html I am currently working on getting the dropdown menu to function properly for filtering the flags displayed below it. My initial thought was to replicate the search ...

Defining and initializing variables in TypeScript

Trying to get the hang of Angular and TypeScript, but I'm stuck on why I can't access my variable after declaring it. It looks something like this. export class aComponent implements OnInit { num : Number; num = currentUser.Id Encounterin ...

What is causing the consistent occurrences of receiving false in Angular?

findUser(id:number):boolean{ var bool :boolean =false this.companyService.query().subscribe((result)=>{ for (let i = 0; i < result.json.length; i++) { try { if( id == result.json[i].user.id) ...

Issue with SetTimeout not functioning properly on initial use within socket.io

Currently, I am trying to come up with a method to retrieve an IP address from a node server that is hosted on a dynamic IP. The issue I am facing is that the setTimeout function does not seem to work properly on the server side during the initial launch. ...

Angular 4 Query Building Plugin

Looking for a query builder plugin compatible with Angular 4 to create nested queries in my project. Some options I found include: https://www.npmjs.com/package/angular2-query-builder (Requires Angular 4+ ) (For AngularJS) (For Angular JS). The c ...

Troubleshooting a TypeScript error when trying to access an imported service in Angular 2

I've been working on creating a form that allows users to input required details, which will trigger a server call and save the information. However, no matter what I try, I keep encountering the following error: ORIGINAL EXCEPTION: TypeError: this.po ...

The lack of definition for the props value poses an issue in React.js Hooks

I'm currently developing a notepad web application that utilizes React Hooks for managing state variables. In order to fetch data from an API, I am using the axios library. The retrieved data consists of objects with fields such as _id, title, status, ...

Function utilizing variables parsed by Angular directive

I am currently working on a directive that I have created: feedBackModule.directive("responseCollection", ['deviceDetector', function (deviceDetector) { return { restrict: "E", templateUrl: 'js/modules/Feedback/direc ...

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Within an HTML report, I have applied the style "overflow:auto" to allow for dynamic data filling. I am now facing the challenge of detecting whether a vertical scrollbar exists within the report. After scouring various forums for solutions, I came across ...

The Intersection Observer encountered an issue as it was unable to access the property 'current' since it was undefined

My current project involves the implementation of IntersectionObserver, but I am facing an issue where I receive the error message Cannot read property 'current' of undefined. Can anyone help me identify what might be causing this problem? useOn ...

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

My goal is to replicate the functionality of the iPhone's "Messages" app on a web application using AngularJS or any other JavaScript framework. Each message will be contained in a div element within a larger container. When a new message is added, I ...

Is KeyValueDiffers within DoCheck limited to working with just a single object per component?

Initially, my ngDoCheck method worked perfectly with just this line: var productChanges = this.differ.diff(this.myProduct); Then I decided to add another object from my component and included the following line: var companyChanges = this.differ.diff(thi ...

Automatically injecting dependencies in Aurelia using Typescript

Recently, I started working with Typescript and Aurelia framework. Currently, I am facing an issue while trying to implement the @autoinject decorator in a VS2015 ASP.NET MVC 6 project. Below is the code snippet I am using: import {autoinject} from "aure ...

Error: Uncaught [🍍]: The function "getActivePinia()" was invoked without an active Pinia instance present. Ensure that you have called "app.use(pinia)" before attempting to utilize a store

I encountered an issue while trying to access a store in Pinia for my Vue web application. Despite installing Pinia and setting app.use(createPinia()), I keep receiving the following error message: Uncaught Error: [ ...

A HTML input field that allows for multiple values to be populated by autofill functionality, similar to the features found

Can anyone assist me with creating a text box similar to the one in Facebook's new message feature? In that feature, we are able to add multiple people in the 'To' field, all of whom are suggested from our friend list. I would like to implem ...

Decreased storage space requirements following transfer to S3 bucket using nodejs

I am currently facing an issue with uploading files from a specific folder location to an S3 bucket using the nodejs aws-sdk. The files I am working with are deepzoom images (.dzi). While the files seem to be successfully uploaded to my S3 bucket, I have n ...