Filepicker.io - Un gestionnaire d'upload de fichiers multi-sources gratuitAvec Filepicker.io, vous pouvez connecter le contenu de vos utilisateurs à vos applications sans avoir à le gérer vous-même.
Ce service web s'interface à votre application à l'aide d'une api javascript relativement simple et vous permettra de récupérer des fichiers de vos utilisateurs en renvoyant l'adresse du fichier directement sur la fenêtre de saisie de votre éditeur. Il peut aussi servir si vous ne souhaitez pas avoir à gérer l'upload et l'hébergement des fichiers statiques directement dans votre site.
Il permet de récupérer du contenu depuis un ordinateur comme tout gestionnaire d'uploads mais également depuis un compte Google drive, Dropbox, Facebook,Picassa, Flirck, webcam, le biais d'une Url, Instagram et par le weB. magique non !!!!!!
Le résultat en image
![[TOUTES VERSIONS] Installer Filepicker - Un gestionnaire d'upload de fichiers multi-sources gratuit Sans_t31](https://i.servimg.com/u/f55/11/93/85/24/sans_t31.png)
Bon allez, on commence.
Prévoyez une bonne petite demie heure pour l'installer et suivez les explications pas à pas. Ce tutoriel ne souffre pas d'une lecture dans les grandes longueurs; une étape de loupée et on risque d'entendre :
- Citation :
- "ça marche pas ou c'est trop long
"
s'enregistrer sur filepicker et récupérer la clef Api1/ Il faut s'enregistrer sur
Filepicker pour récupérer une clef api (pas de panique, c'est d'une simplicité désarmante).
Suivez directement ce lien et faites une inscription comme vous le feriez sur n'importe quel forum
https://www.filepicker.com/register/free2/ Aprés l'enregistrement, vous accédez directement sur une fenêtre avec pour mention "
Create your first app to get started."
3/ vous cliquer sur "
create app"
4/ dans la case
"App Name" , vous mettez un nom; celui de votre forum par exemple (ce sera plus facile à retenir).
Vous laissez la case cochée sur "
web"
5/ vous cliquez sur "n
ext tep" (toujours sur la même page)
6/ Dans la case "
website url", vous collez l'adresse de votre forum.
7/ vous cliquez sur "
skip"
8/ A ce stade , vous verrez apparaitre une
clef Api sous cette forme
- Code:
-
API Key: Agt7z1h9IRuawy2WMpzWCy
9/ conservez la précieusement. C'est le sésame qui vous permettra d'installer l'application sur votre forum.
II/ Installer le js dans la gestion des javascripts.Prenons deux cas de figures.A/ vous désirez remplacer servimg par filepicker.Le js à coller sur wordpad ou votre blocnote.
- Code:
-
$(function(){
var checkIf= $('#text_editor_textarea');
if(checkIf.length>0){
var script = document.createElement('script');
script.id="filepicker";
script.type="text/javascript";
script.src="//api.filepicker.io/v1/filepicker.js";
var body=$('body');
body.append(script);
//Next Comment---
$.sceditor.command.set("servimg", {
exec: function(caller) {
var editor = this,
data = $('#text_editor_textarea').data('sceditor');
filepicker.setKey('CLEF API');
filepicker.pick({
mimetypes: ['application/msword','text/*','image/*'],
services:['COMPUTER','GOOGLE_DRIVE','DROPBOX','FACEBOOK','PICASA','FLICKR','WEBCAM','URL','INSTAGRAM','IMAGE_SEARCH']
}, function(FPFile) {
var docFile = FPFile.url,
type= FPFile.mimetype;
if(/^.*text.*$/.test(type)) { data.insert('[url]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,%22%22)+'[/url]');
}
else if(/^.*image.*$/.test(type)) { data.insert('[img]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,%22%22)+'[/img]');
}
});
},
txtExec: function(caller) {
var editor = this,
data = $('#text_editor_textarea').data('sceditor');
filepicker.setKey('CLEF API');
filepicker.pick({
mimetypes: ['application/msword','text/*','image/*'],
services:['COMPUTER','GOOGLE_DRIVE','DROPBOX','FACEBOOK','PICASA','FLICKR','WEBCAM','URL','INSTAGRAM','IMAGE_SEARCH']
}, function(FPFile) {
var docFile = FPFile.url,
type= FPFile.mimetype;
if(/^.*text.*$/.test(type)) { data.insert('[url]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,%22%22)+'[/url]');
}
else if(/^.*image.*$/.test(type)) { data.insert('[img]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,%22%22)+'[/img]');
}
});
}
});
}
});
C'est fait!!!
bien; on va voir les modifications que vous pouvez apporter à ce script :
1/Avec la fonction remplacer de bloc note ou de wordpad,remplacez CLEF API par la clef api fournie par filipicker io.
En reprenant notre exemple du début,il vous faut remplacer CLEF API par Agt7z1h9IRuawy2WMpzWCy
2/ Si vous souhaitez modifier l'image du bouton d'appel qui reste par défaut celui de servimg, on va passer par du css
- Code:
-
.sceditor-button-servimg {background : url "le lien de votre image"); background-repeat:no-repeat;}
Ps : n'oubliez pas de changer la mention
le lien de votre image (c'est pour les distraits
)
Voila, votre js et votre css sont prêts à être insérés.Vous installez le js dans la gestion des javascripts et vous cochez sur "
sujets" et , votre css dans votre feuille de style.
B/ Vous souhaitez conserver servimg et un des boutons ne vous sert à rien (le bouton date ou le bouton heure par exemple).
Il suffit de modifier cette partie (Ps : ne pas oublier la clef Api)
- Code:
-
$.sceditor.command.set("servimg", {
dans l'exemple du remplacement du bouton date, cela donnera :
- Code:
-
$.sceditor.command.set("date", {
auquel il faudra mettre en css pour changer l'image :
- Code:
-
.sceditor-button-date {background : url ("le lien de votre image"); background-repeat:no-repeat;}
Vous l'aurez compris, il s'agit juste de remplacer servimg par la commande du bouton que vous souhaitez bien sacrifier.
Bon, pour le point B, à ce stade , vous allez très certainement me dire :
- Citation :
- "C'est bien beau de remplacer un bouton mais mettre un hébergeur sans le placer à côté de celui de servimg, cela fait un peu tâche."
Pas de panique, Milouze vous a déjà donné l'astuce pour déplacer un bouton donc autant l'utiliser.
On part toujours du principe que c'est le bouton date que l'on a utilisé.
Le js à coller dans la gestion des javascripts et à cocher sur sujets.
- Code:
-
$(function(){$(function(){
$('.sceditor-button-date').insertAfter($('.sceditor-button-servimg'))
})});
Accueil 
![[TOUTES VERSIONS] Installer Filepicker - Un gestionnaire d'upload de fichiers multi-sources gratuit Sans_t31](https://servimg.com/r/5511938524/sans_t31.png)
Baptiste,
