Ionic 2: upload documents, pdf to server in forms
I have created a form in ionic 2 where I have a resume upload field which will be of type .docs or .pdf. I tried to add as below,
<form [formGroup]="myForm">
<ion-list>
<ion-item>
<input type="file" formControlName="upresume_one" name="upresume_one"/>
<p>Supported formats .doc,.docs and .pdf[Max file size: 500KB]</p>
</ion-item>
<div class="text-right">
<button ion-button style="background-color: #16a085;color: white;" color="secondary" (click)="save(myForm.value)">Submit</button>
</div>
</ion-list>
</form>
My .ts file looks like this:
myForm: FormGroup;
private myData: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private builder: FormBuilder,
private userProfileService: UserProfileService,
private progressDialog: ProgressDialog) {
this.myForm = builder.group({
'upresume_one': ['', Validators.required]
})
for the view I call the save function which is given below,
save(formData) {
console.log('Form data is ', formData);
}
In consoel.log I am getting null even after valid files have been selected. Can someone please suggest me what is the best way to integrate the input type file inside the form in ionic 2.
source to share
Finally I found the answer to this question. You must have a separate API that you can use to download the file. The step of loading a file in ionic 2 is detailed below:
-
First install the ionic file chooser plugin in your application. https://ionicframework.com/docs/native/file-chooser/
- keep this code inside some function that you can call using a button that says upload resume or some file
this.fileChooser.open()
.then(uri => console.log(uri))
.catch(e => console.log(e));
-
Then install the transfer plugin to your app from here: https://ionicframework.com/docs/native/transfer/ this can be used to upload the file to your server.
-
The complete code I used to get an image from a gallery or from a camera and load it via the API is here: https://gist.github.com/coolvasanth/ab61fc337e6561be4559171b74221b1a
-
To upload files in .pdf format, .docs, please contact the address : https://gist.github.com/coolvasanth/b266c5bb382ddbfc60ca1c0f7c9f33c0
-
To capture video from phone and upload it to server via API, please use this: https://gist.github.com/coolvasanth/8d0b6a4cea480bc7017bce0ba3ec5bdb
-
To select a file other than media (eg .pdf, .doc) in iOS, you can refer to the link below. https://gist.github.com/coolvasanth/d042a26deda75f5e390b42b87995f30d . If you want to select a file from iCloud, please enable this service in xcode. You will find this in Project -> Capabilities -> iTune.
source to share
This is the script that works for me!
You can upload PDF, ZIP image or any file format, no need to have different plugins for Android and IOS in HTML
<input type="file" name="file" (change)="upload($event)" />
in TS file
upload(str:any)
{
const formData = new FormData();
this.image=str.target.files[0];
formData.append('files[]', this.image);
console.log(formData,this.image);
this.http.post("http://localhost/test/test.php",formData)
.subscribe((data:any)=>{
console.log(data);
})
console.log(str);
}
The bonus here is the PHP file:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['files'])) {
$errors = [];
$path = 'uploads/';
$extensions = ['jpg', 'jpeg', 'png', 'gif'];
$all_files = count($_FILES['files']['tmp_name']);
$file_tmp = $_FILES['files']['tmp_name'][0];
$file_type = $_FILES['files']['type'][0];
$file_size = $_FILES['files']['size'][0];
$file_ext = strtolower(end(explode('.', $_FILES['files']['name'][0])));
$file_name = uniqid().".".$file_ext;
$file = $path . $file_name;
if (empty($errors)) {
move_uploaded_file($file_tmp, $file);
}
if ($errors) print_r($errors);
}
}
source to share