jquery blueimp fileupload issue - uploaded file being overwritten by subsequent upload?
Hi Team,
I have been working on a fileupload solution which should allow up to 3 files to be uploaded per button. I use an imported javascript file, and a bootstrap modal window to manage the user interface. It has taken me quite a long time to sort it all out, and just as I near the finishing post I am hit with this issue i.e. it looks like each uploaded file overwrites the previous one in my "uploads" folder. I have a feeling its something simple but I cannot deduce what combination of options, or indeed perhaps my JS skills are not good enough, so I would love to fix this please with a little help?
The JS script as follows:
// file_upload.js
var current_rot = 0;
var rotindex = [0,8,3,6];
var rotations = ['rotate(0deg)','','','rotate(180deg)','','','rotate(270deg)','','rotate(90deg)'];
var myImage = new Object();
var myCount = new Object();
var image_type;
var btn_pressed;
function rotit()
{
var ctx = $('#files').find('canvas');
if(ctx[0].clientWidth > ctx[0].clientHeight) {
$('#files').height(ctx[0].clientWidth);
var shift = ((ctx[0].clientWidth - ctx[0].clientHeight) / 2) + 'px';
$('#files > canvas').css({"transform": 'translateY('+shift+') '+rotations[current_rot]});
} else {
$('#files > canvas').css({"transform": rotations[current_rot]});
}
$('#choose_upload').modal('handleUpdate');
}
$(function(){
$('#post_image_choice').hide();
// these actions are for choose ikulpic view
if($('#thenextstep').length) {
$('#thenextstep').hide();
}
$('#choose_upload').on('hidden.bs.modal',function(){
if($('#thenextstep').length) {
$('#thenextstep').show();
}
});
$('#chooseimagebackground').on('click', function() {
$('#fileupload').trigger('click');
});
$('.btn-upload').on('click', function() {
btn_pressed = $(this);
image_type = btn_pressed.attr('data-images');
myImage[image_type] = Object.is(myImage[image_type], undefined) ? [] : myImage[image_type];
myCount[image_type+'_upcount'] = Object.is(myCount[image_type+'_upcount'], undefined) ? 0 : myCount[image_type+'_upcount'];
myCount[image_type+'_upallow'] = parseInt(btn_pressed.attr('data-count'));
$('#fu_status').hide();
$('#files').empty();
$('#progress .progress-bar').css({'width':'0%'});
$('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
$('#chooseimagebackground').show();
$('#choose_upload').modal('show');
});
$('#fileupload').fileupload(
// initial options
{
//server-side upload handler
url: '/api/image_upload/upload',
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
formData: {},
maxFileSize: 999000,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
singleFileUploads: false,
imageMaxWidth: 800,
imageMaxHeight: 800,
//orient_image: true,
//auto_orient: false,
previewOrientation: current_rot,
imageOrientation: current_rot,
previewMaxWidth: 300,
previewMaxHeight: 300,
previewCrop: false
}).on('fileuploadadd', function (e, data) // Add
{
$('#chooseimagebackground').hide();
// show the rotate and upload buttons
$('#post_image_choice').show();
$('#uploadButton').data(data);
}).on('fileuploadprocessalways', function (e, data) // Progress Always
{
var index = data.index,
file = data.files[index];
if (file.preview)
{
$('#files').append(file.preview);
}
if (file.error)
{
$('#files').append($('<span class="text-danger"/>').text(file.error));
}
}).on('fileuploadprogressall', function (e, data) // Progress All
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) // DONE
{
$.each(data.result.files, function (index, file)
{
if (file.url)
{
myCount[image_type+'_upcount']++;
var html = '<p class="text-success bigger">Uploaded('+myCount[image_type+'_upcount'].toString()+') <span class="glyphicon glyphicon-ok"></span></p>';
if(myCount[image_type+'_upcount'] < myCount[image_type+'_upallow']) {
html += '<button type="button" id="nextButton" class="btn btn-info">Next</button>';
} else {
btn_pressed.prop('disabled',true);
}
$('#fu_status').html(html).show();
$('#'+image_type+'_uc').val(myCount[image_type+'_upcount']);
var tmp = {};
tmp.url = file.url;
tmp.exif_rot = current_rot;
myImage[image_type].push(tmp);
$('#filedata').val( JSON.stringify(myImage) );
}
else if (file.error)
{
var error = $('<p class="text-danger bigger"/>').text(file.error);
$('#files')
.append(error)
.append('<button id="cancelButton1" type="button" class="btn btn-info">Reset</button>');
}
}); // end of each
}).on('fileuploadfail', function (e, data) // Fail
{
$.each(data.files, function (index)
{
var error = $('<span class="text-danger bigger"/>').text('File upload failed.');
$('#files').append(error);
});
}).prop('disabled', !$.support.fileInput) // Disabled
.parent()
.addClass($.support.fileInput ? undefined : 'disabled');
$('#cancelButton, #cancelButton1').on('click', function(){
$('#post_image_choice').hide();
$('#files').empty().css('height','auto');
$('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
$('#chooseimagebackground').show();
current_rot = 0;
});
$(document).on('click', '#nextButton', function(){
$('#post_image_choice').hide();
$('#fu_status').hide();
$('#files').empty().css('height','auto');
$('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
$('#progress .progress-bar').css({'width':'0%'});
$('#chooseimagebackground').show();
current_rot = 0;
});
$(document).on('click', '#uploadButton', function(){
var ul_btn = $(this),
data = ul_btn.data();
ul_btn
.off('click')
.text('Abort')
.on('click', function () {
data.abort();
});
data.submit().always(function(){
$('#post_image_choice').hide();
});
});
$('#rotanti').on('click', function(){
var t = rotindex.indexOf( current_rot )-1;
if(t == -1) t = 3;
current_rot = rotindex[t];
rotit();
});
$('#rotclock').on('click', function(){
var t = rotindex.indexOf( current_rot )+1;
if(t == rotindex.length) t = 0;
current_rot = rotindex[t];
rotit();
});
});
var current_rot = 0;
var rotindex = [0,8,3,6];
var rotations = ['rotate(0deg)','','','rotate(180deg)','','','rotate(270deg)','','rotate(90deg)'];
var myImage = new Object();
var myCount = new Object();
var image_type;
var btn_pressed;
function rotit()
{
var ctx = $('#files').find('canvas');
if(ctx[0].clientWidth > ctx[0].clientHeight) {
$('#files').height(ctx[0].clientWidth);
var shift = ((ctx[0].clientWidth - ctx[0].clientHeight) / 2) + 'px';
$('#files > canvas').css({"transform": 'translateY('+shift+') '+rotations[current_rot]});
} else {
$('#files > canvas').css({"transform": rotations[current_rot]});
}
$('#choose_upload').modal('handleUpdate');
}
$(function(){
$('#post_image_choice').hide();
// these actions are for choose ikulpic view
if($('#thenextstep').length) {
$('#thenextstep').hide();
}
$('#choose_upload').on('hidden.bs.modal',function(){
if($('#thenextstep').length) {
$('#thenextstep').show();
}
});
$('#chooseimagebackground').on('click', function() {
$('#fileupload').trigger('click');
});
$('.btn-upload').on('click', function() {
btn_pressed = $(this);
image_type = btn_pressed.attr('data-images');
myImage[image_type] = Object.is(myImage[image_type], undefined) ? [] : myImage[image_type];
myCount[image_type+'_upcount'] = Object.is(myCount[image_type+'_upcount'], undefined) ? 0 : myCount[image_type+'_upcount'];
myCount[image_type+'_upallow'] = parseInt(btn_pressed.attr('data-count'));
$('#fu_status').hide();
$('#files').empty();
$('#progress .progress-bar').css({'width':'0%'});
$('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
$('#chooseimagebackground').show();
$('#choose_upload').modal('show');
});
$('#fileupload').fileupload(
// initial options
{
//server-side upload handler
url: '/api/image_upload/upload',
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
formData: {},
maxFileSize: 999000,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
singleFileUploads: false,
imageMaxWidth: 800,
imageMaxHeight: 800,
//orient_image: true,
//auto_orient: false,
previewOrientation: current_rot,
imageOrientation: current_rot,
previewMaxWidth: 300,
previewMaxHeight: 300,
previewCrop: false
}).on('fileuploadadd', function (e, data) // Add
{
$('#chooseimagebackground').hide();
// show the rotate and upload buttons
$('#post_image_choice').show();
$('#uploadButton').data(data);
}).on('fileuploadprocessalways', function (e, data) // Progress Always
{
var index = data.index,
file = data.files[index];
if (file.preview)
{
$('#files').append(file.preview);
}
if (file.error)
{
$('#files').append($('<span class="text-danger"/>').text(file.error));
}
}).on('fileuploadprogressall', function (e, data) // Progress All
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) // DONE
{
$.each(data.result.files, function (index, file)
{
if (file.url)
{
myCount[image_type+'_upcount']++;
var html = '<p class="text-success bigger">Uploaded('+myCount[image_type+'_upcount'].toString()+') <span class="glyphicon glyphicon-ok"></span></p>';
if(myCount[image_type+'_upcount'] < myCount[image_type+'_upallow']) {
html += '<button type="button" id="nextButton" class="btn btn-info">Next</button>';
} else {
btn_pressed.prop('disabled',true);
}
$('#fu_status').html(html).show();
$('#'+image_type+'_uc').val(myCount[image_type+'_upcount']);
var tmp = {};
tmp.url = file.url;
tmp.exif_rot = current_rot;
myImage[image_type].push(tmp);
$('#filedata').val( JSON.stringify(myImage) );
}
else if (file.error)
{
var error = $('<p class="text-danger bigger"/>').text(file.error);
$('#files')
.append(error)
.append('<button id="cancelButton1" type="button" class="btn btn-info">Reset</button>');
}
}); // end of each
}).on('fileuploadfail', function (e, data) // Fail
{
$.each(data.files, function (index)
{
var error = $('<span class="text-danger bigger"/>').text('File upload failed.');
$('#files').append(error);
});
}).prop('disabled', !$.support.fileInput) // Disabled
.parent()
.addClass($.support.fileInput ? undefined : 'disabled');
$('#cancelButton, #cancelButton1').on('click', function(){
$('#post_image_choice').hide();
$('#files').empty().css('height','auto');
$('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
$('#chooseimagebackground').show();
current_rot = 0;
});
$(document).on('click', '#nextButton', function(){
$('#post_image_choice').hide();
$('#fu_status').hide();
$('#files').empty().css('height','auto');
$('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
$('#progress .progress-bar').css({'width':'0%'});
$('#chooseimagebackground').show();
current_rot = 0;
});
$(document).on('click', '#uploadButton', function(){
var ul_btn = $(this),
data = ul_btn.data();
ul_btn
.off('click')
.text('Abort')
.on('click', function () {
data.abort();
});
data.submit().always(function(){
$('#post_image_choice').hide();
});
});
$('#rotanti').on('click', function(){
var t = rotindex.indexOf( current_rot )-1;
if(t == -1) t = 3;
current_rot = rotindex[t];
rotit();
});
$('#rotclock').on('click', function(){
var t = rotindex.indexOf( current_rot )+1;
if(t == rotindex.length) t = 0;
current_rot = rotindex[t];
rotit();
});
});
The BS modal view (we are using codeigniter):
<link rel="stylesheet" href="<?= JQ_FU_CSS_URL ?>" integrity="<?= JQ_FU_CSS_HASH ?>" crossorigin="anonymous" />
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="<?= LIA_JS_URL ?>" integrity="<?= LIA_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<?= C2B_JS_URL ?>" integrity="<?= C2B_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="<?= JQ_UI_JS_URL ?>" integrity="<?= JQ_UI_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?= JQ_IT_JS_URL ?>" integrity="<?= JQ_IT_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The basic File Upload plugin -->
<script src="<?= JQ_FU_JS_URL ?>" integrity="<?= JQ_FU_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The File Upload processing plugin -->
<script src="<?= JQ_FUP_JS_URL ?>" integrity="<?= JQ_FUP_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="<?= JQ_FUI_JS_URL ?>" integrity="<?= JQ_FUI_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- upload file modal -->
<div class="modal fade" id="choose_upload" style="overflow-y:hidden" tabindex="-1" role="dialog" aria-labelledby="ModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="ikulpic-interact-modal-title">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="col-md-2">
<img src="/res/pngs/ikulpic-modal/ikulpic-logo-modal.png" alt="ikulpic" height="35" width="85">
</div>
<div class="col-md-9">
<p class="fu-header">File Upload <small style="font-size:60%">Click below to choose the file you want to upload</small></p>
</div>
</div>
<div class="modal-body">
<div id="content_area" class="cko-ikulpic-image" style="width:300px">
<div id="chooseimagebackground" style="background-image:url(/res/pngs/checkout-steps/choose-your-image-icon.png); background-size: 100%; height:200px; background-repeat:no-repeat;background-position:center" title="Max file size: 100MB File types: .png,.jpeg,.jpg"></div>
<div id="files" class="files" style="text-align:center; vertical-align:middle;height:auto;"></div>
<div id="fu_status" style="display:none;text-align:center"></div>
<input id="fileupload" type="file" name="files[]" style="display:none"/>
</div>
<div id="post_image_choice">
<div class="row row-centered">
<div id="progress" class="progress text-center" style="margin: 10px 100px;height: 10px">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="btn-group" class="btn-group" role="group" aria-label="Upload button group">
<button type="button" id="cancelButton" class="btn btn-danger">Cancel</button>
<button type="button" id="rotanti" class="btn btn-info">Rotate Left</button>
<button type="button" id="rotclock" class="btn btn-info">Rotate Right</button>
<button type="button" id="uploadButton" class="btn btn-warning">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end upload file modal -->
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="<?= LIA_JS_URL ?>" integrity="<?= LIA_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<?= C2B_JS_URL ?>" integrity="<?= C2B_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="<?= JQ_UI_JS_URL ?>" integrity="<?= JQ_UI_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?= JQ_IT_JS_URL ?>" integrity="<?= JQ_IT_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The basic File Upload plugin -->
<script src="<?= JQ_FU_JS_URL ?>" integrity="<?= JQ_FU_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The File Upload processing plugin -->
<script src="<?= JQ_FUP_JS_URL ?>" integrity="<?= JQ_FUP_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="<?= JQ_FUI_JS_URL ?>" integrity="<?= JQ_FUI_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- upload file modal -->
<div class="modal fade" id="choose_upload" style="overflow-y:hidden" tabindex="-1" role="dialog" aria-labelledby="ModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="ikulpic-interact-modal-title">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="col-md-2">
<img src="/res/pngs/ikulpic-modal/ikulpic-logo-modal.png" alt="ikulpic" height="35" width="85">
</div>
<div class="col-md-9">
<p class="fu-header">File Upload <small style="font-size:60%">Click below to choose the file you want to upload</small></p>
</div>
</div>
<div class="modal-body">
<div id="content_area" class="cko-ikulpic-image" style="width:300px">
<div id="chooseimagebackground" style="background-image:url(/res/pngs/checkout-steps/choose-your-image-icon.png); background-size: 100%; height:200px; background-repeat:no-repeat;background-position:center" title="Max file size: 100MB File types: .png,.jpeg,.jpg"></div>
<div id="files" class="files" style="text-align:center; vertical-align:middle;height:auto;"></div>
<div id="fu_status" style="display:none;text-align:center"></div>
<input id="fileupload" type="file" name="files[]" style="display:none"/>
</div>
<div id="post_image_choice">
<div class="row row-centered">
<div id="progress" class="progress text-center" style="margin: 10px 100px;height: 10px">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="btn-group" class="btn-group" role="group" aria-label="Upload button group">
<button type="button" id="cancelButton" class="btn btn-danger">Cancel</button>
<button type="button" id="rotanti" class="btn btn-info">Rotate Left</button>
<button type="button" id="rotclock" class="btn btn-info">Rotate Right</button>
<button type="button" id="uploadButton" class="btn btn-warning">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end upload file modal -->
The Uploadhandler options are as follows:
uploadhander options after union: Array
(
[upload_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
[upload_url] => https://dev.ikulpic.com/images/uploads/h8HUV2EbhhHd/
[image_versions] => Array
(
[] => Array
(
[upload_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
[urlfolder] => https://dev.ikulpic.com/images/uploads/h8HUV2EbhhHd/
[saveto_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
[do_rotate] =>
[new_rotate_dir] =>
[auto_orient] =>
)
)
[script_url] => https://dev.myserver.com/index.php
[input_stream] => php://input
[user_dirs] =>
[mkdir_mode] => 493
[param_name] => files
[delete_type] => DELETE
[access_control_allow_origin] => *
[access_control_allow_credentials] =>
[access_control_allow_methods] => Array
(
[0] => OPTIONS
[1] => HEAD
[2] => GET
[3] => POST
[4] => PUT
[5] => PATCH
[6] => DELETE
)
[access_control_allow_headers] => Array
(
[0] => Content-Type
[1] => Content-Range
[2] => Content-Disposition
)
[redirect_allow_target] => /^https\:\/\/dev\.myserver\.com\//
[download_via_php] =>
[readfile_chunk_size] => 10485760
[inline_file_types] => /\.(gif|jpe?g|png)$/i
[accept_file_types] => /\.(jpe?g|png)$/i
[max_file_size] =>
[min_file_size] => 1
[max_number_of_files] => 6
[image_file_types] => /\.(gif|jpe?g|png)$/i
[correct_image_extensions] =>
[max_width] =>
[max_height] =>
[min_width] => 1
[min_height] => 1
[discard_aborted_uploads] => 1
[image_library] => 1
[convert_bin] => convert
[identify_bin] => identify
[print_response] => 1
)
(
[upload_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
[upload_url] => https://dev.ikulpic.com/images/uploads/h8HUV2EbhhHd/
[image_versions] => Array
(
[] => Array
(
[upload_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
[urlfolder] => https://dev.ikulpic.com/images/uploads/h8HUV2EbhhHd/
[saveto_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
[do_rotate] =>
[new_rotate_dir] =>
[auto_orient] =>
)
)
[script_url] => https://dev.myserver.com/index.php
[input_stream] => php://input
[user_dirs] =>
[mkdir_mode] => 493
[param_name] => files
[delete_type] => DELETE
[access_control_allow_origin] => *
[access_control_allow_credentials] =>
[access_control_allow_methods] => Array
(
[0] => OPTIONS
[1] => HEAD
[2] => GET
[3] => POST
[4] => PUT
[5] => PATCH
[6] => DELETE
)
[access_control_allow_headers] => Array
(
[0] => Content-Type
[1] => Content-Range
[2] => Content-Disposition
)
[redirect_allow_target] => /^https\:\/\/dev\.myserver\.com\//
[download_via_php] =>
[readfile_chunk_size] => 10485760
[inline_file_types] => /\.(gif|jpe?g|png)$/i
[accept_file_types] => /\.(jpe?g|png)$/i
[max_file_size] =>
[min_file_size] => 1
[max_number_of_files] => 6
[image_file_types] => /\.(gif|jpe?g|png)$/i
[correct_image_extensions] =>
[max_width] =>
[max_height] =>
[min_width] => 1
[min_height] => 1
[discard_aborted_uploads] => 1
[image_library] => 1
[convert_bin] => convert
[identify_bin] => identify
[print_response] => 1
)
The default max_number_of_files was 'null', and I tried changing it to 6 without any effect!