Continued work on new upload system

This commit is contained in:
xevidos 2019-11-14 23:16:07 -05:00
parent 02f7b84041
commit 2e6367e459
3 changed files with 195 additions and 131 deletions

View File

@ -174,6 +174,16 @@ switch( $_GET['action'] ) {
</div>
<?php
break;
case 'upload':
?>
<div>
<div id="modal-loading" style="display: inline-block;vertical-align: middle;min-width:25px;"></div>
<div style="display: inline-block;vertical-align: middle;">Loading Uploader ...</div>
</div>
<?php
break;
}
?></form>

View File

@ -1,58 +0,0 @@
<?php
/*
* Copyright (c) Codiad & Kent Safranski (codiad.com), distributed
* as-is and without warranty under the MIT License. See
* [root]/license.txt for more. This information must remain intact.
*/
require_once('../../common.php');
require_once('class.filemanager.php');
//////////////////////////////////////////////////////////////////
// Verify Session or Key
//////////////////////////////////////////////////////////////////
checkSession();
?>
<label><?php i18n("Upload Files"); ?></label>
<div id="upload-drop-zone">
<span id="upload-wrapper">
<input id="fileupload" type="file" name="upload[]" data-url="components/filemanager/controller.php?action=upload&path=<?php echo($_GET['path']); ?>" multiple>
<span id="upload-clicker"><?php i18n("Drag Files or Click Here to Upload"); ?></span>
</span>
<div id="upload-progress"><div class="bar"></div></div>
<div id="upload-complete"><?php i18n("Complete!"); ?></div>
</div>
<button onclick="codiad.modal.unload();"><?php i18n("Close Uploader"); ?></button>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
dropZone: '#upload-drop-zone',
progressall: function( e, data ) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#upload-progress .bar').css(
'width',
progress + '%'
);
if(progress>98){ $('#upload-complete').fadeIn(200); }
},
done: function(e, data){
$.each(data.result, function (index, file){
var path = '<?php echo($_GET['path']); ?>';
codiad.filemanager.createObject(path, path + "/" + file.name,'file');
/* Notify listeners. */
amplify.publish('filemanager.onUpload', {file: file, path: path});
});
setTimeout(function(){
$('#upload-progress .bar').animate({'width':0},700);
$('#upload-complete').fadeOut(200);
},1000);
}
});
});
</script>

View File

