Ok guys, so at first this was just a doc file uploader, little did you all know though that this code is also great for EASY IMAGE upload as well. I have updated the tutorial with the additional parts below, as well as additional mimetype information. Hope you all Enjoy


Step 1: First go to this link, and sign up [You must be registered and logged in to see this link.]
Make sure you use a valid Email Address incase you need an email verification.

Step 2:Now login to your account.

Step 3: Now you will be brought to the Developer Portal. You will need to hover/click the button Applications, a list will appear and you need to click Create New Application.

Step 4:Pick your Application Name, we named ours EasyBB Photo Uploader. You will be learning the DOC part, not images yet so. Then click next.

Step 5:Now you can click SKIP, as we will upload a logo and website url later on.

Step 6:Once you click SKIP you will see a list of buttons, click the I'm a Pro, show me the documentation. As I will help you with the rest of the coding. Once you have clicked I'm a Pro, it will bring you to the Documentation of the program, go to the top and click Developer Portal, and that will have very important information now.

Step 7:Once you are back in to the Developer Portal, leave this page open and get a new page leading to your ACP.

Step 8:Now go to ACP>MODULES>JavaScript Management and create a new JavaScript. Name it Doc Uploader, and mark it for IN TOPICS ONLY! Now we will get started with our code.

Step 9:

Code:

$(function() {
//create a doc ready function
});

Step 10:

Now we will create our script tag and append it to the head

Code:

$(function() {
//CREATING SCRIPT TO MAKE EVERYTHING WORK!
 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);
});

Step 11:
After that we will create our button and append it next to the Send Button

Code:

$(function() {
//CREATING SCRIPT TO MAKE EVERYTHING WORK!
 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);

//Create the Button-
$('.frm-buttons').append('<span id="newDoc">Upload File</span>');
});

Step 12:

Now we have to write the last code which will pull everything together!

Code:

