I have recived all the infromation by my form, but I can´t get the name or size of the input file, so i can´t use $_FILES by php
HTML – input file
<li class="list-group-item"> <label for="Fichier1" class="form-label">Soporte 1</label> <input class="form-control" type="file" id="Fichier1" name="Fichier1" (change)="cambioFile1($event)"> </li>
Angular – Add file input to form (formaA : FormGroup)
let reader = new FileReader(); if(event.target.files && event.target.files.length) { const [Fichier1] = event.target.files; reader.readAsDataURL(Fichier1); console.log(Fichier1); reader.onload = () => { this.formaA.patchValue({ Fichier1: reader.result }); }; }
Angular – Create request
this.frmOriDir.registrarActuacion(this.formaA.value) .subscribe( e => { if(e['status'] === 500){ this.toastr.error(e['mensaje'], 'Atención ', { timeOut: 5000, }); this.loading = false; }else if(e['status'] === 200){ this.toastr.success(e['mensaje'], 'Proceso Exitoso ', { timeOut: 5000, enableHtml: true, progressBar:true, closeButton: true, } ); } });
Angular – Send request
registrarActuacion(datos){ const url = `UrlExample`; return this.http.post<any>( url, datos); }
Web – Json request
descripPretensiones "fasdfdfsdfsad" fecFin "2021-06-05T05:00:00.000Z" Fichier1 "data:application/pdf;base64,JVBERi0xLjcNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhlcy1DTykgL1N0cnVjdFRyZWVSb290IDMxIDAgUi9NYXJrSW5mbzw8L01hcmtlZCB0cnVlPj4vTWV0YWRhdGEgMjMyIDAgUi9WaWV3ZXJQcmVmZXJlbmNlcyAyMzMgMCBSPj4NCmVuZG9iag0KMiAwIG9iag0KPDwvVHlwZS9QYWdlcy9Db3VudCA0L0tpZHNbIDMgMCBSIDE3IDAgUiAyMiAwIFIgMjYgMCBSXSA+Pg0KZW5kb2JqDQozIDAgb2JqDQo8PC9UeXBlL1BhZ2UvUGFyZW50IDIgMCBSL1Jlc291cmNlczw8L1hPYmplY3Q8PC9JbWFnZTUgNSAwIFIvSW1hZ2U3IDcgMCBSPj4vRXh0R1N0YXRlPDwvR1M2IDYgMCBSL0dTMTAgMTAgMCB…Dg5NiAwMDAwMCBuDQowMDAwMzU4MDc2IDAwMDAwIG4NCjAwMDAzNTgxMjIgMDAwMDAgbg0KdHJhaWxlcg0KPDwvU2l6ZSAyMzUvUm9vdCAxIDAgUi9JbmZvIDMwIDAgUi9JRFs8MDlEM0VCOEI1NzE4NTg0MEIxMjA3MkEyMUM2RkNEOTg+PDA5RDNFQjhCNTcxODU4NDBCMTIwNzJBMjFDNkZDRDk4Pl0gPj4NCnN0YXJ0eHJlZg0KMzU4ODcyDQolJUVPRg0KeHJlZg0KMCAwDQp0cmFpbGVyDQo8PC9TaXplIDIzNS9Sb290IDEgMCBSL0luZm8gMzAgMCBSL0lEWzwwOUQzRUI4QjU3MTg1ODQwQjEyMDcyQTIxQzZGQ0Q5OD48MDlEM0VCOEI1NzE4NTg0MEIxMjA3MkEyMUM2RkNEOTg+XSAvUHJldiAzNTg4NzIvWFJlZlN0bSAzNTgxMjI+Pg0Kc3RhcnR4cmVmDQozNjM3MzINCiUlRU9G" Fichier2 null Fichier3 null idTramite "231" sinproc "3000130" tipoGestion "1" vigencia "2021"
PHP – Try to get the name and info of inout file
print_r( $datos= json_decode(file_get_contents('php://input')));
Return
( [tipoGestion] => 1 [fecFin] => 2021-06-05T05:00:00.000Z [descripPretensiones] => fasdfdfsdfsad [sinproc] => 3000130 [idTramite] => 231 [vigencia] => 2021 [Fichier1] => data:application/pdf;base64,JVBERi0xLjcNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhlcy1DTykgL1N0cnVjdFRyZWVSb290IDMxIDAgUi9NYXJrSW5mbzw8L01hcmtlZCB0cnVlPj4vTWV0YWRhdGEgMjMyIDAgUi9WaWV3ZXJQcmVmZXJlbmNlcyAyMzMgMCBSPj4NCmVuZG9iag0KMiAwIG9iag0KPDwvVHlwZS9QYWdlcy9Db3VudCA0L0tpZHNbIDMgMCBSIDE3IDAgUiAyMiAwIFIgMjYg ... (a lot of more lines)
Advertisement
Answer
By using reader.readAsDataURL(Fichier1);
you transformed the binary file in the browser into a base64 encoded string. That can be verified by looking at the JSON data on the server:
[Fichier1] => data:application/pdf;base64,JVBERi0xLjcNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhlcy1DTykgL1N0cnVjdFRyZWVSb290IDMxIDAgUi9NYXJrSW5mbzw8L01hcmtlZCB0cnVlPj4vTWV0YWRhdGEgMjMyIDAgUi9WaWV3ZXJQcmVmZXJlbmNlcyAyMzMgMCBSPj4NCmVuZG9iag0KMiAwIG9iag0KPDwvVHlwZS9QYWdlcy9Db3VudCA0L0tpZHNbIDMgMCBSIDE3IDAgUiAyMiAwIFIgMjYg ... (a lot of more lines)
Transforming a base64 encoded string into a binary file and writing it to disk is fairly simple; you can find examples of that here on Stack Overflow. If you want to keep the file names and other info intact, you can get them from the file object in the browser and send them along with your JSON data:
let reader = new FileReader(); if (event.target.files && event.target.files.length) { const [Fichier1] = event.target.files; reader.readAsDataURL(Fichier1); reader.onload = () => { this.formaA.patchValue({ Fichier1: { data: reader.result, filename: Fichier1.name, size: Fichier1.size, contentType: Fichier1.type, }); }; }
…which will on the server result into something similar to this (I don’t know the PHP JSON parser formatting by heart; JSON typically looks like this):
{ "Fichier1": { "data": "data:application/pdf;base64,JVBERi0xLjcNCiW1tbW1DQoxIDAg...", "filename": "myfile.pdf", "size": 3023819, "contentType": "application/pdf" } }