• Welcome to the Chevereto user community!

    Here users from all over the world gather around to learn the latest about Chevereto and contribute with ideas to improve the software.

    Please keep in mind:

    • 😌 This community is user driven. Be polite with other users.
    • 👉 Is required to purchase a Chevereto license to participate in this community (doesn't apply to Pre-sales).
    • 💸 Purchase a Pro Subscription to get access to active software support and faster ticket response times.
  • Chevereto Support CLST

    Support response

    Support checklist

Problem with upload plugin ?

ImagesGuru

Chevereto Member
🎯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.
 
I read the documentation, but I still do not understand. I do not find any mention to "testarea". Can you give me an example?
 
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.
 
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 ...
 
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:
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.
 
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 ?
 
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:

Code:
            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.
 
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>
 
Try to use a non-form controller button (for example, a div or a link) because the <button> is triggering the form submit.
 
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>
 
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>
 
Back
Top