File modules/template_engine/components/html/component_upload/upload.js

Last commit: Sat Dec 18 03:47:23 2021 +0100	dankert	New: Every ES6-Module should have a minified version for performance reasons. Bad: The Minifier "Jsqueeze" is unable to minify ES6-modules, so we had to implement a simple JS-Minifier which strips out all comments.


     1 import Api       from "../../../../cms/ui/themes/default/script/openrat/api.js";
     2 import $         from "../../../../cms/ui/themes/default/script/jquery-global.js";
     3 
     4 export default function (element ) {
     5 
     6 
     7 	let form = $(element).find('form');
     8 
     9 	// Dateiupload über Drag and Drop
    10 	let dropzone = $(element).find('div.or-dropzone-upload');
    11 	dropzone.on('dragenter', function (e) 
    12 	{
    13 		e.stopPropagation();
    14 		e.preventDefault();
    15 		$(this).css('border', '1px dotted gray');
    16 	});
    17 	dropzone.on('dragover', function (e) 
    18 	{
    19 		 e.stopPropagation();
    20 		 e.preventDefault();
    21 	});
    22 	dropzone.on('drop', function (e) 
    23 	{
    24 		 $(this).css('border','1px dotted red');
    25 		 e.preventDefault();
    26 		 let files = e.originalEvent.dataTransfer.files;
    27 
    28 		 //We need to send dropped files to Server
    29 		handleFileUpload(form,files);
    30 	});
    31 	
    32 	
    33 	// Dateiupload über File-Input-Button
    34 	$(element).find('input[type=file]').change( function() {
    35 		
    36 		let files = this.files;
    37 
    38 		handleFileUpload(form,files);
    39 	});
    40 
    41 };
    42 
    43 
    44 /**
    45  * Upload of files.
    46  * @param form
    47  * @param files
    48  */
    49 let handleFileUpload = function(form,files)
    50 {
    51 	for (let i = 0; i < files.length; i++)
    52 	{
    53 		let f = files[i];
    54 	    let form_data = new FormData();
    55 	    form_data.append('file'     , f);
    56 	    form_data.append('action'   , $(form).data('action'));
    57 	    form_data.append('subaction', $(form).data('method'));
    58 	    form_data.append('token'    , $(form).find('input[name=token]').val() );
    59 	    form_data.append('id'       , $(form).find('input[name=id]'   ).val() );
    60 	    form_data.append('output'   , 'json' );
    61 
    62 	    let api = new Api();
    63 	    api.sendData( form_data );
    64 	}
    65 }



Download modules/template_engine/components/html/component_upload/upload.js


History
Sat, 18 Dec 2021 03:47:23 +0100	dankert	New: Every ES6-Module should have a minified version for performance reasons. Bad: The Minifier "Jsqueeze" is unable to minify ES6-modules, so we had to implement a simple JS-Minifier which strips out all comments.
Mon, 6 Dec 2021 01:38:41 +0100	dankert	Fixed the file/image upload.
Sat, 27 Nov 2021 04:39:51 +0100	Jan Dankert	Refactoring: Extract the api request form.js into a new api class which returns a promise.
Thu, 1 Apr 2021 01:01:54 +0200	Jan Dankert	New: Some fixes for OQuery, our new selfmade light JQuery replacement. Now the UI is back again.
Sat, 27 Mar 2021 05:14:11 +0100	Jan Dankert	Refactoring: Converting all script files to ES6 modules (work in progress); removed jquery-ui (drag and drop will be replaced by HTML5, sortable by a small lib)
Wed, 17 Mar 2021 00:57:14 +0100	Jan Dankert	Replaced all Jquery ajax methods by the native fetch api.
Tue, 16 Mar 2021 23:52:22 +0100	Jan Dankert	Refactoring: Use ES6 classes.
Tue, 16 Mar 2021 02:38:13 +0100	Jan Dankert	Fix: Using the new FormData object instead of JQuery (JQuery's serialize-functions are not available in the slim version)
Wed, 17 Feb 2021 00:37:45 +0100	Jan Dankert	Refactoring: Extract Notices into a separate js class
Wed, 14 Oct 2020 22:20:22 +0200	Jan Dankert	Refactoring: Renamed component folders, because 'if' is no valid namespace fragment.