directory tree file download link.

[eluser]murphybr[/eluser]
I have been experimenting with the directory helper and built a browser application. Now the only problem is I cant figure out how to do anything with the files. Can someone tell me how to either turn files into clickable objects so I can save them to the local computer or how to add the ability to save, open and delete from the javascript code?

currently when i click on a file it goes to a link specified as index.php/undefined.

Code:

[removed]
$(document).ready(function() {
    var files = <?php print_r(json_encode($folders)); ?>;
    var file_tree = build_file_tree(files);
    file_tree.appendTo('#files');
    
    function build_file_tree(files) {
        
        var tree = $('<ul>');
        
        for (x in files) {
            
            if (typeof files[x] == "object") {
                var span = $('<span>').html(x).appendTo(
                    $('<li>').appendTo(tree).addClass('folder')
                );
                var subtree = build_file_tree(files[x]).hide();
                span.after(subtree);
                span.click(function() {
                    $(this).parent().find('ul:first').toggle();
                });
                
            } else {
                $('<li>').html(files[x]).appendTo(tree).addClass('file').click(function(){
                    [removed]=$(this).find("a").attr("href");return false;})
                
            }
            
        }
        
        return tree;
        
    }
});    
[removed]

[eluser]SPeed_FANat1c[/eluser]
"Can someone tell me how to either turn files into clickable objects so I can save them to the local computer or how to add the ability to save, open and delete from the javascript code?"

Edit directly local file is not posible as I understood from this:

http://stackoverflow.com/questions/58226...te-to-file

But you can edit the files on php server using AJAX. With ajax you download file content and put it to some textarea field. User edits it and then clicks save, so again with ajax you send the content to the server, server then stores it to a file. Then with some link you let the user download the file.

To set the links for the file you can use

$('#youFileLinkID').attr('href', 'YourURLToFIle');

I am not sure what this

Code:

click(function(){
                    [removed]=$(this).find("a").attr("href");return false;})

was for? Gets the url to some varialble or what? And what for?

[eluser]murphybr[/eluser]
My main goal is having a viewable directory tree and for each file shown, when a user clicks the file it will bring a popup to ask them to download the file. This javascript function fulfills the directory tree part.

Now i need to figure a way to build the pathway for each file (since directory map does not pass that through). so it will allow downloading of each file. would AJAX do that?

[eluser]SPeed_FANat1c[/eluser]
can you show the html code which is generated by this function? it would be easier, from code javascirpt alone its dificult to now how everything looks.

[eluser]murphybr[/eluser]
$_Session['profilepath'] is set by the user's AD account and tells the code where to look specifically to create a directory map.
$folders is that specific path built from my controller

snippets form the controller pointing to the view:

Code:

<?php

class Upload extends CI_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
        $this->load->helper(array('ad', 'file'));
        $this->load->helper(array('download', 'directory'));
        LdapConnect($this->config->item($this->config->item('environment')));
        
        $this->userFolder = $_SESSION['userName'];
        $DS = DIRECTORY_SEPARATOR;
        
        $this->user_upload_path = '.'.$DS.'uploads'.$DS.$this->userFolder.$DS;
        
        $this->user_download_path = $DS . "var".$DS . "www".$DS . "html";
        $this->download_dir_path = $this->user_download_path.base_url().$_SESSION['profilepath'].$DS;
        $this->dataTree['folders'] = directory_map($this->download_dir_path);
    }
    function downloadPage()
    {
      $data['title'] = "Title";
      $data['heading'] = "Header";
      $data['subHeading'] = "Download Page";

      $this->header(2,$data);
      $this->load->view('downloadPage',$this->dataTree);
      $this->footer();        
    }

my view

Code:

