Uploading Images to a plugin

Post Reply
Jr. Bludit
Posts: 1
Joined: Sun Mar 03, 2019 10:46 pm

Sun Mar 03, 2019 10:56 pm


I never know how to start a post. So I start directly.

I am currently working on a slider pluign. I'm almost done, but now I'm having trouble uploading pictures. I've been looking for plugins that can do that, but found nothing. So I looked at the bludit code and found the files media.php and upload-images.php. Can these files be customized to work for the plugin? I have already managed to create folders from the two files.

As upload folder I use "bl-content/uploads/plugins/slider/"

Thank you for helping me
User avatar
Ssr. Bludit
Posts: 17
Joined: Tue Dec 25, 2018 8:07 pm
Location: Austria 'n' Germany

Tue Mar 05, 2019 9:43 am


I'm using a JavaScript / AJAX styled solution on my plugins, based on Bludit's core solution (as shown in "bl-kernel/admin/themes/booty/html/media.php"). So I'm using a Bootstrap Modal element, as well as a small JavaScript snippet, which sends the images using AJAX to "bl-kernel/ajax/upload-images.php".

This seems to be the official way, I guess.

The Modal HTML Code:

Code: Select all

<div id="upload-media-modal" class="modal" tabindex="-1" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col p-3">
                        <h3 class="mt-2 mb-3">Upload Files</h3>

                        <form id="upload-media-form" name="upload-media-form" enctype="multipart/form-data">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="upload-media-file" name="bluditInputFiles[]" />
                                <label class="custom-file-label" for="upload-media-file">Upload</label>

                        <div class="progress mt-2">
                            <div id="upload-media-progressbar" class="progress-bar bg-primary" role="progressbar" style="width:0%"></div>
The JavaScript Code:

Code: Select all

// The Button, which shows the Media Modal
    d.querySelector("[data-handle='media']").addEventListener("click", function(event){
        jQuery("#upload-media-modal").attr("data-target", "#" + this.id);

// Handle AJAX Request made by the Media Modal
    d.querySelector("#upload-media-modal").addEventListener("change", function(){
        d.querySelector("#upload-media-progressbar").style.width = "1%";

        // AJAX Data
        var formData = new FormData(d.querySelector("#upload-media-form"));

        // The respective page nonce
        formData.append("tokenCSRF", d.querySelector("#nonce").value); 

        // AJAX Request
            url: HTML_PATH_ADMIN_ROOT + "ajax/upload-images",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            xhr: function(){

                // Animated ProgressBar 
                var xhr = jQuery.ajaxSettings.xhr();
                    return xhr;
                xhr.upload.addEventListener("progress", function(event){
                        var percent = (event.loaded / event.total) * 100;
                        d.querySelector("#upload-media-progressbar").style.width = percent + "%";
                }, false);
                return xhr;
        }).done(function(data, status){
            var file = DOMAIN_UPLOADS + data.filename;

            // Handle File Stuff using the filepath
The Result:


» I'm a man of action. A swashbuckler. A rogue. A wanderer. A man who can hold his breath for ten minutes. « – Guybrush Threepwood, Monkey Island.
Post Reply