PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → RWD : Uploader image à partir d'un mobile ou tablette...
RWD : Uploader image à partir d'un mobile ou tablette...
Débuté par JULIEN, 03 juil. 2016 01:10 - 9 réponses
Membre enregistré
197 messages
Popularité : +3 (3 votes)
Posté le 03 juillet 2016 - 01:10
Bonjour à tous,

Sous WB21, dans le cadre d'un site Internet AWP, j'utilise un champ upload afin que le visiteur puisse uploader ses images, sur ordinateur tout va bien...par contre sur mobile et tablette (notamment iPad et iPhone) aucune réaction de ce champ upload...

Du coup, je suis incapable de permettre l'upload depuis un mobile ou tablette à partir de la galerie photo de l'appareil mobile...j'ai beau cherché je ne trouve pas de d'alternative (champ ou fonction) permettant cela...
Sur WM j'utilise AlbumSelecteur...mais sous WB????

Je vous remercie par avance pour votre aide,

Bon week-end à tous,

Julien
Posté le 04 juillet 2016 - 09:32
Coucou julien,

J'ai ete confronté a ce probleme, qui se produit aussi sous mac pour info.

Pour contourner, à la place du champ upload, j'ai mis un champ html (HTM_SansNom1 dans l'exemple)
Dans l'initialisation de la page je lance une fonction (Charge_HTML) pour genérer le code du champ.

Voici la procédure :
Procedure ChargeHTML()

sTxt est une chaîne

sTxt = ...
"<!DOCTYPE html>"+RC+...
"<html>"+RC+...
"<head>"+RC+...
"<script type=""text/javascript"">"+RC+...
"function fileSelected() {"+RC+...
"var count = document.getElementById('fileToUpload').files.length;"+RC+...
"document.getElementById('details').innerHTML = """";"+RC+...
"for (var index = 0; index < count; index ++)"+RC+...
" {"+RC+...
" var file = document.getElementById('fileToUpload').files[index];"+RC+...
" var fileSize = 0;"+RC+...
" if (file.size > 1024 * 1024)"+RC+...
" fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';"+RC+...
" else"+RC+...
" fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';"+RC+...
" }"+RC+...
"}"+RC+...
"function uploadFile() {"+RC+...
"var fd = new FormData();"+RC+...
"var count = document.getElementById('fileToUpload').files.length;"+RC+...
"for (var index = 0; index < count; index ++)"+RC+...
" {"+RC+...
" var file = document.getElementById('fileToUpload').files[index];"+RC+...
" fd.append('myFile', file);"+RC+...
" }"+RC+...
" var xhr = new XMLHttpRequest();"+RC+...
" xhr.upload.addEventListener(""progress"", uploadProgress, false);"+RC+...
" xhr.addEventListener(""load"", uploadComplete, false);"+RC+...
" xhr.addEventListener(""error"", uploadFailed, false);"+RC+...
" xhr.addEventListener(""abort"", uploadCanceled, false);"+RC+...
" xhr.open(""POST"", ""/SITEEXTRANET_WEB/savetofile.php?rep="+gsRep+""");"+RC+...
" xhr.send(fd);"+RC+...
"}"+RC+...
"function uploadProgress(evt) {"+RC+...
" if (evt.lengthComputable) {"+RC+...
" var percentComplete = Math.round(evt.loaded * 100 / evt.total);"+RC+...
" document.getElementById('progress').innerHTML = 'Transfert en cours : ' + percentComplete.toString() + '%';"+RC+...
" }"+RC+...
" else {"+RC+...
" document.getElementById('progress').innerHTML = 'unable to compute';"+RC+...
" }"+RC+...
"}"+RC+...

"function uploadComplete(evt) {"+RC+...
"_JSL(_PAGE_,'"+BTN_Fichiers_associés..Alias+"','_self','','');"+RC+...
"}"+RC+...

"function uploadFailed(evt) {"+RC+...
"alert(""There was an error attempting to upload the file."");"+RC+...
"}"+RC+...

"function uploadCanceled(evt) {"+RC+...
"alert(""The upload has been canceled by the user or the browser dropped the connection."");"+RC+...
"}"+RC+...
"</script>"+RC+...

"</head>"+RC+...
"<body>"+RC+...
"<center><form id=""form1"" enctype=""multipart/form-data"" method=""post"" action=""Upload.aspx"">"+RC+...
"<input type=""file"" name=""fileToUpload"" id=""fileToUpload"" onchange=""fileSelected();uploadFile();javascript:{_PAGE_."+SAI_SansNom2..Alias+".value=this.value;}"" style=""display: none;"" />"+RC+...
"<input type=""button"" value=""Cliquez ici pour ajouter un document"" onclick=""document.getElementById('fileToUpload').click();"" />"+...
"<LABEL id=""progress""></label>"+RC+...
"</div>"+RC+...
"<div id=""details""></div>"+RC+...
"</form></center>"+RC+...
"</body>"+RC+...
"</html>"

