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) { if (xhr.upload) {
// file select // file select
fileselect.attr("multiple", 'multiple');
fileselect.on("change", UploadFileSelectHandler); fileselect.on("change", UploadFileSelectHandler);
// file submit // file submit
@ -64,27 +65,30 @@ function DragDropUploadFileSelectHandler(e) {
// file selection via input // file selection via input
function UploadFileSelectHandler(e) { function UploadFileSelectHandler(e) {
// fetch FileList object // fetch FileList object
if(e.type === 'click') { if(e.target.id === 'upload-submit') {
e.preventDefault(); e.preventDefault();
var files = e.data[0].files; var files = e.data[0].files;
} }
else { if(e.target.id === 'files-upload') {
$('.new-upload').remove();
var files = e.target.files; var files = e.target.files;
} }
$('.new-upload').remove();
// process all File objects // process all File objects
for (var i = 0, f; f = files[i]; i++) { for (var i = 0, f; f = files[i]; i++) {
prepareHtml(f, i); if(e.target.id === 'files-upload')
if(e.type === 'click') prepareHtml(f, i);
if(e.target.id === 'upload-submit') {
UploadFile(f, i); UploadFile(f, i);
}
} }
} }
function prepareHtml(f, i) { function prepareHtml(f, i) {
$("#cloud-index tr:nth-child(2)").after( $("#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><i class=\"fa ' + getIconFromType(f.type) + '\" title=\"' + f.type + '\"></i></td>' +
'<td>' + f.name + '</td>' + '<td>' + f.name + '</td>' +
'<td id=\"upload-progress-' + i + '\"></td><td></td><td></td><td></td><td></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 // POST to the entire cloud path
xhr.open('post', window.location.pathname, true); 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); data.append('file', file);
xhr.send(data); xhr.send(data);

View File

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