diff options
Diffstat (limited to 'public/js/InputFile.js')
| -rw-r--r-- | public/js/InputFile.js | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/public/js/InputFile.js b/public/js/InputFile.js new file mode 100644 index 0000000..e676037 --- /dev/null +++ b/public/js/InputFile.js | |||
| @@ -0,0 +1,62 @@ | |||
| 1 | // étendre une classe parente avec InputFile? | ||
| 2 | class InputFile{ | ||
| 3 | constructor(name){ | ||
| 4 | this.name = name; | ||
| 5 | this.parent = document.getElementById(name); | ||
| 6 | } | ||
| 7 | open(){ | ||
| 8 | this.parent.querySelector('#' + this.name + '_img').classList.add('hidden'); | ||
| 9 | this.parent.querySelector('#' + this.name + '_input').classList.remove('hidden'); | ||
| 10 | this.parent.querySelector('#' + this.name + '_open').classList.add('hidden'); | ||
| 11 | this.parent.querySelector('#' + this.name + '_submit').classList.remove('hidden'); | ||
| 12 | this.parent.querySelector('#' + this.name + '_cancel').classList.remove('hidden'); | ||
| 13 | } | ||
| 14 | close(){ | ||
| 15 | this.parent.querySelector('#' + this.name + '_img').classList.remove('hidden'); | ||
| 16 | this.parent.querySelector('#' + this.name + '_input').classList.add('hidden'); | ||
| 17 | this.parent.querySelector('#' + this.name + '_open').classList.remove('hidden'); | ||
| 18 | this.parent.querySelector('#' + this.name + '_submit').classList.add('hidden'); | ||
| 19 | this.parent.querySelector('#' + this.name + '_cancel').classList.add('hidden'); | ||
| 20 | } | ||
| 21 | submit(){ | ||
| 22 | const file = this.parent.querySelector('#' + this.name + '_input').files[0]; | ||
| 23 | if(!file){ | ||
| 24 | console.error("Erreur: aucun fichier sélectionné."); | ||
| 25 | return; | ||
| 26 | } | ||
| 27 | const form_data = new FormData(); | ||
| 28 | form_data.append('file', file); | ||
| 29 | |||
| 30 | fetch('index.php?head_foot_image=' + this.name, { | ||
| 31 | method: 'POST', // apparemment il faudrait utiliser PUT | ||
| 32 | body: form_data | ||
| 33 | }) | ||
| 34 | .then(response => response.json()) | ||
| 35 | .then(data => { | ||
| 36 | if(data.success){ | ||
| 37 | this.parent.querySelector('#' + this.name + '_img').src = data.location; | ||
| 38 | |||
| 39 | // cas particulier | ||
| 40 | if(this.name === 'head_favicon'){ | ||
| 41 | const link = document.querySelector('link[rel="icon"]'); | ||
| 42 | link.type = data.mime_type; | ||
| 43 | link.href = data.location; | ||
| 44 | } | ||
| 45 | else if(this.name === 'header_background'){ | ||
| 46 | document.querySelector('header').style.backgroundImage = "url('" + data.location + "')"; | ||
| 47 | } | ||
| 48 | |||
| 49 | this.close(); | ||
| 50 | } | ||
| 51 | else{ | ||
| 52 | console.error("Erreur: le serveur n'a pas enregistré l'image'."); | ||
| 53 | } | ||
| 54 | }) | ||
| 55 | .catch(error => { | ||
| 56 | console.error('Erreur:', error); | ||
| 57 | }); | ||
| 58 | } | ||
| 59 | cancel(){ | ||
| 60 | this.close(); | ||
| 61 | } | ||
| 62 | } \ No newline at end of file | ||