@ -18,7 +18,6 @@
clipboard: '',
controller: 'components/filemanager/controller.php',
dialog: 'components/filemanager/dialog.php',
dialogUpload: 'components/filemanager/dialog_upload.php',
preview: null,
refresh_interval: null,
@ -85,7 +84,7 @@
// Load uploader
$.loadScript( "components/filemanager/upload_scripts/jquery.ui.widget.js", true );
$.loadScript( "components/filemanager/upload_scripts/jquery.iframe-transport.js", true );
$.loadScript( "components/filemanager/upload_scripts/jquery.fileupload.js", true );
$.loadScript( "components/filemanager/upload_scripts/jquery.fileupload_data.js", true );
$( document ).on( 'dragenter', function( e ) {
@ -479,6 +478,26 @@
return r;
},
get_index_list: async function( filters = {}, callbacks = [] ) {
let _this = codiad.filemanager;
let data = [];
let response = await _this.get_indexes( codiad.project.getCurrent() );
response = codiad.jsend.parse( response );
if( response.index ) {
data = response.index;
}
let children = _this.create_indexes( data, null, filters, callbacks );
let div = $( '<div class="file-manager"></div>' );
div.html( children );
return div
},
find_index: function( path, files ) {
let _this = this;
@ -631,7 +650,7 @@
let plus = span.hasClass( 'plus' );
let minus = span.hasClass( 'minus' );
let trigger = ( plus || span.hasClass( 'none' ) || root || ( rescan && minus ) );
_this.trigger_open_close( node.parent(), trigger );
_this.toggle_open_close( node.parent(), trigger );
console.log( trigger );
@ -910,40 +929,44 @@
//$( drag ).removeClass( "hover" );
},
open_selector: async function( type, callback ) {
open_selector: async function( type, callback, limit ) {
let _this = this;
codiad.modal.load(
300,
_this.dialog,
{
action: 'selector',
type: type,
},
async function( container ) {
let _this = codiad.filemanager;
let data = [];
let response = await _this.get_indexes( codiad.project.getCurrent() );
response = codiad.jsend.parse( response );
if( response.index ) {
return new Promise( function( resolve, reject ) {
codiad.modal.load(
300,
_this.dialog,
{
action: 'selector',
type: type,
},
async function( container ) {
data = response.index;
}
let children = _this.create_indexes( data, null, {type: 'directories'}, [] );
let div = $( '<div class="file-manager"></div>' );
div.html( children );
container.html( div );
_this.selector_listeners( container );
console.log( div, children );
},
);
let _this = codiad.filemanager;
let div = await _this.get_index_list( {type: type}, [] );
_this.selector_listeners( div, limit );
container.html( div );
let select = $( '<button class="btn-left">Select</button>' );
let cancel = $( '<button class="btn-right">Cancel</button>' );
container.append( select );
container.append( cancel );
select.on( 'click', function( e ) {
codiad.modal.unload();
resolve( _this.selected );
});
cancel.on( 'click', function( e ) {
codiad.modal.unload();
reject( null );
});
},
);
});
},
//////////////////////////////////////////////////////////////////
@ -1429,7 +1452,7 @@
selected: [],
selector_listeners: function( node ) {
selector_listeners: function( node, limit ) {
let _this = this;
@ -1448,12 +1471,12 @@
let ul = $( '<ul></ul>' );
let children = _this.create_indexes( indexes, ul, {type: 'directories'}, [] );
$( this ).removeClass( 'loading' );
_this.trigger_open_close( $( this ).parent(), null );
_this.toggle_open_close( $( this ).parent(), null );
$( this ).parent().children( 'ul' ).remove();
$( this ).parent().append( ul );
} else {
_this.select_node( $( e.target ) );
_this.toggle_select_node( $( e.target ), limit );
}
})
.on( 'click', 'span', async function( e ) {
@ -1469,10 +1492,10 @@
let ul = $( '<ul></ul>' );
let children = _this.create_indexes( indexes, ul, {type: 'directories'}, [] );
a.removeClass( 'loading' );
_this.trigger_open_close( $( this ).parent(), null );
_this.toggle_open_close( $( this ).parent(), null );
$( this ).parent().children( 'ul' ).remove();
$( this ).parent().append( ul );
})
})
.on( 'dblclick', 'a', async function( e ) {
let _this = codiad.filemanager
@ -1488,42 +1511,59 @@
let ul = $( '<ul></ul>' );
let children = _this.create_indexes( indexes, ul, {type: 'directories'}, [] );
$( this ).removeClass( 'loading' );
_this.trigger_open_close( $( this ).parent(), null );
_this.toggle_open_close( $( this ).parent(), null );
$( this ).parent().children( 'ul' ).remove();
$( this ).parent().append( ul );
} else {
_this.select_node( $( e.target ) );
_this.toggle_select_node( $( e.target ), limit );
}
})
.on( 'selectstart', false );
},
select_node: function( node ) {
toggle_select_node: function( node, limit = 0 ) {
let _this = codiad.filemanager;
let selected = false;
let path = node.attr( 'data-path' );
let i = 1;
for( let i = _this.selected.total;i--; ) {
console.log( node, limit );
for( i = _this.selected.length;i--; ) {
if( _this.selected[i] == path ) {
selected = true;
break;
}
}
if( selected ) {
if( limit > 0 && _this.selected.length >= limit ) {
node.css( 'background', "" );
for( i = _this.selected.length;i--; ) {
$( `[data-path='${_this.selected[i]}']` ).css( "background", "" );
}
_this.selected = [];
_this.selected.push( path );
node.css( "background", "#fff" );
} else {
_this.selected.push( path );
node.css( 'background', "#fff" );
if( selected ) {
node.css( "background", "" );
_this.selected.splice( i, 1 );
} else {
_this.selected.push( path );
node.css( "background", "#fff" );
}
}
},
trigger_open_close: function( node, open ) {
toggle_open_close: function( node, open ) {
let span = node.children( 'span' );
let a = node.children( 'a' );
@ -1564,7 +1604,43 @@
// Upload
//////////////////////////////////////////////////////////////////
upload: {
upload: async function( files, destination = null ) {
let _this = this;
let uploads = [];
if( ! destination ) {
destination = await codiad.filemanager.open_selector( 'directories', null, 1 );
}
if( `${destination}`.charAt( destination.length - 1 ) !== "/" ) {
destination = destination + "/";
}
//form.append( "action", "upload" );
for( let i = files.length;i--; ) {
let entry = files[i].webkitGetAsEntry();
console.log( entry );
if( entry.isFile ) {
console.log( entry );
} else if( entry.isDirectory ) {
_this.upload_read_directory( entry, destination );
}
}
console.log( files );
console.log( destination );
},
upload_data: {
timers: {
off: null,
@ -1572,10 +1648,31 @@
entries: [],
},
upload_choose_destination: async function( path ) {
upload_read_directory: function( item, path ) {
let _this = this;
let _this = codiad.filemanager;
let files = [];
if( item.isFile ) {
// Get file
item.file( function( file ) {
console.log("File:", path + file.name);
});
} else if( item.isDirectory ) {
// Get folder contents
let dirReader = item.createReader();
dirReader.readEntries( function( entries ) {
let total = entries.length;
for( let i = 0;i < total; i++ ) {
_this.upload_read_directory( entries[i], path + item.name + "/" );
}
});
}
},
upload_drop: function( e ) {
@ -1586,24 +1683,8 @@
let items = e.originalEvent.dataTransfer.items;
console.log( e );
for( let i = items.length;i--; ) {
let entry = items[i].webkitGetAsEntry();
console.log( entry );
if( entry.isFile ) {
} else if( entry.isDirectory ) {
}
}
_this.upload_overlay_off();
_this.upload_choose_destination();
_this.upload( items )
},
upload_overlay_off: function() {
@ -1622,16 +1703,47 @@
if( _this.file_.timers.off ) {
clearTimeout( _this.upload.timers.off );
clearTimeout( _this.upload_data.timers.off );
}
_this.upload.timers.off = setTimeout( _this.upload_overlay_off, 1500 );
_this.upload_data.timers.off = setTimeout( _this.upload_overlay_off, 1500 );
},
uploadToNode: function( path ) {
codiad.modal.load( 500, this.dialogUpload, {
path: path
});
let _this = codiad.filemanager;
codiad.modal.load(
500,
this.dialog, {
action: 'upload',
},
async function( container ) {
let text = $( '<p style="max-width: 40vw;"></p>' )
let input = $( '<input type="file" multiple style="display: none;">' );
text.html( `Codiad has a new file uploader!<br>Drag and drop a file or folder anywhere over the screen at any time <br>( you dont even have to have this window open ) and the upload will prompt for a destination.<br>Or<br>You can click here to upload files.` );
input.on( 'change', function( e ) {
console.log( e );
let items = e.target.files;
_this.upload( items, path );
});
text.on( 'click', function( e ) {
input.click();
});
container.html( '' );
container.append( text );
container.append( input );
}
);
},
};
})( this, jQuery );