$(function() {
//CREATING SCRIPT TO MAKE EVERYTHING WORK!
 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);

//Create the Button-
$('.frm-buttons').append('<span id="newDoc">Upload File</span>');

$('#newDoc').on('click',function() {
  getPick();
});
});
function getPick(){
var textArea = $('#text_editor_textarea');
filepicker.setKey('API KEY HERE');
 filepicker.pick({
mimetypes: ['text/*'],
services:['COMPUTER'],
maxSize:50*1024
},function(FPFile) {
 var docFile = FPFile.url;
 textArea.val(textArea.val()+'[url]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,"")+'[/url]');
});
}


if you are using both images and text here is the code to use the correct BBCode tags

Code:

function getPick(){
var textArea = $('#text_editor_textarea');
filepicker.setKey('API KEY HERE');
  filepicker.pick({mimetypes: ['text/*','image/*'],
                   services:['COMPUTER','FACEBOOK'],
                   maxSize:50*1024},
function(FPFile) {
 var docFile = FPFile.url;
 var type= FPFile.mimetype;
if(/^.*text.*$/.test(type)) {
 textArea.val(textArea.val()+'[url]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,"")+'[/url]');
} else if(/^.*image.*$/.test(type)) {
 textArea.val(textArea.val()+'[img]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,"")+'[/img]');
}
});
}


Just make sure to completely overwrite the other getPick() function with the new getPick() function. Ok.

What we have done now, is made the entire filepicker code into a function, and added an event Listener to the button. So now everything is in working order Thank you for the updates on the code guys.

SERVICES

• BOX
  
• COMPUTER
  
• DROPBOX
  
• EVERNOTE
  
• FACEBOOK
  
• FLICKR
  
• FTP:No one has a FTP account I'm sure
  
• GITHUB
  
• GOOGLE_DRIVE
  
• SKYDRIVE
  
• PICASA
  
• WEBDAV
  
• Pick only:
  
• GMAIL
  
• IMAGE_SEARCH
  
• INSTAGRAM
  
• URL
  
• VIDEO
  
• WEBCAM
  

For this tutorial I will explain the Services for docs.

We are doing doc files so we only need a few of these services. So I would recommend doing this-

services:['COMPUTER','GOOGLE_DRIVE','DROPBOX'];


MIMETYPES

[hc=Full list of MimeTypes]
 [/tr][tr]

File Name	MimeType	Extension
AutoCAD DXF	image/vnd.dxf	.dxf
Bitmap Image File	image/bmp	.bmp
BTIF	image/prs.btif	.btif
Close Captioning - Subtitle	image/vnd.dvb.subtitle	.sub
CMU Image	image/x-cmu-raster	.ras
Computer Graphics Metafile	image/cgm	.cgm
Corel Metafile Exchange (CMX)	image/x-cmx	.cmx
DECE Graphic	image/vnd.dece.graphic	.uvi
DjVu	image/vnd.djvu	.djvu
DWG Drawing	image/vnd.dwg	.dwg
EDMICS 2000	image/vnd.fujixerox.edmics-mmr	.mmr
EDMICS 2000	image/vnd.fujixerox.edmics-rlc	.rlc
eXtended Image File Format (XIFF)	image/vnd.xiff	.xif
FAST Search & Transfer ASA	image/vnd.fst	.fst
FastBid Sheet	image/vnd.fastbidsheet	.fbs
FlashPix	image/vnd.fpx	.fpx
FlashPix	image/vnd.net-fpx	.npx
FreeHand MX	image/x-freehand	.fh
G3 Fax Image	image/g3fax	.g3
Graphics Interchange Format	image/gif	.gif
Icon Image	image/x-icon	.ico
Image Exchange Format	image/ief	.ief
JPEG Image	image/jpeg	.jpeg, .jpg
Microsoft Document Imaging Format	image/vnd.ms-modi	.mdi
OpenGL Textures (KTX)	image/ktx	.ktx
PCX Image	image/x-pcx	.pcx
Photoshop Document	image/vnd.adobe.photoshop	.psd
PICT Image	image/x-pict	.pic
Portable Anymap Image	image/x-portable-anymap	.pnm
Portable Bitmap Format	image/x-portable-bitmap	.pbm
Portable Graymap Format	image/x-portable-graymap	.pgm
Portable Network Graphics (PNG)	image/png	.png
Portable Pixmap Format	image/x-portable-pixmap	.ppm
Scalable Vector Graphics (SVG)	image/svg+xml	.svg
Silicon Graphics RGB Bitmap	image/x-rgb	.rgb
Tagged Image File Format	image/tiff	.tiff
WAP Bitamp (WBMP)	image/vnd.wap.wbmp	.wbmp
WebP Image	image/webp	.webp
X BitMap	image/x-xbitmap	.xbm
X PixMap	image/x-xpixmap	.xpm
X Window Dump	image/x-xwindowdump	.xwd
Assembler Source File	text/x-asm	.s
BAS Partitur Format	text/plain-bas	.par
C Source File	text/x-c	.c
Cascading Style Sheets (CSS)	text/css	.css
Comma-Seperated Values	text/csv	.csv
Curl - Applet	text/vnd.curl	.curl
Curl - Detached Applet	text/vnd.curl.dcurl	.dcurl
Curl - Manifest File	text/vnd.curl.mcurl	.mcurl
Curl - Source Code	text/vnd.curl.scurl	.scurl
FLEXSTOR	text/vnd.fmi.flexstor	.flx
Fortran Source File	text/x-fortran	.f
Graphviz	text/vnd.graphviz	.gv
HyperText Markup Language (HTML)	text/html	.html
iCalendar	text/calendar	.ics
In3D - 3DML	text/vnd.in3d.3dml	.3dml
In3D - 3DML	text/vnd.in3d.spot	.spot
J2ME App Descriptor	text/vnd.sun.j2me.app-descriptor	.jad
Java Source File	text/x-java-source.java	.java
mod_fly / fly.cgi	text/vnd.fly	.fly
Notation3	text/n3	.n3
Pascal Source File	text/x-pascal	.p
PRS Lines Tag	text/prs.lines.tag	.dsc
Rich Text Format (RTF)	text/richtext	.rtx
Setext	text/x-setext	.etx
Standard Generalized Markup Language (SGML)	text/sgml	.sgml
Tab Seperated Values	text/tab-separated-values	.tsv
Text File	text/plain	.txt
troff	text/troff	.t
Turtle (Terse RDF Triple Language)	text/turtle	.ttl
URI Resolution Services	text/uri-list	.uri
UUEncode	text/x-uuencode	.uu
vCalendar	text/x-vcalendar	.vcs
vCard	text/x-vcard	.vcf
Wireless Markup Language (WML)	text/vnd.wap.wml	.wml
Wireless Markup Language Script (WMLScript)	text/vnd.wap.wmlscript	.wmls
AutoCAD DXF	image/vnd.dxf	.dxf
Bitmap Image File	image/bmp	.bmp
BTIF	image/prs.btif	.btif
Close Captioning - Subtitle	image/vnd.dvb.subtitle	.sub
CMU Image	image/x-cmu-raster	.ras
Computer Graphics Metafile	image/cgm	.cgm
Corel Metafile Exchange (CMX)	image/x-cmx	.cmx
DECE Graphic	image/vnd.dece.graphic	.uvi
DjVu	image/vnd.djvu	.djvu
DWG Drawing	image/vnd.dwg	.dwg
EDMICS 2000	image/vnd.fujixerox.edmics-mmr	.mmr
EDMICS 2000	image/vnd.fujixerox.edmics-rlc	.rlc
eXtended Image File Format (XIFF)	image/vnd.xiff	.xif
FAST Search & Transfer ASA	image/vnd.fst	.fst
FastBid Sheet	image/vnd.fastbidsheet	.fbs
FlashPix	image/vnd.fpx	.fpx
FlashPix	image/vnd.net-fpx	.npx
FreeHand MX	image/x-freehand	.fh
G3 Fax Image	image/g3fax	.g3
Graphics Interchange Format	image/gif	.gif
Icon Image	image/x-icon	.ico
Image Exchange Format	image/ief	.ief
JPEG Image	image/jpeg	.jpeg, .jpg
Microsoft Document Imaging Format	image/vnd.ms-modi	.mdi
OpenGL Textures (KTX)	image/ktx	.ktx
PCX Image	image/x-pcx	.pcx
Photoshop Document	image/vnd.adobe.photoshop	.psd
PICT Image	image/x-pict	.pic
Portable Anymap Image	image/x-portable-anymap	.pnm
Portable Bitmap Format	image/x-portable-bitmap	.pbm
Portable Graymap Format	image/x-portable-graymap	.pgm
Portable Network Graphics (PNG)	image/png	.png
Portable Pixmap Format	image/x-portable-pixmap	.ppm
Scalable Vector Graphics (SVG)	image/svg+xml	.svg
Silicon Graphics RGB Bitmap	image/x-rgb	.rgb
Tagged Image File Format	image/tiff	.tiff
WAP Bitamp (WBMP)	image/vnd.wap.wbmp	.wbmp
WebP Image	image/webp	.webp
X BitMap	image/x-xbitmap	.xbm
X PixMap	image/x-xpixmap	.xpm
X Window Dump	image/x-xwindowdump	.xwd

[/hc]



mimetypes:['text/*'],: Means allow ALL text format docs
mimetypes:['text/plain'],:Means allow only Plain Text format docs
mimetypes:['application/msword'],:Means allow Microsoft Word format docs
mimetypes:['text/html'],:Allows HTML docs
mimetypes:['image/*'],: Allows ALL image types

We can combine these arrays as well like this

mimetypes:['application/msword','text/plain']

I would recommend just using the First mimetype which I already provide.


That is it for me, I will be updating this thread with more useful information. 



[hc=onSuccess Functions]

To create an onSuccess add this after the services, we will also have to add another code to the script.

Code:

onSuccess: function(fpfiles) {
        var succText= "Congratulations! Your File Has Been Uploaded";
        func.html(errText);
       func.css('color',"#FF0000"); 
    },

There is a lot of different things you can do. I will be adding more cool onSuccess functions as I go
[/hc]

[hc=onError Functions]
For the onError add this right after the onSuccess if you are using it or after the services.

Code:

onError: function(fpfiles) {
       var errText= "There seems to be a problem with the file you have tried uploading.Please Try again";
       func.html(errText);
       func.css('color',"#FF0000"); 
    },

There is a lot of different things you can do. I will be adding more cool onError functions as I go
[/hc]

[hc=Addition Code]

Code:


buttonsArea.append('<br /><span id="fp_text"></div>');
var func= $('#fp_text');


[/hc]

[hc=Replacing ServImg altogether]

Code:

$(function() {
        var editor= $('#wservimg') || $('#servimg'),
      wserv= $('#wservimg'),
       serv= $('#servimg');
        if(editor){
        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);




if(serv){
        serv.attr('id',"newDoc");
        serv.children('img').attr('title','New Image Uploader');
        serv.removeAttr('onclick');
        serv.attr('onmouseover','helpline("Upload or Edit an Image")');
  $(serv).on('click', function(){
     getPick();
  });
} else if(wserv){
        wserv.attr('id',"newDoc");
        wserv.children('img').attr('title','New Image Uploader');
        wserv.removeAttr('onclick');
        wserv.attr('onmouseover','helpline("Upload or Edit an Image")');
        $(wserv).on('click', function(){
     getPick();
  });
}
        }
        });
   function getPick(){
  var textArea = $('#text_editor_textarea');
        filepicker.setKey('Az2CCtVMaSWq6NkupVaNsz');
         filepicker.pick({
        mimetypes: ['text/*','image/*']
        },function(FPFile) {
         var docFile = FPFile.url;
         var type= FPFile.mimetype;
        if(/^.*text.*$/.test(type)) {
         textArea.val(textArea.val()+'[url]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,"")+'[/url]');
        } else if(/^.*image.*$/.test(type)) {
         textArea.val(textArea.val()+'[img]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,"")+'[/img]');
        }
        });
        }


[/hc]

Updated the Codes, moved the function getPick outside of the doc ready function!

Updated the Codes, fixed cross browser defect. Different IDs were appearing for FireFox and IE compared to Chrome

IE7 IE8 IE9 IE10 all supported as well as Chrome, FireFox, Opera, and other browsers as well. Entire code changed to jQuery