Uploading Images to a plugin

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

Sun Mar 03, 2019 10:56 pm

Hello,

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
Anika
User avatar
SamBrishes
Sr. Bludit
Posts: 40
Joined: Tue Dec 25, 2018 8:07 pm
Location: Austria 'n' Germany
Contact:

Tue Mar 05, 2019 9:43 am

Hellow,

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>
                        </form>

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

Code: Select all

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

// Handle AJAX Request made by the Media Modal
if(d.querySelector("#upload-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
        jQuery.ajax({
            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();
                if(!xhr.upload){
                    return xhr;
                }
                xhr.upload.addEventListener("progress", function(event){
                    if(event.lengthComputable){
                        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:

Image

Sincerely,
Sam.
If you really like my projects and want to support me, I would be extremely grateful for a coffee! (Thanks to all Supporters):

Image
User avatar
bayerberg
Master Bludit
Posts: 109
Joined: Wed Jun 07, 2017 1:05 pm
Contact:

Thu Aug 01, 2019 5:24 pm

was about to attempt to write this myself. cheers for sharing, will steal this for social media/ favicon plugin ;)
bludit plugins and themes - makeitblu | I do things, check them out on behance | check out startups undiluted - london's startup ecosystem
Post Reply