Version imprimable du sujet
Cliquez ici pour voir ce sujet dans son format original
Forums MacBidouille _ Les Langages Du Web _ uploader une image/un PDF avec une webapp et iOS en 2019 ?
Écrit par : toluol 15 May 2019, 07:51
Bonjour,
j'ai fait quelques recherches sur google et sur le forum, mais je n'ai rien trouvé à part pour des applications natives.
Est-il possible, avec des moyens "simples" (pour moi, html5, php, jquery et autres bibliothèques javascript, mysql) de développer une petite webapp afin d'uploader une image de la bibliothèque de son iphone ou de son ipad ?
Mon but étant de faire un petit programme pour ma comptabilité personnelle (ou d'acheter un bout de code, de trouver un programmeur pour le faire, ou de trouver une petite app qui me permet de) :
- prendre une photo d'un ticket, d'une facture
- ajouter une date (par défaut celle d'aujourd'hui), un libellé, un montant dans une fenêtre pop-up (pour enregistrer le nom de l'image)
- uploader l'image du ticket sur un serveur (si possible dans un dossier spécifique)
- l'inscrire dans une base de donnée (optionnelle, mais très souhaitable pour calculer différents postes de compta, générer une liste, et retrouver le PDF/la photo du ticket si besoin)
Merci d'avance pour vos réponses/propositions/idées.
Écrit par : scoch 21 May 2019, 21:10
C’est un formulaire avec un accès à la caméra.
C’est faisable en langages web avec un framework comme https://cordova.apache.org/ pour le front end et du php/mysql pour le back end.
En utilisant des plugins comme Cordova Camera Plugin et Cordova File Transfer Plugin (https://codesundar.com/cordova-file-transfer-upload-images/).
Tu pourras distribuer ton app sur iOS avec une licence developer iOS (et un Mac), sur Android comme bon te semble.
Écrit par : baron 22 May 2019, 19:55
Je profite de ce sujet pour rappeler l'existence de PDF Zone, une application développée par un membre du forum qui permet d'extraire de manière récurrente certaines données d'un PDF, p.ex. pour de la compta.
• http://macbidouille.com/news/2018/06/22/pdfzone-version-2-nouvelles-fonctions-attendues
Écrit par : toluol 14 Nov 2019, 22:42
Je déterre mon propre post...
J'ai trouvé une solution qui fonctionne en HTML 5 avec : <input type="file" accept="image/*;capture=camera" capture="camera">
Le seul souci, c'est que cela marche en "deux temps". D'abord, un bouton pour capturer l'image... Ensuite, un bouton pour uploader sur le serveur... Si cela pouvait être direct, ce serait parfait ! J'ai essayé de simuler un click sur le 2e bouton en Ajax dans la fonction completeHandler, mais cela n'a donné aucun résultat. Avez-vous une idée ?
Voici mes 2 fichiers fonctionnels pour le moment :
index.html
*********
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input{border:none;display:inline-block;width:100%;padding: 12px 0;cursor: pointer;font:1em arial, sans-serif;color:#fff;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%);text-decoration: none;}
</style>
<script>
function _(el){return document.getElementById(el);}
_("file1").addEventListener('change', uploadCameraFile, false);
function uploadCameraFile(){
var file = _("file1").files[0];
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function completeHandler(event){_("status").innerHTML = event.target.responseText;}
function errorHandler(event){_("status").innerHTML = "Erreur d'Upload";}
function abortHandler(event){_("status").innerHTML = "Upload annulé";}
</script>
</head>
<body>
<h2>Test d'upload camera</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" accept="image/*;capture=camera" capture="camera">
<br><br>
<label class="styleInputButton"><input type="button" value="Upload image" onclick="uploadCameraFile()" class="formButton"></label>
<h3 id="status"></h3>
</form>
</body>
</html>
upload.php
*********
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) {
echo "capturez une image avant de l'uploader.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "uploads/$fileName")){
echo "Votre image a bien été uploadée.<br/><br/><img src='uploads/$fileName' />";
} else {
echo "Une erreur s'est produite.";
}
?>
il faut bien entendu un dossier "uploads".
Écrit par : scoch 15 Nov 2019, 15:46
Je viens de tester ton code avec Firefox pour Android et ça fonctionne comme tu le souhaites, sans avoir à cliquer sur le bouton d’upload après sélection de l’image.
Écrit par : toluol 15 Nov 2019, 18:03
Ah bon ?
Merci beaucoup d'avoir testé ! C'est déjà une bonne nouvelle qu'Android fonctionne bien !
Mais c'est étrange pour IOS... j'ai besoin d'appuyer sur le 2e bouton du formulaire, sans quoi, l'image n'est pas sauvée... 
C'est comme si je sélectionnais d'abord l'image, et que ça l'upload ensuite...
Si j'enlève le 2e bouton (qui lance la même fonction d'upload que le 1er)... Evidemment, rien n'est uploads sur IOS.
Aurais-tu une idée pourquoi ? et quoi faire pour résoudre ce soucis ?? (à part acheter un smartphone avec Androïd ^^)
Écrit par : scoch 20 Nov 2019, 14:10
Je viens de tester ton même code avec un iPad sous iOS 9.3.5 (je n’ai pas mieux sous la main) et cela fonctionne. As-tu essayé avec d’autres appareils iOS que le tien ?
|
Écrit par : chombier 20 Nov 2019, 21:53
Le cache ! Il faut invalider le cache ! non ?
Je me suis fait piéger plusieurs fois avec du code Javascript modifié sur le serveur, mais pas dans mon browser.
Écrit par : scoch 21 Nov 2019, 15:50
Bonne piste inspecteur chombier 
Perso, pour éviter ce piège en phase de dev j’affiche généralement les pages en fenêtre de navigation privée.
@toluol essaie de voir s’il s’agit d’un problème de cache. Trois solutions :
1. ouvrir la page en mode navigation privée.
2. convertir la page en .php et y insérer ce code avant tout autre :
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
3. mettre ton JavaScript dans un fichier externe et le charger ainsi :
Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)