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  Next

    View previous topic View next topic Go down  Message [Page 2 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
    Puppycheese, toolbar code is a code that you have on all pages. the 99 means JavaScript Management pages marked for all pages. I'll take a look at the var ButtonsArea for you.

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

    avatar
    I misspelled the var in the line. here   [You must be registered and logged in to see this link.]

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

    avatar
    where do I add this in at? I tried a few different spots I thought it might go but I couldn't figure it out. 

    Post on June 5th 2013, 12:44 am by Puppycheese889

    avatar
    Replace the JS for this with the one from the jsbin link in my last post. 

    Post on June 5th 2013, 8:45 am by Mr.EasyBB

    avatar
    It says there is a parse error. I replaced the whole code with this 
    Code:
    $(document).on('click','#mod_operators',function() {    var a =$('.mod_bbcodes');    var b = $('#});
    it didn't work.

    Post on June 5th 2013, 5:45 pm by Puppycheese889

    avatar
    Oh gosh my bad confused for some reason it was the wrong code it does that sometimes as it has an automatic save function for that website. here is the code man   [You must be registered and logged in to see this link.]

    Post on June 5th 2013, 5:49 pm by Mr.EasyBB

    avatar
    I've added a code to replace ServImg altogether.

    Post on June 5th 2013, 11:20 pm by Mr.EasyBB

    avatar
    It didn't work! [You must be registered and logged in to see this link.] I tried the code from here and it gave me the following errors and the toolbar disappeared. I'm not having luck today lol!

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

    avatar
    You see how in that bin there are no errors at the bottom? Means the code is perfect, (basically), what you need to do is just give me a test account and url to check this out myself. When giving me a console error please write out the full error and js number

    Post on June 6th 2013, 1:01 am by Mr.EasyBB

    avatar
    Ok I will pm you a test account for you to use!

    Post on June 6th 2013, 2:05 am by Puppycheese889

    avatar
    So I have been informed by Runaway that the implementation I did for him isn't working in IE nor FireFox so I am going to take a closer look at my coding and see if maybe this is the reason some of you all are having issues with IE or Firefox as well.

    Post on June 7th 2013, 4:17 pm by Mr.EasyBB

    avatar
    I am using safari when I was on the page. Maybe that has an affect on safari as well

    Post on June 7th 2013, 4:27 pm by Puppycheese889

    avatar
    Maybe it does Wink I just fixed his issue, which was that the function wasn't being defined so I moved it outside the doc ready function. So maybe that will have an effect on all. Want to join me in Chat Puppy?

    Post on June 7th 2013, 4:28 pm by Mr.EasyBB

    avatar
    We have a problem now on IE, yes it works for firefox and chrome but on IE the icons aren't showing up. As you know that can't happen because people on IE might need to use the other icons sometimes, and none are showing up on IE but the "editor Mode" icon.

    Post on June 7th 2013, 11:44 pm by runawayhorses

    avatar
    ok I'll take a peak at IE

    Post on June 8th 2013, 12:26 am by Mr.EasyBB

    avatar
    ok so you must be using an old IE Wink As I changed IE to IE7 and IE8 are the only ones effect by this. I can probably see what I can do for those browsers if it is important. IE9 and IE10 work fine.

    Post on June 8th 2013, 12:31 am by Mr.EasyBB

    avatar
    Ok thanks for looking into it. It figures those IE's versions are effected by it they are going outdated fast it seems. My version of IE is 8 which is the highest windows XP will go as you know, and microsoft is done with XP in that respect. However, since a lot of people still use XP and IE 8 is the last version for XP I think it needs to work for that too, its important in the fact the icons do not show, if it was just the uploader that didn't work for those browser versions I wouldn't be concerned about it, but the entire selection of text editor icons are missing with the exception of the "editor mode" icon which doesn't work, so if you can figure it out for at least IE 8 would be great for everyone concerned and make this code that much more valuable, IE 7 people can and should upgrade but 8 is the last version for XP. If not I will have no choice but to remove the code I can't have that disabling all the text editor icons like that.

    Post on June 8th 2013, 2:16 am by runawayhorses

    avatar
    Well as I've been looking deeper I am seeing some of the issues are caused by using Vanilla JavaScript. So I may see how jQuery is handled on IE.

    Post on June 8th 2013, 4:05 pm by Mr.EasyBB

    avatar
    Mine is still not working at the moment either.

    Post on June 8th 2013, 4:07 pm by Puppycheese889

    avatar
    Ok. Puppycheese, I believe I still have the PM from you so I am going to see what it says on yours on ok.

    Post on June 8th 2013, 4:08 pm by Mr.EasyBB

    avatar
    Ok thank you Mr.EasyBB!

    Post on June 8th 2013, 4:15 pm by Puppycheese889

    avatar
    Puppycheese before we go any farther fix this code...

    Code:
    var browserName=navigator.appName; 
    if (browserName=="Microsoft Internet Explorer")

     alert("I've noticed you are using internet explorer. This browser is not recommended for this site. To improve your experience switch to "Firefox" or "Chrome" Thank you!");
    }

    You have to be careful with quotations you escaped the sentence when you said "Firfox" or "Chrome" as you started the string with "I've so you have to make it this-

    Code:
    var browserName=navigator.appName.toLowerCase(); 
    if (browserName.indexOf('microsoft') !== -1)

     alert('I've noticed you are using internet explorer. This browser is not recommended for this site. To improve your experience switch to "Firefox" or "Chrome" Thank you!');
    }

    Post on June 8th 2013, 4:16 pm by Mr.EasyBB

    avatar
    For now I just took it off since it was giving me trouble. It was just to alert people to use a different browser if they are on IE That's all.

    Post on June 8th 2013, 4:24 pm by Puppycheese889

    avatar
    Runawayhorses I have fixed your code, it is working to IE9, if its lower than IE9 it will change to default Image Selector.

    So I changed this entire coding to basic all jQuery and its working right down to IE7  confused so annoying I'll be updating the entire script so it works for all IE users as well!

    Post on June 8th 2013, 5:44 pm by Mr.EasyBB

    avatar
    You must have fixed it easy its working for Internet Explorer now, thanks. What did you do? Smile

    Post on June 8th 2013, 6:54 pm by runawayhorses

    Post  by Sponsored content

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

    Go to page : Previous  1, 2, 3  Next