From d04d57fdb3e955daa37cf650d887d2e06f06e90c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bernd=20Ble=C3=9Fmann?= Date: Fri, 26 Feb 2021 12:45:01 +0100 Subject: [PATCH] Dateimanagement: Upload per Drag/Drop --- css/common.css | 8 +++ js/kivi.File.js | 88 +++++++++++++++++++++++++++++-- js/locale/de.js | 2 + js/locale/en.js | 2 + locale/de/all | 2 + locale/en/all | 2 + templates/webpages/file/list.html | 22 ++++++-- 7 files changed, 118 insertions(+), 8 deletions(-) diff --git a/css/common.css b/css/common.css index fc3bca5f3..c8ade1fbe 100644 --- a/css/common.css +++ b/css/common.css @@ -213,3 +213,11 @@ div.cke_textarea_inline { div.cke_textarea_inline:focus { outline: 0; } + +span.upload_drop_zone { + padding: 4px; + border: 2px; + border-color: darkgray lightgray lightgray; + border-style: solid; + background-color: whitesmoke; +} diff --git a/js/kivi.File.js b/js/kivi.File.js index c14c65f2b..327ef5211 100644 --- a/js/kivi.File.js +++ b/js/kivi.File.js @@ -1,4 +1,5 @@ namespace('kivi.File', function(ns) { + ns.list_div_id = undefined; ns.rename = function(id,type,file_type,checkbox_class,is_global) { var $dlg = $('#rename_dialog_'+file_type); @@ -77,6 +78,8 @@ namespace('kivi.File', function(ns) { } ns.upload = function(id,type,filetype,upload_title,gl) { + $('#upload_status_dialog').remove(); + kivi.popup_dialog({ url: 'controller.pl', data: { action: 'File/ajax_upload', file_type: filetype, @@ -99,10 +102,30 @@ namespace('kivi.File', function(ns) { $('#upload_selected_button').prop('disabled',$('#upload_files').val() === ''); } + ns.upload_status_dialog = function() { + $('#files_upload').remove(); + $('#upload_status_dialog').remove(); + + var html = '

'; + html = html + '

'; + html = html + '

'; + $(html).hide().appendTo('#' + ns.list_div_id); + + kivi.popup_dialog({id: 'upload_status_dialog', + dialog: {title: kivi.t8('Upload Status'), + height: 200, + width: 650 }}); + }; + ns.upload_selected_files = function(id,type,filetype,maxsize,is_global) { var myform = document.getElementById("upload_form"); - var filesize = 0; var myfiles = document.getElementById("upload_files").files; + + ns.upload_files(id, type, filetype, maxsize,is_global, myfiles, myform); + } + + ns.upload_files = function(id, type, filetype, maxsize, is_global, myfiles, myform) { + var filesize = 0; for ( i=0; i < myfiles.length; i++ ) { var fname =''; try { @@ -125,16 +148,27 @@ namespace('kivi.File', function(ns) { return; } - myform.action ="controller.pl?action=File/ajax_files_uploaded&json=1&object_type="+ - type+'&object_id='+id+'&file_type='+filetype+'&is_global='+is_global; + var fd = new FormData(myform); + if (!myform) { + $(myfiles).each(function(idx, elt) { + fd.append('uploadfiles[+]', elt); + }); + } + fd.append('action', 'File/ajax_files_uploaded'); + fd.append('json', 1); + fd.append('object_type', type); + fd.append('object_id', id); + fd.append('file_type', filetype); + fd.append('is_global', is_global); + var oReq = new XMLHttpRequest(); oReq.onload = ns.attSuccess; oReq.upload.onprogress = ns.attProgress; oReq.upload.onerror = ns.attFailed; oReq.upload.onabort = ns.attCanceled; - oReq.open("post",myform.action, true); + oReq.open("post", 'controller.pl', true); $("#upload_result").html(kivi.t8("start upload")); - oReq.send(new FormData(myform)); + oReq.send(fd); } ns.attProgress = function(oEvent) { @@ -155,6 +189,7 @@ namespace('kivi.File', function(ns) { } ns.attSuccess = function() { + $('#upload_status_dialog').dialog('close'); $('#files_upload').dialog('close'); kivi.eval_json_result(jQuery.parseJSON(this.response)); } @@ -265,4 +300,47 @@ namespace('kivi.File', function(ns) { $.download("controller.pl", data); return false; } + + ns.init = function() { + // Preventing page from redirecting + $("#" + ns.list_div_id).on("dragover", function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + + $("#" + ns.list_div_id).on("drop", function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + + // Drag enter + $('.upload_drop_zone').on('dragenter', function (e) { + e.stopPropagation(); + e.preventDefault(); + }); + + // Drag over + $('.upload_drop_zone').on('dragover', function (e) { + e.stopPropagation(); + e.preventDefault(); + }); + + // Drop + $('.upload_drop_zone').on('drop', function (e) { + e.stopPropagation(); + e.preventDefault(); + + ns.upload_status_dialog(); + + var object_type = $(e.target).data('object-type'); + var object_id = $(e.target).data('object-id'); + var file_type = $(e.target).data('file-type'); + var is_global = $(e.target).data('is-global'); + var maxsize = $(e.target).data('maxsize'); + var files = e.originalEvent.dataTransfer.files; + ns.upload_files(object_id, object_type, file_type, maxsize, is_global, files); + }); + + }; + }); diff --git a/js/locale/de.js b/js/locale/de.js index d6b20b6a8..9b0153dbd 100644 --- a/js/locale/de.js +++ b/js/locale/de.js @@ -137,6 +137,7 @@ namespace("kivi").setupLocale({ "Transaction description":"Vorgangsbezeichnung", "Update":"Erneuern", "Update quotation/order":"Auftrag/Angebot aktualisieren", +"Upload Status":"Upload-Status", "Vendor details":"Lieferantendetails", "Vendor missing!":"Lieferant fehlt!", "Version actions":"Aktionen für Versionen", @@ -146,6 +147,7 @@ namespace("kivi").setupLocale({ "Yes":"Ja", "You have changed the currency or exchange rate. Please check prices.":"Die Währung oder der Wechselkurs hat sich geändert. Bitte überprüfen Sie die Preise.", "You have entered or selected the following shipping address for this customer:":"Sie haben die folgende Lieferadresse eingegeben oder ausgewählt:", +"close":"schließen", "filename has not uploadable characters ":"Bitte Dateinamen ändern. Er hat für den Upload nicht verwendbare Sonderzeichen ", "filesize too big: ":"Datei zu groß: ", "flat-rate position":"Pauschalposition", diff --git a/js/locale/en.js b/js/locale/en.js index 66e22fcec..a089e68a1 100644 --- a/js/locale/en.js +++ b/js/locale/en.js @@ -137,6 +137,7 @@ namespace("kivi").setupLocale({ "Transaction description":"", "Update":"", "Update quotation/order":"", +"Upload Status":"", "Vendor details":"", "Vendor missing!":"", "Version actions":"", @@ -146,6 +147,7 @@ namespace("kivi").setupLocale({ "Yes":"", "You have changed the currency or exchange rate. Please check prices.":"", "You have entered or selected the following shipping address for this customer:":"", +"close":"", "filename has not uploadable characters ":"", "filesize too big: ":"", "flat-rate position":"", diff --git a/locale/de/all b/locale/de/all index 1f5a291bd..23c8fccca 100755 --- a/locale/de/all +++ b/locale/de/all @@ -1121,6 +1121,7 @@ $self->{texts} = { 'Draft for this Letter saved!' => 'Briefentwurf gespeichert!', 'Draft saved.' => 'Entwurf gespeichert.', 'Drafts' => 'Entwürfe', + 'Drag and drop files here' => 'Dateien hierher ziehen und fallen lassen', 'Drawing' => 'Zeichnung', 'Due' => 'Fällig', 'Due Date' => 'Fälligkeitsdatum', @@ -3880,6 +3881,7 @@ $self->{texts} = { 'Upload Attachments' => 'Anhänge hochladen', 'Upload Documents' => 'Dokumente hochladen', 'Upload Images' => 'Bilder hochladen', + 'Upload Status' => 'Upload-Status', 'Upload all marked' => 'Markierte aktualisieren', 'Upload file' => 'Datei hochladen', 'Uploaded at' => 'Hochgeladen um', diff --git a/locale/en/all b/locale/en/all index 14b13a596..9c9a857d2 100644 --- a/locale/en/all +++ b/locale/en/all @@ -1121,6 +1121,7 @@ $self->{texts} = { 'Draft for this Letter saved!' => '', 'Draft saved.' => '', 'Drafts' => '', + 'Drag and drop files here' => '', 'Drawing' => '', 'Due' => '', 'Due Date' => '', @@ -3879,6 +3880,7 @@ $self->{texts} = { 'Upload Attachments' => '', 'Upload Documents' => '', 'Upload Images' => '', + 'Upload Status' => '', 'Upload all marked' => '', 'Upload file' => '', 'Uploaded at' => '', diff --git a/templates/webpages/file/list.html b/templates/webpages/file/list.html index 16b4b85e0..dfb59f3a2 100644 --- a/templates/webpages/file/list.html +++ b/templates/webpages/file/list.html @@ -1,4 +1,5 @@ [%- USE LxERP -%][% USE L %] +[% USE T8 %] [%- IF ! json %]
[%- END %] @@ -81,12 +82,20 @@ [%- can_rename = 1 %] [% L.button_tag("kivi.File.rename(" _ object_id _ ",'" _ object_type _ "','" _ file_type _ "','" _ checkname _ "'," _ is_global _ ");", source.rename_title ) %] [%- END %] - [%- IF source.can_upload %] - [% L.button_tag("kivi.File.upload(" _ object_id _ ",'" _ object_type _ "','" _ file_type _ "','" _ source.upload_title _ "'," _ is_global _ ");", source.upload_title ) %] - [%- END %] [%- IF source.can_import %] [% L.button_tag("kivi.File.import(" _ object_id _ ",'" _ object_type _ "','" _ file_type _ "','" _ source.name _ "','" _ source.path _"');", source.import_title ) %] [%- END %] + [%- IF source.can_upload %] + [% L.button_tag("kivi.File.upload(" _ object_id _ ",'" _ object_type _ "','" _ file_type _ "','" _ source.upload_title _ "'," _ is_global _ ");", source.upload_title ) %] + + [% 'Drag and drop files here' | $T8 %] + + [%- END %]
[%- END # FOREACH source %]
@@ -103,3 +112,10 @@ [%- END %] [%- END %] [%- END %] + + -- 2.20.1