Welcome Guest, Not a member yet? Register   Sign In
AJAX Response
#1

[eluser]NateL[/eluser]
I'm working on a small feature which uploads images using AJAX.

User clicks browse, chooses image, and the image begins uploading.

Inside my controller, I have a class called upload with a do_upload function, which on a typical upload, will forward you to an "upload success page".

Since i'm using AJAX, I have used the console.log feature - console.log(response);

and that logs my success page. I can actually see this data that gets logged:

Code:
<h3>File uploaded!</h3>
        <ul>
            &lt;?php foreach($upload_data as $item => $value):?&gt;
                <li>&lt;?=$item;?&gt;: &lt;?=$value;?&gt;</li>
            &lt;? endforeach;?&gt;
        </ul>

It shows me all of the file information - but I need to grab the file name that was just uploaded and display it (rather than logging it)

Sorry if this is a tad confusing Smile
#2

[eluser]TheFuzzy0ne[/eluser]
Just edit you're foreach loop to generate a JSON object, and send that back to the JavaScript.

Sorry if I'm missing the point here, but I would have thought that should do it.
#3

[eluser]NateL[/eluser]
Thanks, that makes sense..

*googles JSON object*... Smile
#4

[eluser]TheFuzzy0ne[/eluser]
Here's an example of a JSON object in JavaScript.

Code:
var dog = {
    name: 'Bob',
    breed: 'German Sheppard',
    age: 4
}

To access the data, you'd do something like this:
Code:
var msg = "My dog is called" + dog.name;
console.log(msg);

This is basically an object in JavaScript. Objects can also hold functions, but you shouldn't need to pass any functions back. When you get the data from the server, you'll need to eval() it to turn it into a usable object.

Here's some more information on JSON from a fairly well known person on the JavaScript scene. http://www.dustindiaz.com/json-for-the-masses/
#5

[eluser]NateL[/eluser]
Bare with me, this is new grounds for me Smile

Following the example in the CI user guide, my controller processes the image, and then passes the upload data to a view:

$this->load->view('upload_success', $data);

Now, when I upload an image, and then look at my console, it logs my VIEW

console.log(response);

logs this:
Code:
<h3>File uploaded!</h3>
<ul>
   <li>file_name: image00118.jpg</li>
   <li>file_type: image/jpeg</li>
   <li>file_path: /Users/nate/Sites/circms.local/html/uploads/</li>
   <li>full_path: /Users/nate/Sites/circms.local/html/uploads/image00118.jpg</li>
   <li>raw_name: image00118</li>
   <li>orig_name: image001.jpg</li>
   <li>file_ext: .jpg</li>
  <li>file_size: 54.03</li>
  <li>is_image: 1</li>
  <li>image_width: 467</li>
  <li>image_height: 385</li>
  <li>image_type: jpeg</li>
  <li>image_size_str: width="467" height="385"</li>
</ul>

which is the HTML that the view generates when the data is passed to it.

So... From the controller, How do I pass the file_name value back into the AJAX that sent it?

Thanks for your help and patience.. hope that makes some sort of sense Smile
#6

[eluser]TheFuzzy0ne[/eluser]
I don't understand. If you load that view, the view should be sent back via the XmlHTTPRequest... I'm assuming you'd then display that to the user, so where's the need for the file name?
#7

[eluser]NateL[/eluser]
Following the tutorial, yes - I would display that view which shows the uploaded file information.

I'm trying to take it a step further and not load a view - but display the image that has just uploaded right below the "upload" button.
#8

[eluser]TheFuzzy0ne[/eluser]
You could always us a JSON object:

Code:
obj = {
    filename: 'somefile.jpg',
    html : '<h3>File uploaded!</h3><ul><li>file_name: image00118.jpg</li><li>file_type: image/jpeg</li><li>file_path: Users/nate/Sites/circms.local/html/uploads/</li><li>full_path: Users/nate/Sites/circms.local/html/uploads/image00118.jpg</li><li>raw_name: image00118</li><li>orig_name: image001.jpg</li><li>file_ext: .jpg</li><li>file_size: 54.03</li><li>is_image: 1</li><li>image_width: 467</li><li>image_height: 385</li><li>image_type: jpeg</li><li>image_size_str: width="467" height="385"</li></ul>'
}
Your message will be in obj.html, and the filename would be in obj.filename.
#9

[eluser]NateL[/eluser]
I don't understand why I would need to create an additional HTML file.. ?

I'm not trying to return the results into an additional view or forward the user to another view to show the success page

from my view with the form, I just need the file name to be appended below the "upload" button

Code:
onComplete: function(file, response){
  //display uploaded image
}

The original code appends the file name to a list item:

Code:
$('<li></li>').appendTo('#example1 .files').text(file);

This works - however - if the image gets re-named during the PHP processing, it will not show the proper file name. it will show that I've uploaded image001.jpg rather than image002.jpg (php increments by 1 if the file exists)
#10

[eluser]NateL[/eluser]
I guess it would make more sense if I told you I'm using jQuery and a plugin called Ajax Upload (first example)

My code: upload_view.php
Code:
&lt; script type= "text/javascript"&gt;/*&lt;![CDATA[*/
$(document).ready(function(){

    /* example 1 */
    var button = $('#button1'), interval;
    new Ajax_upload(button,{
        action: '/admin/upload/do_upload',
        name: 'userfile',
        onSubmit : function(file, ext){
            // change button text, when user selects file            
            button.text('Uploading');
            
            // If you want to allow uploading only 1 file at time,
            // you can disable upload button
            this.disable();
        
            
            // Uploding -> Uploading. -> Uploading...
            interval = window.setInterval(function(){
                var text = button.text();
                if (text.length < 13){
                    button.text(text + '.');                    
                } else {
                    button.text('Please Wait');                
                }
            }, 200);
        },
        onComplete: function(file, response){
            //alert(response);
            button.text('Upload');
                        
            window.clearInterval(interval);
                        
            // enable upload button
            this.enable();

            console.log(response);
            
            // add file to the list
/*             $('<li></li>').appendTo('#example1 .files').text(file);                         */
        }
    });
});/*]]>*/[removed]

The action sends it to my upload controller, which process it:
upload.php
Code:
function do_upload()
    {
        // Image configuration
        $config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['overwrite'] = FALSE;
        $config['max_size'] = 2048;
        
        $this->load->library('upload', $config);
        
    
        if(!$this->upload->do_upload())
        {
            $error = array('error' => $this->upload->display_errors());
            $this->load->view('upload_form', $error);
        }
        else
        {
            
        
            $image = $this->upload->data();
            $data['image'] = "./uploads/".$image['file_name'];
            
            $config['image_library'] = 'gd2';
            $config['source_image'] = $data['image'];
            $config['create_thumb'] = TRUE;
            $config['maintain_ratio'] = TRUE;
            //$config['master_dim'] = width;
            $config['width'] = 75;
            $config['new_image'] = "./uploads/".$image['file_name'];
            
            $this->load->library('image_lib', $config);
            
            $this->image_lib->resize();
            
            $data = array('upload_data' => $this->upload->data());
                        
            $this->load->view('upload_success', $data);
            

        }
    }

So - in my upload controller, instead of
$this->load->view('upload_success', $data);

I just want to return the file_name to the script that sent it so I can display the image below the "Upload" button.

Hope this helps to clear somethings up Smile

Thanks for the assistance!




Theme © iAndrew 2016 - Forum software by © MyBB