Implémenter un simple file uploader responsive
Bonjour tout le monde,
Je suis designer pas du tout développeur, et j'ai une question à propos de la façon dont je pourrais implémenter un système pour uploader des fichiers sur desktop et mobile.
J'ai créer une image pour vous montrer quel genre de système je cherche à reproduire.
Mais en gros:
- Quand je suis sur desktop, je veux simplement avoir la possibilité de prendre un fichier sur ma machine
- Quand je suis sur mobile, comme sur le screen #2, je voudrais que ça soit le file picker du téléphone et que j'ai la possibilité d'allez sur les services cloud installé sur mon mobile (Google Drive, Dropbox, etc)
Quelqu'un sait comment on implémente cela ? Est-ce que c'est possible avec HTML5 ?
Merci à l'avance pour vos réponses !
6 réponses
Non c'est ma faute, je n'ai pas assez donné de contexte.
Tu me parles d'API pour l'image 2, mais sur un autre forum j'ai cru comprendre qu'en fait des que tu utilisais un input=file, c'était automatiquement IOS ou android qui prenait le relais, pour te proposer de sélectionner un fichier sur ton téléphone où sur les clouds qui sont déjà installé sur ton téléphone.
Voilà quelques réponses que j'ai eu:
- The OS already does that for you if you use an input type="file".
- I guess that the best way is to use a input type="file" to get a native browser experience. But doing this, you completely delegate the selection to the webbrowser your user uses - so it can be really nice on iOS and awful on Windows Phone for example
- Regarding #2, which seems to be the core of this question, this is the standard behaviour for iOS, so no need to do anything about it. On Android you also have a file picker. It looks different but allows you to access cloud storage (and local storage) out of the box.
- The second and third screenshots are just how iOS handles file input fields. This isn't something you can control nor implement on other platforms (those could already have their own implementation though).
Salut,
Est-ce que c'est possible avec HTML5 ?
Non,
il va falloir utiliser PHP, (voir javascript si on veut du "glisser/déposer")
ce n'est pas vraiment quelquechose de trivial, il faut faire pas mal de vérification.
Ça se complique encore si tu veux faire comme le screen #2.
Ce n'est pas une mince affaire, en particulier si tu n'es pas développeur.
Je ne voudrais pas te décourager mais si tu veux vraiment le faire,
il va falloir te poser tranquillement quelques jours pour apprendre tout ça,
ou faire faire le boulot par un développeur.
Si tu peux te contenter du plus simple,
tu vas avoir besoin d'au moins 2 choses :
- < input type="file" > (HTML)
- move_uploaded_file() (PHP)
Bonjour SLK,
Tout d'abord merci d'avoir pris le temps de répondre.
Oui, biensûr je ne vais pas le faire moi-même, ce sont des développeurs qui vont s'en occuper.
Mais en fait, pour être plus précis, je suis chargé de faire des recherches sur quel est le moyen le plus simple d'implémenter ça. On va devoir implémenter ça sur différentes parties du sites et on aimerait que ça se fasse toujours de cette façon, et j'ai besoin de plus d'info pour trouver un chemin à prendre et m'aligner avec les devs.
Donc si jamais n'hésite pas à être plus technique
Ah pardon je n'avais pas compris.
Alors si ce sont des développeurs qui s'en occupent,
S'ils veulent proposer un upload en "glisser/déposer", je recommanderai "plupload".
@Grafikart a fait une très bonne vidéo dessus :
https://www.grafikart.fr/tutoriels/jquery/plupload-277
Pour faire comme le "screen #2",
pour chaque "emplacement" que vous souhaitez proposer (ex : DropBox, Google Drive...),
il va falloir se documenter sur l'API en question (celle de DropBox, celle de Google Drive...)
Chaque API est disponible publiquement sur internet.
Mais ça prend un peu de temps pour apprendre à se servir de chacune.
Ah d'accord !
En vérité c'est quelque chose que je n'ai jamais encore fait.
Si j'avais eu à le faire, je me serai tourné instinctivement vers les APIs,
mais apprremment non ça le fait tout seul, et tant mieux, c'est bien foutu dis donc.
Et bien il semblerait qu'on ai appris tout les deux quelque chose ahah.
En tout cas un grand merci pour tes réponses !