MyBB Community Forums

1. MyBB's native Attachment system is just uploader, doesn't return upload path on the fly. The new attachment system does that and acts like API though (sort of), but it does some complex activities too; like thumbnail, attachment count, attachment quota etc.

2. It doesn't check Access Control Header; which in your case - it should.

3. If you want to host images in-house; the settings of those should be different than attachment system, like
- it should allow only image files
- it should have the limits (size, dimension etc) separate.
- you may like to auto-resize the image or optimize for maximum storage and fast loading; which is absent in attachment system.
- you may like to add functionality of image expiry / auto deletion.

If you want to learn a bit about what I said; here is a resource:
https://webscodex.medium.com/how-to-uplo...876d2ef37a

It can; however; be implemented using a custom plugin. I am not sure whether I will be able to manage time to build one but I will definitely try.

(2024-02-26, 08:19 PM)effone Wrote: [ -> ]1. MyBB's native Attachment system is just uploader, doesn't return upload path on the fly. The new attachment system does that and acts like API though (sort of), but it does some complex activities too; like thumbnail, attachment count, attachment quota etc.

2. It doesn't check Access Control Header; which in your case - it should.

3. If you want to host images in-house; the settings of those should be different than attachment system, like
- it should allow only image files
- it should have the limits (size, dimension etc) separate.
- you may like to auto-resize the image or optimize for maximum storage and fast loading; which is absent in attachment system.
- you may like to add functionality of image expiry / auto deletion.

If you want to learn a bit about what I said; here is a resource:
https://webscodex.medium.com/how-to-uplo...876d2ef37a

It can; however; be implemented using a custom plugin. I am not sure whether I will be able to manage time to build one but I will definitely try.

Thank you very much for that info and link .... from that I got it working but only (so far) on a few test pages (and test db).

I get this as a response:

{
  "status": true,
  "message": "File Uploaded Successfully",
  "url": "https://example.com/aaaAPI/anuploads/WC-65ddc80449f0c.jpg"
}

and file is uploaded and entered into db.

I guess that I would I only need this bit as the response or would it be even less than that?

{
  "url": "https://example.com/aaaAPI/anuploads/WC-65ddc9137693a.png"
}

So now I need to get all the PHP inserted into your code, in place of the function?

Rest is all JS to receive the response, target the editor and insert with a proper img bbcode.
I am sure you can wash your hand on it, for any assistance I am always there

(2024-02-27, 04:08 PM)effone Wrote: [ -> ]Rest is all JS to receive the response, target the editor and insert with a proper img bbcode.
I am sure you can wash your hand on it, for any assistance I am always there

I wish I could mate lol

I have broke my test site multiple times this day

My HTML is ok, my css is ok, my php is old (but that matches me as I am; and don't forget I am a carpenter .... an OLD one lol) .... my JavaScript is old and not very good .... but I am trying but it is not working  

So, I have changed your function in "codebuttons" to:

function imgurUpload(file) {
return new Promise((resolve, reject) => {
        const validExtensions = ['jpg', 'jpeg', 'png', 'gif'];
        const uploadUrl = 'https://example.com/uploads/upload1';

        const fileName = file.name;
        const fileExt = fileName.split('.').pop().toLowerCase();

        if (!validExtensions.includes(fileExt)) {
            reject({ status: false, message: "Only images are allowed" });
            return;
        }

        const formData = new FormData();
        formData.append('fileToUpload', file);

        fetch(uploadUrl, {
            method: 'POST',
            body: formData,
            headers: {
                'Acess-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Acess-Control-Allow-Methods': 'POST',
                'Acess-Control-Allow-Headers': 'Acess-Control-Allow-Headers,Content-Type,Acess-Control-Allow-Methods, Authorization',
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Not working');
            }
            return response.json();
        })
        .then(data => {
            resolve(data);
        })
        .catch(error => {
            reject({ status: false, message: error.message });
        });
    });
}

Why for most of it .... I have no idea, just randomly gathered from the internet and put together in some way shape and form .... which gives no errors but does not work lol.
It does not upload the image nor returns a url!

I did also alter (well I took out the client ID stuff) another part of your "codebuttons" .... so this is that part

var partialmode = {$mybb->settings['partialmode']},
opt_editor = {
plugins: "undo, dragdrop",
format: "bbcode",
bbcodeTrim: true,
style: "{$mybb->asset_url}/jscripts/sceditor/styles/jquery.sceditor.{$theme['editortheme']}?ver=1823",
dragdrop: {
allowedTypes: ['image/jpeg', 'image/png'],
isAllowed: function (file) {
return true;
},
handlePaste: true,
handleFile: function (file, createPlaceholder) {
var placeholder = createPlaceholder();
imgurUpload(file).then(function (url) {
placeholder.insert('<img src=\'' + url + '\' />');
}).catch(function () {
placeholder.cancel();
});
}
},

Just not up to date (or very good at it .... lmao)

Not swimming .... just slowly drowning

---

I made some changes and what I get back is a broken image and in the source view "[img][object Object][/img]"

But no upload <sad face>

(2024-02-27, 04:08 PM)effone Wrote: [ -> ]Rest is all JS to receive the response, target the editor and insert with a proper img bbcode.
I am sure you can wash your hand on it, for any assistance I am always there

Had another look this morning and my JS just isn't good enough, along with my knowledge of MyBB being insufficient!

No matter what I tried I can't get it to work. It might upload the image, although that would be about 1 in 10   and it won't receive the json response .... so I decided to go back to something simple away from the editor.

Made an index page and put a image upload form on it.
That form calls the imageUpload function on click.
The function passes the image to a php script which uploads the image and returns the json response.

Works every time.

That page looks like this with the console open (this is the responses from the last 5 uploads):

[attachment=46717]

So .... maybe I will try another day but I haven't time to learn JS properly

---

So going a different way .... reverting back to the base codebuttons and then adding straight to New Reply template .... I now have a button under the smilies, which allows me to upload an image to my server and returns an Alert which gives the URL of the uploaded image.
The Alert gives this type of URL (it auto puts in the img tags):

"[img]https://example.com/serveImage/WC-65e20e86f2e6b.png[/img]"

So next I need to get the Alert to remove the " from each end .... and then, some how, get it to put the response directly into the text area?

I have tried copy/paste the Alert (without the ") into the editor and it works fine and also quotes.

---

---

(2024-02-27, 04:08 PM)effone Wrote: [ -> ]Rest is all JS to receive the response, target the editor and insert with a proper img bbcode.
I am sure you can wash your hand on it, for any assistance I am always there

Got it  

• Click button
  
• select image
  
• image uploads to my server
  
• img tags and url are automatically inserted into editor text area
  
• and the images all quote
  

Will need cleaning up and checking for security .... but it's alive and kicking (with no errors)



Any chance you could check the code etc for me?