Spring + Angular Unable to upload same file twice

Question

Unable to upload same file twice. If uploading different files its working

Error under Network in chrome

{ timeStamp: ......, status: 417
  error: 'Bad Request',
  message: 'Required request part 'file' is not present'
  path: 'url as hosted on Tomcat'
}

Spring Boot Controller.java file

@PostMapping("/Post")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") 
MultipartFile file){ String Message=""; try .......(and so on)}

My Angular Component

<form [formGroup]="uploadForm" (ngSubmit) = "onSubmit()">
<input type="file" id="selectFile" formControlName="file1" name="selectFile"
(change)="fileEvent($event)"/>

<input type="submit" name="Submit"/>
</form>

Component.ts file

fileEvent(e) {
 this.data = e.target.files[0];
}
onSubmit() {
  let headers: any = new Headers();
  headers.append('Content-type', 'undefined');
  let formData = new FormData();
  formData.append("file", this.data);
  const req5 = new HttpRequest('POST', 'url as hosted on TOMCAT', formData,
  reportProgress: true,
  responseType: 'text'
  });
  return this.httpClient.request(req5).subscribe(e => {(
  console.log(e);
  )}
}

Where am I making a mistake?

Copy request as curl on 2nd time and paste it, Devtools -> Networks -> Right click in request -> copy as curl — deathangel908
– deathangel908, Commented Feb 4, 2019 at 11:55
@TimBiegeleisen - I know the problem also but dnt know the soltn to it. problem: angular is looking only on change hence when there is no change to the file being uploaded it will not work — Olivia
– Olivia, Commented Feb 4, 2019 at 12:00
@PierreDuc - yeah sorry i apologize i have made those changes like replacing selectFile with File & onSubmit. i was able to send different files to server but when i am trying to upload same file more than once i am getting error HTTP 400 — Olivia
– Olivia, Commented Feb 4, 2019 at 18:56
@Olivia I can only imagine that somewhere in your code you set this.data to undefined again. Best thing you can do is check the network request tab and see what's send to the server. Compare the first request with the second one, and see what's different — Poul Kruijt
– Poul Kruijt, Commented Feb 4, 2019 at 19:01

Tim Biegeleisen · Accepted Answer · 2019-02-04 12:13:48Z

1

Your problem sounds like there is browser caching, whereby the first time the request goes through, and the second time something different happens. If this be the source of the problem, then you may try appending a random query parameter to the end of the POST URL, e.g.

var url = 'url as hosted on TOMCAT';
url = url + (new Date()).getTime();

Yes, it may seem strange to bind a query parameter to a POST request, but there should be nothing preventing you from doing this. Ideally, this would be enough to disable browser caching.

answered Feb 4, 2019 at 12:13

Tim Biegeleisen

526k32 gold badges323 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tim Biegeleisen Over a year ago

You certainly can change the URL to anything you wish on the UI side. This includes adding a query parameter which would probably just be ignored by the server. I will leave this answer up in case it helps some other reader of your question.

Olivia Over a year ago

okay NP but in my case i am getting 404 error by server, it means URL not recognized :(

Tim Biegeleisen Over a year ago

Then maybe Spring Boot is considering that extra query param as meaning a different URL resource. Bummer. Don't have a workaround for you :-(

Poul Kruijt Over a year ago

adding a question mark might work, making it url += '?' + Date.now();

mrak · Accepted Answer · 2019-10-11 22:24:50Z

0

I'm quite sure that the problem is caused by the change-listener on the input field which won't fire again for the same file and you are setting the this.data to null after the first submit.

You need to reset the field by ex.: doing it "manually":

onSubmit() {
    // upload the file ...
    document.getElementById("selectFile").value = "";
}

which ist probably not the best option with Angular. Or by reseting the form:

onSubmit() {
    // upload the file ...
    this.uploadForm.reset();
}

Same answer in German

edited Oct 11, 2019 at 22:24

answered Oct 9, 2019 at 23:04

mrak

2,92623 silver badges23 bronze badges

Collectives™ on Stack Overflow

Spring + Angular Unable to upload same file twice

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related