HTM_SansNom1=sTxt


Dans la procédure j'utilise un fichier php (/SITEEXTRANET_WEB/savetofile.php?rep="+gsRep+") qui me permet l'upload et l'enregistrement du fichier dans le répertoire que je fourni en paramètre (tu peut mettre un chemin en dur mais relatif a partir du repertoire _WEB) Voici ci dessous le code du fichier savetofile.php :
<?php
if (isset($_FILES['myFile'])) {
$savefile = $_GET['rep'] . "/" . $_FILES['myFile']['name'];
move_uploaded_file($_FILES['myFile']['tmp_name'], $savefile);
chmod($savefile, 0777);
}
?>


Derniere partie, tu met un bouton caché dans ta page. Ce derneir sera appelé après l'upload (pour rafraichir une liste ou un tabeau, ou afficher un message que l'upload est finit ou autre). Ce bouton dans cette exemple est appelé par : BTN_Fichiers_associés..Alias

Bon courrage et bon Dev.

MikeFilth
Posté le 04 juillet 2016 - 17:21
Bonjour Julien

je n'ai pas testé, mais il y a DEUX champs uploads, sous webdev.
L'ancien est JS pur et ne peut uploader qu'un fichier à la fois, le
nouveau permets l'upload de pluisuers fichiers, MAIS utilise FLASH (qui
est bloqué, pour autant que je sache, sur android, ios et macos, pour
des raisons de sécurité)

Donc, simplement changer de mode au niveau du champ upload POURRAIT en
théorie résoudre ton problème.

A tester...

Cordialement


--
Fabrice Harari
Consultant WinDev, WebDev et WinDev Mobile International

Plus d'information sur http://fabriceharari.com
Membre enregistré
197 messages
Popularité : +3 (3 votes)
Posté le 04 juillet 2016 - 17:35
Bonjour à tous,

Tout d'abord merci pour votre aide,

Mike : je suis également sur MAC est cela fonctionna parfaitement, c'est simplement sous IOS que cela bloque à cause de Flash.
Je te remercie pour ta solution que je vais testé, mais une fois de plus cela m'agace utiliser une solution "externe" à WB pour pallier à un champ non adapté au RWD...car il me parait anormal de disposer de WB RWD mais que l'ensemble des champs ne soient pas adaptés.

Fabrice: Effectivement c'est la solution que j'utilise, un champ de saisie de type upload et cela fonctionne mais cela date d'un autre temps...de nos jours toutes les applis ou sites RWD proposent d'upload en simultané plusieurs photos sans refaire la manip.

Marre de payer les dernières versions pour toujours avoir un temps de retard GRRRRRRRR

Un grand merci à vous pour votre temps!

Cordialement,

Julien
Posté le 12 octobre 2016 - 03:47
Bonjour
J ai le même problème est ce que vous avez trouvez une solution
Posté le 12 octobre 2016 - 11:12
Bonjour Mohamed,

La solution de "dépannage" que j'utilise est l'utilisation d'un champ de saisie de type UPLOAD, cela oblige à uploader un fichier à la fois mais bon...pas le choix.

"Bonne nouvelle" en version 22, un nouveau champ répondant à ce type de besoin sera disponible...mieux vaut tard que jamais...

Bon dév.
Posté le 12 octobre 2016 - 12:59
Bonjour
Merci pour votre réponse mais cette solution ne marche pas sous webdev20.avez vous une idée merci
Posté le 12 octobre 2016 - 17:22
Mohamed,

Je t'assure que cela fonctionne sous WB20, je pense que tu confonds le champ upload et le champ de saisie de type upload...

Tu crées un champ de saisie, puis dans la description du champ (les 7 onglets) tu choisis le type upload et là tu verras que cela fonctionne partout y compris sous IOS.

Bon dév
Posté le 13 octobre 2016 - 00:08
Bonsoir
Merci beaucoup pour votre aide effectivement ca marche très bien avec le champs de saisie upload .
Votre resonement est exacte .merci encore c tres jentille. Cordialement
Posté le 07 juin 2017 - 15:11
Bonjour,

j'ai utilisé votre code pour mon projet mais lorsque j'essaie d'ajouter ma photo au serveur, j'ai une erreur qui me dit :
"Impossible d'ouvrir le fichier <C:\fakepath\MaPhoto.jpg>"

Je voulias donc savoir si vous aviez une solution et merci.

Cordialement