Angular Upload image to server

Question

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

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

You'r Cross-origin resource sharing (CORS) is not enabled. I don't know how to enable this in java, though link this might help. — Dhiraj Baruah
– Dhiraj Baruah, Commented Dec 1, 2020 at 15:10

jsdev2023 · Accepted Answer · 2020-12-01 08:11:31Z

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.

Meni Toledano · Accepted Answer · 2020-12-01 07:59:51Z

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.

Collectives™ on Stack Overflow

Angular Upload image to server

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related