Upload fil via un front avec angular
Bonjour,
J'ai un problème avec mes fichier pour télécharger sur le serveur des fichiers. Sur mon projet, je travail donc PHP natif pour le back et sous framework Angular pour le front. Mais je n'arrive pas à savoir si mon problème vient du back ou du front car rien ne se télécharge. Donc la bdd j'ai la création d'une nouvelle avec toutes les autres infos que j'ai récupérer du formulaire mais je. n'ai pas mon fichier de télécharger sur le serveur.
Voici mon code PHP
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <?php
class TechnicalControlInvoice
{
private $conn;
private $table = "technicalControlInvoices";
public $idTechnicalControlInvoices;
public $idPartner;
public $monthlyInvoice;
public $urlInvoice;
public $priceInvoice;
public function __construct($db)
{
$this->conn = $db;
}
public function createInvoice()
{
$query = "
INSERT INTO "
. $this->table .
" SET
idPartner = :idPartner,
monthlyInvoice = :monthlyInvoice,
urlInvoice = :urlInvoice,
priceInvoice = :priceInvoice
";
$stmt = $this->conn->prepare($query);
$params = [
"idPartner" => htmlspecialchars(strip_tags($this->idPartner)),
"monthlyInvoice" => htmlspecialchars(strip_tags($this->monthlyInvoice)),
"urlInvoice" => htmlspecialchars(strip_tags($this->urlInvoice)),
"priceInvoice" => htmlspecialchars(strip_tags($this->priceInvoice))
];
if($stmt->execute($params)) {
return true;
}
return false;
}
public function listInvoices()
{
$query = "
SELECT *
FROM "
. $this->table;
$stmt = $this->conn->prepare($query);
$stmt->execute();
return $stmt;
}
public function searchInvoicesByPartner()
{
$query = "
SELECT *
FROM " . $this->table . "
WHERE idPartner = :idPartner";
$stmt = $this->conn->prepare($query);
$params = ["idPartner" => htmlspecialchars(strip_tags($this->idPartner))];
if($stmt->execute($params)) {
return $stmt;
}
return false;
}
public function searchInvoiceById()
{
$query = "
SELECT *
FROM " . $this->table . "
WHERE idTechnicalControlInvoices = :idTechnicalControlInvoices";
$stmt = $this->conn->prepare($query);
$params = ["idTechnicalControlInvoices" => htmlspecialchars(strip_tags($this->idTechnicalControlInvoices))];
if($stmt->execute($params)) {
$row = $stmt->fetch();
return $row;
}
return false;
}
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Content-Type: application/json");
header("Access-Control-Allow-Headers: Access-Control-Allow-Headers, Access-Control-Allow-Methods, Content-Type, Authorization, X-Requested-With");
include_once "../../config/Database.php";
include_once "../../models/TechnicalControlInvoice.php";
$db = new Database();
$conn = $db->connect();
$technicalControlInvoice = new TechnicalControlInvoice($conn);
$decodedData = json_decode(file_get_contents("php://input"));
$technicalControlInvoice->idPartner = $decodedData->idPartner;
$technicalControlInvoice->monthlyInvoice = $decodedData->monthlyInvoice;
$technicalControlInvoice->priceInvoice = $decodedData->priceInvoice;
$uploadDirectory = 'factureTEchnicalControl/';
$extensions = [
'jpg',
'jpeg',
'png',
'gif'
];
echo json_encode($_FILES['saveName']);
echo json_encode($_FILES['saveName']['error']);
if (isset($_FILES) && !empty($_FILES['image'])) {
echo json_encode('isset$_FILES ok');
$extension = strtolower(pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION));
if (in_array($extension, $extensions)) {
$saveName = htmlspecialchars(strip_tags($decodedData->idPartner)).'-'.htmlspecialchars(strip_tags($decodedData->monthlyInvoice)).'-'.uniqid().$extension;
move_uploaded_file($_FILES['image']['tmp_name'], '../../' . $uploadDirectory . $saveName);
$technicalControlInvoice->urlInvoice = $saveName;
} else {
echo json_encode('Le format de l\'image '. $_FILES['image']['name'] .' n\'est pas bon');
}
}
$result = $technicalControlInvoice->createInvoice($technicalControlInvoice);
if ($result) {
echo json_encode([ "message" => "La facture a été édité !" ]);
} else {
echo json_encode([ "message" => "La facture n'a pas pu être édité..." ]);
} |
Je met également mon code en angular
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2>Ajout d'une facture</h2>
</div>
</div>
<div class="row">
<div *ngIf="uploadResponse && uploadResponse.status === 'error'">
</div>
<div *ngIf="uploadResponse && uploadResponse.status === 'success'">
<img [src]='uploadResponse.url' />
</div>
<form class="col-10 offset-1" enctype="multipart/form-data" [formGroup]="billingForm" (ngSubmit)="onSubmit()">
<div class="row d-flex flex-column">
<div class="input-field d-flex flex-row mb">
<div class="input-field col-4">
<label for="monthlyInvoice">Mois de la facture</label>
<input required type="text" class="validate" id="monthlyInvoice" formControlName="monthlyInvoice">
<!-- <div class="messageError">
<sup>*</sup>Champ obligatoire
</div> -->
</div>
<div class="input-field col-4">
<label for="priceInvoice">Montant de la facture</label>
<input required type="text" class="validate" id="priceInvoice" formControlName="priceInvoice">
<!-- <div class="messageError">
<sup>*</sup>Champ obligatoire
</div> -->
</div>
<div class="input-field col-4">
<label for="saveName">Adresse de l'agence</label>
<input type="file" name="saveName" (change)="onFileSelect($event)" />
<!-- <div class="messageError">
<sup>*</sup>Champ obligatoire
</div> -->
</div>
</div>
</div>
<div class="mt-5 mb-5 text-center">
<button class="m-auto" id="btn" type="submit" [disabled]="billingForm.invalid">Ajouter une facture</button>
</div>
</form>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { BillingService } from 'src/app/services/billing.service';
import { Billing } from 'src/app/models/billing.model';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
@Component({
selector: 'app-billing-forms',
templateUrl: './billing-forms.component.html',
styleUrls: ['./billing-forms.component.css']
})
export class BillingFormsComponent implements OnInit {
billingForm: FormGroup;
uploadResponse;
billings: Billing[];
billingSubscription: Subscription;
idPartner = JSON.parse(localStorage.getItem('idPartner'));
constructor(private formBuilder: FormBuilder, private billingService: BillingService, private router: Router) { }
ngOnInit(): void {
this.billingSubscription = this.billingService.billingSubject.subscribe(
(billings: Billing[]) => {
this.billings = billings;
}
);
this.billingService.emitBillingSubject();
this.initFormBilling();
}
initFormBilling() {
this.billingForm = this.formBuilder.group({
idTechnicalControlInvoices: '',
monthlyInvoice: ['', Validators.required],
priceInvoice: ['', Validators.required],
saveName: ['']
});
}
onFileSelect(event) {
if (event.target.files.length > 0) {
const file = event.target.files[0];
this.billingForm.patchValue({
urlInvoiceSource: file
});
console.log(this.billingForm.patchValue({
urlInvoice: file
}))
}
}
onSubmit() {
console.log(1111);
const newBilling = new Billing();
newBilling.idPartner = this.idPartner;
newBilling.monthlyInvoice = this.billingForm.value.monthlyInvoice;
newBilling.priceInvoice = this.billingForm.value.priceInvoice;
newBilling.saveName = this.billingForm.value.urlInvoiceSource;
this.billingService.addBilling(newBilling);
this.router.navigate(['/facture']);
return this.billingService.addBilling(newBilling);
}
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Billing } from 'src/app/models/billing.model';
@Injectable({
providedIn: 'root'
})
export class BillingService {
billingSubject = new Subject<Billing[]>();
baseUrl = 'http://localhost:8888/MoutteCAPI/backend/api/technicalControlInvoices';
private billings: Billing[];
constructor(private httpClient: HttpClient) { }
emitBillingSubject() {
this.billingSubject.next(this.billings);
}
readListBilling() {
this.httpClient.get<Billing[]> (`${this.baseUrl}/listInvoices.php`).subscribe(
(response) => {
this.billings = response;
this.emitBillingSubject();
},
(error) => {
console.log('erreur de sauvegarde' + error);
}
);
return this.httpClient.get<[]>(`${this.baseUrl}/listInvoices.php`);
}
addBilling(billing: Billing) {
this.httpClient.post(`http://localhost:8888/MoutteCAPI/backend/api/car/editCar.php`, billing).subscribe(
() => {
this.billings.push(billing)
},
(error) => {
console.log('erreur de sauvegarde de la facture', + error);
}
);
// return this.httpClient.post(`http://localhost:8888/MoutteCAPI/backend/api/car/editCar.php`, billing);
}
} |
J'aimerais donc bien trouver d'où vient mon erreur.
