I came across jQuery-file-upload in a google search. I found it neat and exactly what I need but I'm having a small issue getting just a couple features the way I want it to work using the basic plugin. I figure the basic-plugin would be the best to shape and mold into exactly what I wanted. This is what I have so far.
app.js
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
url: '../php/',
add: function (e, data) {
//$.each(data.files, function(index, file) {
data.context = $('<li class=\"list-group-item\">')
//.html(file.name+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-remove\"></span></button>")
// see http://stackoverflow.com/questions/26234279/blueimp-jquery-upload-multiple-files-doesnt-work for the reason for the line below
.html(data.files[0].name+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-remove\"></span></button>")
.appendTo(".list-group");
/*$('.btn-danger').on('click', function() {
console.log('Drop '+file.name+' \n');
});*/
//});
$('.btn-danger').on('click', function() {
console.log("Removing all objects...\n");
data.context.remove();
});
},
submit: function (e, data) {
$('#start-upload').on('click', function() {
//$('#start-upload').addClass('#disabledInput');
console.log("This is the start upload button!");
});
},
done: function (e, data) {
/*$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('.files').find('#panel-body');
});*/
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
},
drop: function (e, data) {
//$.each(data.files, function (index, file) {
//$('#btn-danger').on('click', function() {
console.log('Dropped file: '+ file.name +'\n');
//});
//});
}
}).on('fileuploadsubmit', function(e, data) {
data.formData = data.context.find(':input').seralizeArray();
});
});
../php/index.php
<?php
/*
* jQuery File Upload Plugin PHP Example 5.14
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
$options = array(
'delete_type' => 'POST',
'db_host' => 'localhost',
'db_user' => 'root',
'db_pass' => '',
'db_name' => 'example',
'db_table' => 'files'
);
error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
class CustomUploadHandler extends UploadHandler {
protected function initialize() {
$this->db = new mysqli(
$this->options['db_host'],
$this->options['db_user'],
$this->options['db_pass'],
$this->options['db_name']
);
parent::initialize();
$this->db->close();
}
protected function handle_form_data($file, $index) {
$file->title = @$_REQUEST['title'][$index];
$file->description = @$_REQUEST['description'][$index];
}
protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
$index = null, $content_range = null) {
$file = parent::handle_file_upload(
$uploaded_file, $name, $size, $type, $error, $index, $content_range
);
if (empty($file->error)) {
$sql = 'INSERT INTO `'.$this->options['db_table']
.'` (`name`, `size`, `type`, `title`, `description`)'
.' VALUES (?, ?, ?, ?, ?)';
$query = $this->db->prepare($sql);
$query->bind_param(
'sisss',
$file->name,
$file->size,
$file->type,
$file->title,
$file->description
);
$query->execute();
$file->id = $this->db->insert_id;
}
return $file;
}
protected function set_additional_file_properties($file) {
parent::set_additional_file_properties($file);
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$sql = 'SELECT `id`, `type`, `title`, `description` FROM `'
.$this->options['db_table'].'` WHERE `name`=?';
$query = $this->db->prepare($sql);
$query->bind_param('s', $file->name);
$query->execute();
$query->bind_result(
$id,
$type,
$title,
$description
);
while ($query->fetch()) {
$file->id = $id;
$file->type = $type;
$file->title = $title;
$file->description = $description;
}
}
}
public function delete($print_response = true) {
$response = parent::delete(false);
foreach ($response as $name => $deleted) {
if ($deleted) {
$sql = 'DELETE FROM `'
.$this->options['db_table'].'` WHERE `name`=?';
$query = $this->db->prepare($sql);
$query->bind_param('s', $name);
$query->execute();
}
}
return $this->generate_response($response, $print_response);
}
}
$upload_handler = new CustomUploadHandler($options);
?>
In my html I also have a Select Files... button, and a Start Upload button. The 'Select Files' button works perfectly. I can add files without a problem. Multiple at once, or one at a time.
The two features I need help with the most are linking a "remove" button to each <li> element that belongs to each file that has been selected, and then simply implementing the Start Upload button that will upload the files. I will use the example php to processing the files.
How can I go about implementing the "remove button" of each <li> button?
What I've done so far:
- Add the "remove" button to each list element
- Implement a way for the user to click the remove button and the filename for the clicked
lielement is logged to console. However, this log is repeated x many times where x is the position of thelielement relative to the top.
How can I implement the "start upload" button to begin the upload?
I'm not absolutely sure how the php file is tied into the jQuery so that it executes when the submit button is pressed. I know the .on action is attached to the .fileupload but if someone could help explain how everything comes together it'd be very appreciated.
Thank you for your time!
