[Solved] property name not working in typescript as expected

WannaBeDev Asks: property name not working in typescript as expected
I am following a course on Udemy where the instructor has the code as following:

Code:
    upload(bookId: number) {
    this.makeFileRequest("http://localhost:8181/book/add/image?id="+bookId, [], this.filesToUpload).then((result) => {
        console.log(result);
    }, (error) => {
        console.log(error);
    });
  }

  fileChangeEvent(fileInput: any) {
    this.filesToUpload = <Array<File>> fileInput.target.files;
  }

  makeFileRequest(url:string, params:Array<string>, files:Array<File>) {
    return new Promise((resolve, reject) => {
        var formData:any = new FormData();
        var xhr = new XMLHttpRequest();
        for(var i=0; i<files.length;i++) {
            formData.append("uploads[]", files[i], files[i].name);
        }
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status==200) {
                    console.log("image uploaded successfully!");
                } else {
                    reject(xhr.response);
                }
            }
        }

        xhr.open("POST", url, true);
        xhr.setRequestHeader("x-auth-token", localStorage.getItem("xAuthToken"));
        xhr.send(formData);
    });
  }

Because the code is written using Angular 2 and I am trying to build the app using the latest version, I cannot find solution for the following problem:

error TS2339: Property ‘name’ does not exist on type ‘File’. Property ‘name’ does not exist on type ‘string’. formData.append(“uploads[]”, files, files.name);

My code looks like this:

Code:
upload(bookId: number) {
    this.makeFileRequest("http://localhost:8181/book/add/image?id="+bookId, [], this.filesToUpload).then((result) => {
      console.log(result);
    }, (error) => {
      console.log(error);
    });
  }

  fileChangeEvent(fileInput: any){
    this.filesToUpload = <Array<File>> fileInput.target.files;
  }

  makeFileRequest(url:string, params:Array<string>, files:Array<File>) {
    return new Promise((resolve, reject) => {
      let formData:any = new FormData();
      let xhr = new XMLHttpRequest();
      for(let i=0; i<files.length;i++) {
        formData.append("uploads[]", files[i], files[i].name);
      }
      xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
          if(xhr.status==200) {
            console.log("image uploaded successfully!");
          } else {
            reject(xhr.response);
          }
        }
      }

      xhr.open("POST", url, true);
      xhr.setRequestHeader("x-auth-token", JSON.stringify(localStorage.getItem("xAuthToken")));
      xhr.send(formData);
    });
  }

In the console I get the following error:

Code:
ERROR SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
at SafeSubscriber._next (add-new-book.component.ts:21)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at FilterSubscriber._next (filter.js:33)
at FilterSubscriber.next (Subscriber.js:49)

Network tab doesn’t show the endpoint of add/image being accessed at all.

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.