I am using some code I found online that will give me a fancy file upload button that also allows the user to drag and drop a file into the drop area. It works just fine in jsfiddle but when I add the code to my Wordpress files through Cpanel, it doesn't work. I did nothing but copy and paste the files over.
Errors:
Uncaught TypeError: undefined is not a function
points to this: $(window).load(function(){
Uncaught TypeError: $container.imagesLoaded is not a function points to 5 things:
$container.imagesLoaded(function(){- m.Callbacks.j @ jquery.js?ver=1.11.3:2
- m.Callbacks.k.fireWith @ jquery.js?ver=1.11.3:2
- m.extend.ready @ jquery.js?ver=1.11.3:2
- J @ jquery.js?ver=1.11.3:2
functions.php
<?php
function my_scripts() {
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '3.3.5', true );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js');
}
add_action('wp_enqueue_scripts', 'my_scripts');
function my_styles() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_styles');
?>
custom-js.js
$(window).load(function(){
$('#drop').click(function(){
console.log('click');
$('#fileBox').trigger('click');
});
//Remove item
$('.fileCont span').click(function(){
$(this).remove();
});
});
if (window.FileReader) {
var drop;
addEventHandler(window, 'load', function () {
var status = document.getElementById('status');
drop = document.getElementById('drop');
var list = document.getElementById('list');
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
// Tells the browser that we *can* drop on this target
addEventHandler(drop, 'dragover', cancel);
addEventHandler(drop, 'dragenter', cancel);
addEventHandler(drop, 'drop', function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) {
e.preventDefault();
} // stops the browser from redirecting off to the image.
var dt = e.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
//attach event handlers here...
reader.readAsDataURL(file);
addEventHandler(reader, 'loadend', function (e, file) {
var bin = this.result;
var fileCont = document.createElement('div');
fileCont.className = "fileCont";
list.appendChild(fileCont);
var fileNumber = list.getElementsByTagName('img').length + 1;
status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';
var img = document.createElement("img");
img.file = file;
img.src = bin;
img.className = "thumb";
fileCont.appendChild(img);
var newFile = document.createElement('div');
newFile.innerHTML = file.name;
newFile.className = "fileName";
fileCont.appendChild(newFile);
var fileSize = document.createElement('div');
fileSize.className = "fileSize";
fileSize.innerHTML = Math.round(file.size/1024) + ' KB';
fileCont.appendChild(fileSize);
var progress = document.createElement('div');
progress.className = "progress";
progress.innerHTML = '<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar progress-bar-success" role="progressbar" style="width: 100%"></div>';
fileCont.appendChild(progress);
var remove = document.createElement('div');
remove.className = "remove";
remove.innerHTML = '<span class="glyphicon glyphicon-remove"></div>';
list.appendChild(remove);
}.bindToEventHandler(file));
}
return false;
});
Function.prototype.bindToEventHandler = function bindToEventHandler() {
var handler = this;
var boundParameters = Array.prototype.slice.call(arguments);
//create closure
return function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
boundParameters.unshift(e);
handler.apply(this, boundParameters);
}
};
});
} else {
document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}
function addEventHandler(obj, evt, handler) {
if (obj.addEventListener) {
// W3C method
obj.addEventListener(evt, handler, false);
} else if (obj.attachEvent) {
// IE method.
obj.attachEvent('on' + evt, handler);
} else {
// Old school method.
obj['on' + evt] = handler;
}
}
//Not plugged yet
var bar = $('.progress-bar');
$(function(){
$(bar).each(function(){
bar_width = $(this).attr('aria-valuenow');
$(this).width(bar_width + '%');
});
});
Child theme's style.css
body{
color:#666;
}
#drop {
border: 1px dashed #ccc;
width: 450px;
min-height: 35px;
margin: 10px auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display:box;
cursor:pointer;
}
#status {
width:450px;
margin: 0 auto;
}
#list {
width:450px;
margin: 0 auto;
}
.msg-drop{
padding:10px;
}
.thumb {
width:33px;
height:33px;
float:left;
margin:3.5px;
border: 1px solid #ccc;
}
.fileCont{
display:block;
width:425px;
height:40px;
margin:2.5px;
float:left;
}
.fileSize{
text-align:right;
margin:2.5px;
font-size:12px;
padding-right: 10px;
}
.fileName{
float:left;
padding:2.5px;
font-weight:700;
text-transform: capitalize;
}
.remove{
width:20px;
height:40px;
padding-top: 13px;
font-size: 18px;
float:left;
}
.progress {
height: 6px!important;
width: 380px;
margin-top: 5px;
}
.progress-bar {
-webkit-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}
#fileBox{
display:none;
}
