IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> uploader une image/un PDF avec une webapp et iOS en 2019 ?
Options
toluol
posté 15 May 2019, 07:51
Message #1


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 792
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



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.

Ce message a été modifié par toluol - 15 May 2019, 07:56.
Go to the top of the page
 
+Quote Post
scoch
posté 21 May 2019, 21:10
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 800
Inscrit : 1 Jul 2010
Membre no 156 073



C’est un formulaire avec un accès à la caméra.
C’est faisable en langages web avec un framework comme Cordova.js 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 (un exemple de code).
Tu pourras distribuer ton app sur iOS avec une licence developer iOS (et un Mac), sur Android comme bon te semble.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
baron
posté 22 May 2019, 19:55
Message #3


Macbidouilleur d'Or !
*****

Groupe : Modérateurs
Messages : 19 302
Inscrit : 22 Jul 2004
Lieu : Louvain-la-Neuve (Gaule Gelbique)
Membre no 21 291



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/pd...tions-attendues


--------------------
MacBook Pro 14’’ 2021, M1 Pro, 16 Go/1 To – macOS  12.6 “Monterey”  MacBook Pro 15’’ mi-2010 Core i5 2,53 GHz, 8 Go/SSD Samsung 860EVO 1 To – Mac OSX 10.6.8  Power Macintosh G3 beige de bureau, rev.1 @ 233MHz, 288 Mo/4Go – MacOS 9.1 — + carte PCI IDE/ATA Tempo 66 Acard 6260 avec HD interne Maxtor 80 Go + graveur interne CDRW/DVD LG GCC-4520B + tablette A4 Wacom UD-0608-A + LaCie ElectronBlueIV 19" + HP ScanJet 6100C   B-Box 3 + HP LaserJet 4000 N  
La recherche dans MacBidouille vous paraît obscure ? J'ai rédigé une proposition de FAQ. Le moteur logiciel a un peu changé depuis mais ça peut aider quand même.
Les corsaires mettent en berne…
Go to the top of the page
 
+Quote Post
toluol
posté 14 Nov 2019, 22:42
Message #4


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 792
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



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
*********
Code
<!DOCTYPE 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
*********
Code
<?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".
Go to the top of the page
 
+Quote Post
scoch
posté 15 Nov 2019, 15:46
Message #5


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 800
Inscrit : 1 Jul 2010
Membre no 156 073



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.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
toluol
posté 15 Nov 2019, 18:03
Message #6


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 792
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



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... dry.gif
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 ^^)
Go to the top of the page
 
+Quote Post
scoch
posté 20 Nov 2019, 14:10
Message #7


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 800
Inscrit : 1 Jul 2010
Membre no 156 073



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 ?
Fichier joint  capture_ipad.jpg ( 84.36 Ko ) Nombre de téléchargements : 3


Ce message a été modifié par scoch - 20 Nov 2019, 14:15.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
chombier
posté 20 Nov 2019, 21:53
Message #8


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 6 580
Inscrit : 20 Mar 2003
Membre no 6 765



Citation (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 ?

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. unsure.gif


--------------------
késtananafout' (:
Go to the top of the page
 
+Quote Post
scoch
posté 21 Nov 2019, 15:50
Message #9


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 800
Inscrit : 1 Jul 2010
Membre no 156 073



Bonne piste inspecteur chombier smile.gif
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 :
Code
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
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 :
Citation
<script src="script.js?<?php rand(); ?>"></script>



--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 19th March 2024 - 05:32