How to upload image and save using Angular2 and Typescript

Question

i have a image upload section where i need to upload an image. But when i save i get an error saying generic. can anyone help me to solve this.

HTML:

<label >Image</label>
<div >
<input type="file" name="file" id="file" class="inputfile" (change)="readUrlAdd($event)" style="display:none;"/> <label for="file" >Add Image</label>
</div>

Ts:

readUrlAdd(event: any) {
    var files = event.srcElement.files;
    var filename = new Date().getTime() + '.' + files[0].name.split(".")[1];
    var imgFile = new File([files[0]], filename, { type: files[0].type });
    var file_data = imgFile;
    this.ApiService
      .uploadImage(file_data)
      .subscribe(
        image => {
          console.log(image);
          var fileName = image.result.files.file[0].providerResponse.location;
          console.log(fileName);
          this.tutorials = fileName;
        }, error => {
          console.log(error);
        })
  }

API:

uploadImage (files) {
  let token = JSON.parse(localStorage.getItem('token'));
  var fd = new FormData();
  fd.append('file', files);
  return this.http.post(urlBase + '/tutorials/tutorial?token=' + token,fd)
                  .map(this.extractData)
                  .catch(this.handleError);
}

Possible duplicate of [File Upload In Angular?](https://stackoverflow.com/questions/40214772/file-upload-in-angular) — Arun Kumaresh, Dec 26 '17 at 06:19

Shailesh Ladumor · Answer 1 · 2017-12-26T06:12:35.000

0

you need to use file uploader for uploading file. for installation use following command. found demo

npm i ng2-file-upload --save

edited Dec 26 '17 at 06:12

answered Dec 26 '17 at 06:10

Shailesh Ladumor

7,052
5
42
55

added link of demo also – Shailesh Ladumor Dec 26 '17 at 06:13

laiju · Answer 2 · 2017-12-26T09:54:29.577

0

event.srcElement will not work in all browsers, please try the below

const files = event.target.files || event.srcElement.files;
const imgFile = files[0];

edited Dec 26 '17 at 09:54

answered Dec 26 '17 at 06:14

laiju

1,353
10
17

While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – yivi Dec 26 '17 at 09:17

hrdkisback · Answer 3 · 2017-12-26T07:08:54.883

0

You should pass headers with request

let headers = new Headers();
headers.append('token', token); // Try to pass token in header
let options = new RequestOptions({ headers: headers });  

return this.http.post(urlBase + '/tutorials/tutorial,fd, options)
              .map((res: Response) => res.json() || {})
              .catch(this.handleError);

edited Dec 26 '17 at 07:08

answered Dec 26 '17 at 06:37

hrdkisback

898
8
19

if i use options i get an error saying user not found – Bhrungarajni Dec 26 '17 at 07:02
I think it's `token`'s issue make sure you are passing correct token, or At server side expecting token from query param `?token=`, try to pass token in header like `headers.append('token', token);` – hrdkisback Dec 26 '17 at 07:08
my functions itself is not working, is the code written by me is correct? – Bhrungarajni Dec 26 '17 at 08:16
Your code looks correct but try to `debug` your code and check what exactly error is. One more think pass selected file as it is to server and rename your file from back-end. – hrdkisback Dec 26 '17 at 09:08

How to upload image and save using Angular2 and Typescript

3 Answers3