thanks for the answer, my problem was that I did not know where to indicate the php that kept the file. but I have already solved it. In the end I got it to work exactly as I wanted, I put the code to help the next try (the code is something different from yours).
in console: ionic g page upload
upload.html
<ion-header>
<ion-navbar>
<ion-title>upload</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col width-40 [ngStyle]="{'background-color': 'Bisque'}">
<h3>Seleccionar Imagenes</h3>
<div width="200px">Indique Carpeta:<br><input class="cajaTexto" type="text" id="carpeta" [(ngModel)]="carpeta" /></div>
<input type="file" class="invisible" id="seleccion" ng2FileSelect [uploader]="uploader" multiple />
<button ion-button small icon-right [ngStyle]="{'background-color': '#D2691E'}" (click)="openFileDialog1()">Seleccione Imagenes</button>
</ion-col>
<ion-col width-60 *ngIf="uploader?.queue?.length >0">
<div *ngIf="uploader?.queue?.length >1">
<h3>Lista de Archivos</h3>
<p>Archivos Listados: {{ uploader?.queue?.length }}</p>
</div>
<table class="table">
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.isHTML5">
<progress id="progressbar" max="100" value="{{ item.progress }}"> </progress>
<div id="progressbarlabel">{{ item.progress }} %</div>
</td>
<td class="text-center">
<span *ngIf="item.isCancel"><ion-icon class="iconorojo" name="close-circle"></ion-icon></span>
<span *ngIf="item.isError"><ion-icon class="iconorojo" name="close-circle"></ion-icon></span>
</td>
<td nowrap>
<button ion-button small icon-right *ngIf="!item.isSuccess" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">Subir<ion-icon name="cloud-upload"></ion-icon></button>
<!-- <button ion-button icon-right *ngIf="!item.isSuccess" (click)="item.remove()" [ngStyle]="{'background-color': '#D2691E'}">Cancel<ion-icon name="close-circle"></ion-icon></button> -->
<button ion-button small icon-right *ngIf="!item.isSuccess" (click)="item.remove()" color="danger">Limpiar<ion-icon name="trash"></ion-icon></button>
<span *ngIf="item.isSuccess"><ion-icon class="iconoverde" name="checkmark-circle-outline"></ion-icon></span>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Progreso Global: {{ uploader.progress }} %
<progress id="progressbar" class="progreso" max="100" value="{{ uploader.progress }}"> </progress>
</div>
<div *ngIf="uploader?.queue?.length >1">
<button ion-button small icon-right (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">Subir Todo<ion-icon name="cloud-upload"></ion-icon></button>
<!-- <button ion-button icon-right (click)="uploader.cancelAll()" [ngStyle]="{'background-color': '#D2691E'}" [disabled]="!uploader.isUploading">Cancel all<ion-icon name="close-circle"></ion-icon></button> -->
<button ion-button small icon-right color="danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">Limpiar Todo<ion-icon name="trash"></ion-icon></button>
<!-- <button type="button" class="btn btn-warning small " (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading"></button>
<button type="button" class="btn btn-danger small " (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length"></button>-->
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
upload.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UploadPage } from './upload';
import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
declarations: [
UploadPage,
FileSelectDirective,
],
imports: [
IonicPageModule.forChild(UploadPage),
],
exports:[
UploadPage
]
})
export class UploadPageModule {}
upload.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FileUploader } from 'ng2-file-upload';
const URL = 'https://example.com/php/probar.php';
@IonicPage()
@Component({
selector: 'page-upload',
templateUrl: 'upload.html',
})
export class UploadPage {
uploader:FileUploader;
carpeta="";
indice=0;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.uploader = new FileUploader({
url: URL, // url del php que trata el fichero subido
method: 'POST',
removeAfterUpload: true, // lo quita de la lista una vez su subida fue correcta
queueLimit: 100 // limite de archivos que se pueden añadir a la lista, si el numero de archivos seleccionados es superior se cogen los x primeros.
});
this.uploader.onBuildItemForm = (fileItem: any, form: any) => {
form.append('id' , this.indice);
form.append('fotonum' , 'n1');
form.append('carpeta' , this.carpeta);
this.indice = this.indice + 1;
};
// Función que salta cada vez que añadimos un nuevo archivo, aqui podemos controlar que no se suban archivos demasiado grandes
this.uploader.onAfterAddingFile = function(fileItem) {
if (fileItem.file.size > 2048000) {
let prompt = this.alertCtrl.create({
title: 'Error de archivo',
message: "El archivo que está intentando subir sobrepasa el limite de tamaño de 2mb, seleccione otro archivo.",
buttons: [
{
text: 'Aceptar',
handler: data => {
fileItem.cancel();
fileItem.remove();
}
}
]
});
prompt.present();
}
console.info('onAfterAddingFile', fileItem);
};
// Función que salta cuando se han añadido todos los archivos seleccionados.
this.uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll');
};
// Función que se ejecuta antes de subir un archivo. Aquí añadimos datos adicionales necesarios para renombrar el
// archivo como nosotros queremos.
this.uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem');
};
// Barra de progreso que indica la subida.
this.uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem');
};
// Función que se ejecuta cuando la barra de progreso llega a su fin.
this.uploader.onProgressAll = function(progress) {
console.info('onProgressAll');
};
// Función que salta si la subida del archivo se produjo con éxito en nuestro caso guardamos los índices de las
// imágenes para almacenarlos posteriormente en la bdd.
this.uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
// Función que salta si se produce un error en la subida.
this.uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
// Función que se ejecuta si se cancela la subida.
this.uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
this.uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem');
};
this.uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
}
openFileDialog1 = function() {
if (this.carpeta.length < 5) {
alert("El nombre de carpeta no ha sido especificado o no se trata de un nombre valido.");
} else {
document.getElementById('seleccion').click();
}
};
ionViewDidLoad() {
console.log('ionViewDidLoad UploadPage');
}
}
upload.scss
page-upload {
.my-drop-zone {border: dotted 3px blue;height: 100px;width: 100%;}
.nv-file-over {border: dotted 3px red;}
/* Default class applied to drop zones on over */
.another-file-over-class {border: dotted 3px green;}
html,body {height: 100%;}
.iconorojo {padding-left:10px;color:red;font-size: 20px;}
.iconoverde {padding-left:10px;color:green;font-size: 20px;}
.invisible{visibility: hidden; position: absolute;}
input.cajaTexto {
height: 28px;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #e6b400;
border-radius: 5px;
padding-left: 10px;
margin-top: 6px;
}
.cajaTexto {min-width: 0;}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]::-moz-progress-bar {
background-image:
-moz-linear-gradient(135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66% ),
-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
-moz-linear-gradient(left, #09c, #f44);
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
.progreso{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #bbbaba;
background-color: rgb(236, 235, 234);
width:100%;
}
}
Sorry for the comments in Spanish, it’s a complete example with some design