Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • November 2017
    MonTueWedThuFriSatSun
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    Go to page : Previous  1, 2, 3

    View previous topic View next topic Go down  Message [Page 3 of 3]

    avatar

    Create an Easy Doc & Image Uploader (Updated)

    Mr.EasyBB
    06/01/2013
    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 Smile 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 NameMimeTypeExtension
    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
    FlashPiximage/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 Documentimage/vnd.adobe.photoshop.psd
    PICT Imageimage/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
    iCalendartext/calendar.ics
    In3D - 3DMLtext/vnd.in3d.3dml.3dml
    In3D - 3DMLtext/vnd.in3d.spot .spot
    J2ME App Descriptortext/vnd.sun.j2me.app-descriptor.jad
    Java Source Filetext/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 Valuestext/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
    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    I changed the entire code to jQuery lol. jQuery has IE handling built into it.

    Post on June 8th 2013, 7:09 pm by Mr.EasyBB

    avatar
    Ok great man whatever works I always say.. lol

    Post on June 8th 2013, 7:21 pm by runawayhorses

    avatar
    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.

    Post on June 9th 2013, 12:17 am by runawayhorses

    avatar
    Well I tested it with IE, and in the console you can change from IE7-10 and 10 compatibility mode.

    Post on June 9th 2013, 1:06 am by Mr.EasyBB

    avatar
    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.

    Post on June 9th 2013, 1:26 am by runawayhorses

    avatar
    Mr. EasyBB did you find anything wrong with my code?

    Post on June 9th 2013, 1:35 am by Puppycheese889

    avatar
    Update with new codes, you never responded where you had the code as I could not find any errors dealing with this script

    Post on June 9th 2013, 1:40 am by Mr.EasyBB

    avatar
    Sorry I was out at the movies tonight. The javascript file is called Doc uploader. Again sorry about that.  confused

    Post on June 9th 2013, 1:44 am by Puppycheese889

    avatar
    It works now! Very Happy

    Post on June 9th 2013, 2:03 am by Puppycheese889

    avatar
    I'm worried if I also Replace ServImg altogether that I might hit the max files aloud per month.

    Post on June 9th 2013, 3:14 am by Puppycheese889

    avatar
    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?

    Post on June 9th 2013, 9:42 am by runawayhorses

    avatar
    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.

    Post on June 9th 2013, 4:27 pm by Mr.EasyBB

    avatar
    Alright thank you Mr.EasyBB 5,000/month is a lot of images!

    Post on June 10th 2013, 12:37 am by Puppycheese889

    avatar
    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.]

    [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! 

    Post on June 11th 2013, 4:30 pm by Puppycheese889

    avatar
    It because of the code, what it looks for. I can try to make it more priority for you.

    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 Wink

    Post on June 11th 2013, 6:45 pm by Mr.EasyBB

    avatar
    Thank you! It worked I appreciate the help!

    Post on June 11th 2013, 9:11 pm by Puppycheese889

    avatar
    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?

    Post on June 14th 2013, 7:05 pm by Rukiafan

    avatar
    remove the limit Wink the maxSize line

    Post on June 14th 2013, 7:10 pm by Mr.EasyBB

    avatar
    That broke the code. Sad

    Post on June 14th 2013, 7:23 pm by Rukiafan

    avatar
    The line can only be edited and not removed. Wink

    Post on June 14th 2013, 8:05 pm by Rukiafan

    avatar

    no it can be removed...

    Code:
    filepicker.pick({mimetypes: ['text/*','image/*'],
    services:['COMPUTER','FACEBOOK'],
    },
    function(FPFile) {

    Post on June 14th 2013, 9:17 pm by Mr.EasyBB

    avatar
    sorry I can not understand and only a code or are more codes to be entered? thank you very much

    Post on June 16th 2013, 8:38 am by pedrox

    avatar
    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"
    });
    }
    });

    Post on June 16th 2013, 11:10 am by Mr.EasyBB

    avatar
    thanks

    Post on June 16th 2013, 3:08 pm by pedrox

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 3 of 3]

    Go to page : Previous  1, 2, 3