CODEWITHSUNDEEP
angulartypescriptfile-upload
Mali
Mali

Reputation: 33

Angular Upload image to server

I new here. Actually, I need to know how to upload image to server. Because when I try to upload I got this error.

Image-1

image-2

This my code

HTML

<input type="file" name="files" (change)="fileUpload($event)" accept='image/gif' />

Component

fileUpload(event:any){
  this.image = event.target.files[0].name;
    let itemCode = this.activatedRoute.snapshot.paramMap.get('id');
   
    return this.http.post(environment.apiBaseUrl + environment.path + '/data/uploadgif',  {file: this.image, menuCode: itemCode})
    .subscribe((data) => {
      if(data['status']['code'] === 0) {
        document.location.href = environment.url;
      } else {

      }
    });
}

Hope you all can help me Thanks in advance

Upvotes: 0

Views: 2194

Answers (2)

jsdev2023
jsdev2023

Reputation: 568

Here's a simple of way of uploading the image.

function handleInputChange(e) {
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
}

function _handleReaderLoaded(e) {
    let reader = e.target;

    const result = reader.result;
    // this.openSnackBar(result.length,"OK")
    if (!result) {
      this.openSnackBar("Cannot read", "OK")
      this.imageSrc = '';
    }
    if (result.length > 400000) {
      this.openSnackBar("File size should be less than 300KB", "OK")
      this.imageSrc = '';
    }
    else {
      this.imageSrc = reader.result;
    }
  }
<input type="file" id="fileupload" (change)="handleInputChange($event)">
  <label for="fileupload" class="custom-file-upload">
    <mat-icon style="font-size: large; vertical-align: middle;">attach_file</mat-icon>
  Select</label>

So you've to basically convert the image to base64 and then upload to server. You can use multer if you're using nodejs as server.

Upvotes: 1

Meni Toledano
Meni Toledano

Reputation: 11

I encounter the same issue. the problem is not the image request but the request itself. you need to enable in your server-side the CrossOrigin enabled to all requests. TAKEN FROM HERE: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that let servers describe which origins are permitted to read that information from a web browser. Additionally, for HTTP request methods that can cause side-effects on server data (in particular, HTTP methods other than GET, or POST with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request. Servers can also inform clients whether "credentials" (such as Cookies and HTTP Authentication) should be sent with requests.

Upvotes: 0

Related Questions