Skip to content
Advertisement

Angular file input, How to get file on php?

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"
  }
}
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement