Problem with upload plugin ?

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#1
🎯Description of the issue

When I add the upload plugin button go an html page, nothing is displayed.

For exemple with this page with demo chevereto buttom : http://hebweb.fr/test.html
with this simple html code :

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Titre</title> </head>
<body><script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script> </body></html>


Also don't work with my upload website plugin.

Thanks you.

▶🚶‍Reproduction steps

😢Unexpected result

📃Error log message

No error.
 

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#3
I read the documentation, but I still do not understand. I do not find any mention to "testarea". Can you give me an example?
 

Rodolfo

Chevereto Developer
Chevereto Staff
Joined
Oct 7, 2008
Messages
16,259
Likes
4,225
Points
237
Location
Chevereto HQ
Website
rodolfoberrios.com
#4
Second paragraph in the docs:
PUP binds user-editable content with an upload button that will trigger an image upload dialog and it will auto handle the codes needed for image insertion. End-users will experience a fluid and neat process without leaving the original website.
User-editable content = textarea (or any element with content-editable). By the way, I wrote textarea, not testarea.
 

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#5
I know what is a textarea.

But I really don't understand what I have to do ...
Something like that ?

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"><textarea rows="4" cols="50">text</textarea></script>

or like that ?

<textarea rows="4" cols="50"><script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script></textarea>

or like that ?

<textarea rows="4" cols="50">text</textarea><script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script>

Sorry but I don't get it ...
 

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#7
Ok thanks you @Rodolfo.

I have added plugin code to my phpbb website into this file : posting_editor_options_prepend.html
It is working great :
https://images.guru/i/t2p

But also added it to quickreply_editor_message_after.html (to endle quick reply function), but it doesn't show anything :
https://images.guru/i/Gqb

So I tried to make a personalized button with this code :
HTML:
<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-vendor="phpbb"></script>

<button data-chevereto-pup-trigger data-target="message-box">Upload Image</button>
Just after :
HTML:
<div id="message-box" class="message-box" data-chevereto-pup-target="bc359a58-ba8c-42f0-b544-22f1fec56f88">

                    <textarea style="height: 9em;" name="message" rows="7" cols="76" tabindex="3" class="inputbox"></textarea>

                </div>
It add "Upload Image" button just after the textarea, but the button doesn't work. When I click on it, it redirects to complete phpbb editor message.
https://images.guru/i/Mkv

Thanks for help.
 
Last edited by a moderator:

McAtze

Network license
Beta tester
Joined
Aug 21, 2015
Messages
71
Likes
21
Points
58
Website
pixxx.cloud
#8
It should work very easy. Just add the SCRIPT to the header template of your phpbb forum. Maybe directly before </HEAD>
It should automaticly insert the button near the textarea/editor. If you need more than one button, maybe like your first image, you have to do it manually like described in the documentation.
 

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#9
Hello McAtze,
Thanks for the answer. But like a said, the button in the first image works great. But I cannot add the button to the second case (second image).
Some idea @Rodolfo ?
 

McAtze

Network license
Beta tester
Joined
Aug 21, 2015
Messages
71
Likes
21
Points
58
Website
pixxx.cloud
#10
You can just add the pup Code once to your site. It doesn‘t work if you put it several times into your website.
So just i said, put it once in the header and customize it for your needings.

Just a for grabbing ideas, this is my implementation for XenForo: https://github.com/McAtze/-ITM-CheveretoIntegration
 

Rodolfo

Chevereto Developer
Chevereto Staff
Joined
Oct 7, 2008
Messages
16,259
Likes
4,225
Points
237
Location
Chevereto HQ
Website
rodolfoberrios.com
#11
PUP for phpBB detects automatically where it should be placed. Once you call PUP, the thing does all the binding needed in all the found targets. These are the settings that the thing uses:

pup.js:
            phpbb: {
                settings: {
                    html: (document.querySelector('#format-buttons *:first-child') && document.querySelector('#format-buttons *:first-child').tagName == 'BUTTON') ? ' <button %x type="button" class="button button-icon-only" title="%text"><i class="icon fa-cloud-upload fa-fw" aria-hidden="true"></i></button> ' : ' <input %x type="button" class="button2" value="%text"> ',
                    sibling: '.bbcode-img',
                    siblingPos: 'before'
                },
                check: 'phpbb',
                getEditor: function() {
                    if(typeof form_name == typeof undefined || typeof text_name == typeof undefined) {
                        return;
                    }
                    return document.forms[form_name].elements[text_name];
                },
            },
