Uploading Images to a plugin
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
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
-
- Master Bludit
- Posts: 106
- Joined: Tue Dec 25, 2018 8:07 pm
- Been thanked: 3 times
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:
The JavaScript Code:
The Result:
Sincerely,
Sam.
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>
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
});
});
}
Sincerely,
Sam.