<?PHP if ($_SESSION['profilepath'] != NULL) { ?>
<div id="files">

</div>
[removed]
$(document).ready(function() {
    var files = &lt;?php print_r(json_encode($folders)); ?&gt;;
    var file_tree = build_file_tree(files);
    file_tree.appendTo('#files');
    
    function build_file_tree(files) {
        
        var tree = $('<ul>');
        
        for (x in files) {
            
            if (typeof files[x] == "object") {
                var span = $('<span>').html(x).appendTo(
                    $('<li>').appendTo(tree).addClass('folder')
                );
                var subtree = build_file_tree(files[x]).hide();
                span.after(subtree);
                span.click(function() {
                    $(this).parent().find('ul:first').toggle();
                });
                
            } else {
                $('<li>').html(files[x]).appendTo(tree).addClass('file').click(function(){
                    [removed]=$(this).find("a").attr("href");return false;})
                
            }
            
        }
        
        return tree;
        
    }
});    
[removed]
&lt;/head&gt;
&lt;body&gt;
    &lt;?PHP
    } else {
    $error = "Your user path is not set.";
      print_r($error);
    }
    ?&gt;
&lt;/body&gt;

[eluser]SPeed_FANat1c[/eluser]
I meant show the html code which is generated when javascript is executed.

You can do that lets say in google chrome right click on the tree and click inspect element and then there should be some html inside

<div id="files">

</div>

so copy and show it here.

Also show what is instead of word [removed]

Code:

[removed]=$(this).find("a").attr("href");return false;})

this word appears when we use <s+cript> tags but here this does not make sence, probably there is something else converted.


As I see you didn't write this javascript code yourself and I assume you know little about it, because I think there is not much to change, just make it print links in the appropirate places, so I can recomend

jQuery for begginers

then you will understand yourself and will be able to make small changes.

[eluser]murphybr[/eluser]
my apologies.
instead of [removed] it should show:

Code:

if (typeof files[x] == "object") {
                var span = $('<span>').html(x).appendTo(
                    $('<li>').appendTo(tree).addClass('folder')
                );
                var subtree = build_file_tree(files[x]).hide();
                span.after(subtree);
                span.click(function() {
                    $(this).parent().find('ul:first').toggle();
                });
                
            } else {
                $('<li>').html(files[x]).appendTo(tree).addClass('file').click(function(){
                    window.l ocation=$(this).find("a").attr("href");return false;})
                
            }

inside the html for div is as follows

Code:

<div id="files">
<ul>
<li class="folder"><span>murphybr1</span>
<ul style="display: block;">
<li class="file">upload_test.txt</li></ul></li>
<li class="folder"><span>murphybr2</span>
<ul style="display: none;">
<li class="file">File Transfer.docx</li>
<li class="file">upload_test.txt</li>
<li class="file">FT_Validation_Matrix.xls</li>
<li class="file">job_interview_suc.pdf</li></ul></li></ul>
</div>

[eluser]SPeed_FANat1c[/eluser]
you see, there is no link inside the <li class = "file"></li>

But there is filename.

Code:

$('<li>').html(files[x]).appendTo(tree).addClass('file').click(function(){
                    href = $(this).val(); //this should get only the filename

                    //now we need to get somehow all folders, so we would know the path
                    //and concat it to the filename
                    window.l ocation=href;
                    return false;})

So I don't know exactly how do can we get all folders, but it is done somehow using

http://api.jquery.com/parents/

That needs experimenting. Or maybe someone else will do that quicker than me. Or of course you could try as well.

[eluser]murphybr[/eluser]
when i print out this line

Code:

var files = <?php print_r(json_encode($folders)); ?>;

i have the print_r coming out as the following array

{"dept1":{"user1":["upload_test.txt"],"user2":["upload_test.txt"]},"dept2":{"user3":["upload_test.txt"],"user4":["File Transfer.docx","upload_test.txt","Validation_Matrix.xls","job_interview_suc.pdf"]}};

now to figure out how to pull the folder names and user names to create the string.

note:

I altered the click(function()( at the bottom of the code to as follows:

Code:

$('<li>').html(files[x]).addClass('file').click(function(){
    e.preventDefault();
    window.loc ation.href = "&lt;?php echo base_url().$_SESSION['profilepath']?&gt;" ;return false;}).appendTo(tree);

this makes a hidden href for each file pointing to the path, i just need to add those folders and the value to it. any ideas(i have no experience with the parent function.)

[eluser]SPeed_FANat1c[/eluser]
when user clicks on file, this fucntion shows the one parent folder name. Now we need to get parent of the parent (and so on) folder name. So you should somehow use loop or recursion to do this.

Code:

$('.file').click(function() {
    par = $(this).parents().children('span').html();
    
    alert(par);
    console.log(par);
    
});

Maybe this little piece will put you on some right direction.