How can I upload file by form submit in angular2. I want to use ng2-file-upload library. But I'm not able to use it in form submit. Can anyone help me please?
2
-
What do you mean with "I'm not able", errors? Did you look up the demo ( valor-software.com/ng2-file-upload ) ?Akkusativobjekt– Akkusativobjekt2016-12-12 15:08:47 +00:00Commented Dec 12, 2016 at 15:08
-
1I want to click form submit button and want to submit all data with image/file to backend. How can I do this? @AkkusativobjektMd. Sahidul Islam– Md. Sahidul Islam2016-12-14 14:09:23 +00:00Commented Dec 14, 2016 at 14:09
Add a comment
|
2 Answers
It should be possible by just passing the uploaded file in your method which can be called in submit.
In your HTML
<form #sieFileUploadForm="ngForm">
<input type="file" id="fileItem"
value="Browse...">
In you ts
uploadFile(file){
console.log(file)
}
Note:- when sending to beckend you need to make it formdata like this
uploadFile(file){
let formData = new FormData();
formData.append('FILENAME', file);
}
3 Comments
Akkusativobjekt
Actually you just need a input field with the ng2FileSelect directive and a binding to the uploader, eg [uploader]="uploader". An additional button which calls the ulpoad() method and you are done. There is no need to create a FormData object, AFAIK.
Md. Sahidul Islam
I want to submit others field's data by clicking form submit button.
Jorawar Singh
Yes u should be able to do that as i mentioned, just pass the data to the method!
So finally I understand your problem, which appears do be additional formdata you want to send with the file.
After you created your FileUploader, you can add additional form with the following code :
uploader: FileUploader = new FileUploader({ url: "http://localhost/upload.php" });
constructor() {
this.uploader.onBuildItemForm = (item, form) => {
form.append("key1", "value1");
form.append("key1", "value2");
};
}
Some say it's a little bit prettier to put this code in the ngOnInit(), but I don't want to bloat this code and this decision is not very important here.
Afterwards you can inspect the additional post data in the payload of the http post, for example with the Firefox Developer Tools. They should look like:
-----------------------------110224700718602891206418821
Content-Disposition: form-data; name="key1"
value1
-----------------------------110224700718602891206418821
Content-Disposition: form-data; name="key1"
value2
(Your boundary wont be the same)
I found the solution on the GitHub tracker of the project.
