reusing the original form did not work so well via xhr upload - let us create a new form for this action. revert progressbar- only works nice in firefox

This commit is contained in:
Mario Vavti 2016-07-28 15:35:45 +02:00
parent e65949f594
commit fc105cf141
2 changed files with 13 additions and 9 deletions

View File

@ -22,6 +22,7 @@ function UploadInit() {
if (xhr.upload) {
// file select
fileselect.attr("multiple", 'multiple');
fileselect.on("change", UploadFileSelectHandler);
// file submit
@ -64,27 +65,30 @@ function DragDropUploadFileSelectHandler(e) {
// file selection via input
function UploadFileSelectHandler(e) {
// fetch FileList object
if(e.type === 'click') {
if(e.target.id === 'upload-submit') {
e.preventDefault();
var files = e.data[0].files;
}
else {
if(e.target.id === 'files-upload') {
$('.new-upload').remove();
var files = e.target.files;
}
$('.new-upload').remove();
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
if(e.target.id === 'files-upload')
prepareHtml(f, i);
if(e.type === 'click')
if(e.target.id === 'upload-submit') {
UploadFile(f, i);
}
}
}
function prepareHtml(f, i) {
$("#cloud-index tr:nth-child(2)").after(
'<tr id=\"new-upload-' + i + '\" class=\"new-upload\" style=\"background: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==\') repeat-y; background-size: 3px;\">' +
'<tr class=\"new-upload\">' +
'<td><i class=\"fa ' + getIconFromType(f.type) + '\" title=\"' + f.type + '\"></i></td>' +
'<td>' + f.name + '</td>' +
'<td id=\"upload-progress-' + i + '\"></td><td></td><td></td><td></td><td></td>' +
@ -182,8 +186,8 @@ function UploadFile(file, idx) {
// POST to the entire cloud path
xhr.open('post', window.location.pathname, true);
var data = new FormData(document.getElementById("ajax-upload-files"));
var data = new FormData();
data.append('sabreAction', 'put');
data.append('file', file);
xhr.send(data);

View File

@ -13,7 +13,7 @@
<input type="hidden" name="sabreAction" value="put">
<label for="files-upload">{{$upload_header}}</label>
<div class="clear"></div>
<input class="form-group pull-left" id="files-upload" type="file" name="file" multiple>
<input class="form-group pull-left" id="files-upload" type="file" name="file">
<button id="upload-submit" class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
</form>
<div class="clear"></div>