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](https://stackoverflow.com/questions/44905898/how-to-enable-cors-on-server-side-code-in-java) this might help. — Dhiraj Baruah, Dec 01 '20 at 15:10

score 1 · Answer 1 · answered Dec 01 '20 at 08:11

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.

score 0 · Answer 2 · answered Dec 01 '20 at 07:59

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.

Angular Upload image to server

2 Answers2