May 2024
Search
Similar topics
Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
Most Viewed Topics
Top posting users this week
No user |
Go to page : 1, 2, 3
Create an Easy Doc & Image Uploader (Updated)
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:
Step 10:
Now we will create our script tag and append it to the head
Step 11:
After that we will create our button and append it next to the Send Button
Step 12:
Now we have to write the last code which will pull everything together!
if you are using both images and text here is the code to use the correct BBCode tags
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
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]
[/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.
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.
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]
[hc=Replacing ServImg altogether]
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
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]
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 | [/tr]
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 |
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=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]');
}
});
}
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
Similar topics
Ha, I just read this again where I somehow missed the part of your post when you said "So I changed this entire coding to basic all jQuery and its working right down to IE7" and then I asked how you fixed it..lol
btw, why would anyone still be using IE-7 ? I can understand why they might stiil be 8 if there using XP but why would anyone still be using IE-7? Oh well its nice to know the uploader will work for that too.
btw, why would anyone still be using IE-7 ? I can understand why they might stiil be 8 if there using XP but why would anyone still be using IE-7? Oh well its nice to know the uploader will work for that too.
That's fine but it does not address my question, I'm wondering why anyone would still be using IE-7 not how you checked the uploaders compatibility.
Update with new codes, you never responded where you had the code as I could not find any errors dealing with this script
Sorry I was out at the movies tonight. The javascript file is called Doc uploader. Again sorry about that.
Puppycheese889 wrote:I'm worried if I also Replace ServImg altogether that I might hit the max files aloud per month.
You used to get a lot of people uploading pictures with serving did you? How can that be members that don't own forums on forumotion can't use serving. Does your forum average around 5,000 posts a month?
No you shouldn't worry at all PuppyCheese! You get 5,000 Images a MONTH. If you get more than that (which it is unlikely) you can upgrade to business, which is very expensive, though I believe they say its unlimited downloads and uploads so.
I found an issue! It's strange I will post a screenshot of what I mean.
[You must be registered and logged in to see this image.]
It sometimes appears in odd places. Also I wasn't able to vote on the poll either... This is strange!
[You must be registered and logged in to see this image.]
It sometimes appears in odd places. Also I wasn't able to vote on the poll either... This is strange!
It because of the code, what it looks for. I can try to make it more priority for you.
look for this line
change it to this-
Now if you don't want these, do what I did for Runawayhorses which is, I got rid of the ServImg completely and that button is replaced with our new Uploader
look for this line
- Code:
//Create the Button-
$('.frm-buttons').append('<span id="newDoc">Upload File</span>');
change it to this-
- Code:
//Create the Button-
$('#quick_reply .frm-buttons').append('<span id="newDoc">Upload File</span>');
Now if you don't want these, do what I did for Runawayhorses which is, I got rid of the ServImg completely and that button is replaced with our new Uploader
I keep getting an error that my website doesn't support files over 50 KB since the new editor was added....what's up with that?
no it can be removed...
- Code:
filepicker.pick({mimetypes: ['text/*','image/*'],
services:['COMPUTER','FACEBOOK'],
},
function(FPFile) {
Pedrox please use this code now as this is deprecated until the old editor come backs (if it ever does)
- Code:
$(function() {
var checkIf= $('.sceditor-container');
if(checkIf.length){
$.sceditor.command.set("servimg", {
exec: function(caller) {
var editor = this,
data = $('#text_editor_textarea').data('sceditor'),
source = data.inSourceMode();
if(!editor.initalised)
{
filepicker.setKey('APIKEY HERE');
filepicker.pick({mimetypes: ['text/*','image/*'],
services:['COMPUTER','FACEBOOK']
},function(FPFile) {
var docFile = FPFile.url,
type= FPFile.mimetype;
if(/^.*text.*$/.test(type)) {
data.insert('[url]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,"")+'[/url]');
} else if(/^.*image.*$/.test(type)) {
data.insert('[img]'+FPFile.url+'+'+FPFile.filename.replace(/\s/g,"")+'[/img]');
}
});
}
},
tooltip: "Upload File"
});
}
});
Go to page : 1, 2, 3