So it sticks to the editors defined by window.form_name and window.text_name and place the thing next to class="bbcode-img".

If you want custom buttons or even manually trigger this thing, you have to use the manual mode. Is all explained in the docs under "Manual button binding".

Keep in mind to paste/use the appropriate codes. If you use data-chevereto-pup-target="bc359a58-ba8c-42f0-b544-22f1fec56f88" that thing won't ever work because that's a unique id generated by the PUP script, you can't re-use it.

And, when doing manual binding, you have to provide the button because pup won't generate it.
 

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#12
So I followed "Manual button binding".
I added this code into phpbb :

HTML:
<script async src="//images.guru/sdk/pup.js" data-url="https://images.guru/upload" data-mode="manual" data-target=".message-box"></script>
<button data-chevereto-pup-trigger data-target=".message-box" class="button button-icon-only"><i class="icon fa-cloud-upload fa-fw" aria-hidden="true"></i> Image Upload</button>
I have this button :
https://images.guru/i/xyQ

But when I click on it, it redirects me to full post page. It doesn't open upload popup.

See my code into phpbb code (lines 13/14) :

HTML:
<form method="post" action="./posting.php?mode=reply&amp;f=3&amp;t=1" id="qr_postform">
    <div class="panel">
        <div class="inner">
                <h2 class="quickreply-title">Réponse rapide</h2>
                <fieldset class="fields1">
                                    <dl style="clear: left;">
                        <dt><label for="subject">Sujet :</label></dt>
                        <dd><input type="text" name="subject" id="subject" size="45" maxlength="124" tabindex="2" value="Re: test" class="inputbox autowidth" /></dd>
                    </dl>
                                <div id="message-box" class="message-box">
                    <textarea style="height: 9em;" name="message" rows="7" cols="76" tabindex="3" class="inputbox"></textarea>
                </div>
                <script async src="//images.guru/sdk/pup.js" data-url="https://images.guru/upload" data-mode="manual" data-target=".message-box"></script>
<button data-chevereto-pup-trigger data-target=".message-box" class="button button-icon-only"><i class="icon fa-cloud-upload fa-fw" aria-hidden="true"></i> Image Upload</button>                </fieldset>
                <fieldset class="submit-buttons">
                    <input type="hidden" name="creation_time" value="1544107100" />
<input type="hidden" name="form_token" value="6e1117e2d42738ef89fd5ae7629ca903e400b95d" />

                    <input type="hidden" name="topic_cur_post_id" value="1" />
<input type="hidden" name="lastclick" value="1544107100" />
<input type="hidden" name="topic_id" value="1" />
<input type="hidden" name="forum_id" value="3" />
<input type="hidden" name="attach_sig" value="1" />

                    <input type="submit" accesskey="f" tabindex="6" name="preview" value="Éditeur complet &amp; Aperçu" class="button2" id="qr_full_editor" />&nbsp;
                    <input type="submit" accesskey="s" tabindex="7" name="post" value="Envoyer" class="button1" />&nbsp;
                </fieldset>
        </div>
    </div>
</form>
 

Rodolfo

Chevereto Developer
Chevereto Staff
Joined
Oct 7, 2008
Messages
16,259
Likes
4,225
Points
237
Location
Chevereto HQ
Website
rodolfoberrios.com
#15
Try to use a non-form controller button (for example, a div or a link) because the <button> is triggering the form submit.
 

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#16
Hello,
Tried with a div or a link, but now the button don't do anything.

HTML:
<script async src="//images.guru/sdk/pup.js" data-url="https://images.guru/upload" data-mode="manual" data-target=".message-box"></script>
<a data-chevereto-pup-trigger data-target=".message-box" class="button button-icon-only"><i class="icon fa-cloud-upload fa-fw" aria-hidden="true"></i> Image Upload</a>
 

ImagesGuru

Core license
License owner
Joined
Nov 1, 2018
Messages
62
Likes
4
Points
58
#18
Honestly, I read it at least 10 times. But obviously I can not apply it. Can you give me an example that I understand what's wrong? I tried the following script but it does not work either (part "Custom HTML and CSS").

JavaScript:
<script async src="//images.guru/sdk/pup.js" data-url="https://images.guru/upload" data-mode="manual" data-target=".message-box" data-html="<a %x title='%text' class='%bClass'>%iconSvg</a>"></script>
 

McAtze

Network license
Beta tester
Joined
Aug 21, 2015
Messages
71
Likes
21
Points
58
Website
pixxx.cloud
#19