AJAX - Picture upload with only an icon (Facebook style)

Question

I'm trying to create a picture upload system where you just press the icon > Windows Explorer opens up > Select a picture > After selecting, the upload process starts immediately and automatically. However, every time I'm trying to run that code via AJAX, I'm getting undefined index notice which can be viewed with "Developer Tools" tab. There's nothing wrong with my PHP, so I'm not posting it in here since the upload process is working just fine without AJAX.

I'm thinking that there might be something wrong with my AJAX code. Any help would be much appreciated! :)

Here's my markup [HTML]

<div class="event-head" id="hover-card">
        <i class="fa fa-camera" id="upload-event-cover" title="Update your cover"></i>
        <?php $attributes = ['id' => 'update-cover'];?>
        <?php echo form_open_multipart('events/upload_cover_photo', $attributes);?>
            <input type='hidden' name='event_id' value='<?=$event['event_id']?>'/>
            <input type="file" id="event-cover-file" name="userfile" />
        <?php echo form_close();?>
</div>

Here's the AJAX part [JS]

<script type="text/javascript"> 
// Animate the camera icon everytime user hover's over #hover-card
$("#hover-card").on({
    mouseenter: function() {
        $("#upload-event-cover").animate({
            opacity: 1
        }, {
            duration: 100,
        });
    },
    mouseleave: function() {
        $("#upload-event-cover").animate({
            opacity: 0
        }, {
            duration: 100,
        });
    }
});

// Open "Browse" 
$('#upload-event-cover').click(function(e) {
       e.preventDefault();
       $('#event-cover-file').click();
});


  $("#event-cover-file").change(function(e) {

    if($(this).val() != "") {

       // Send it via AJAX
        $("form#update-cover").submit(function(e) {
                var from = $(this);

                $.ajax({
                    url: from.attr('action'),
                    type: from.attr('method'),
                    data: { userfile: $('#event-cover-file').val() },
                    beforeSend: function() {
                        from.find(".comment_submit").hide();
                        from.find("#spinner_comment").show();
                    },
                    success: function(data) {
                        if(data.st == 1) {
                            $("#event-cover-file").html(data);
                        }

                    }, complete: function() {
                        from.find("#spinner_comment").hide();
                        from.find(".comment_submit").show();
                    }
                });
                e.preventDefault();
            });
        }
    });    
</script>

What version of PHP are you using? Remove the `,` after `duration: 100`. — StackSlave, Sep 26 '14 at 00:22
I'm using PHP version 5.5 and I've build my app with CodeIgniter framework — Cooper, Sep 26 '14 at 00:23
Check this. [http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — gilchris, Sep 26 '14 at 01:14
You do know that you are not setting your submit Event until a change occurs first, right? — StackSlave, Sep 26 '14 at 01:18
Is the return `data` from your PHP page JSON? If so, how would `$("#event-cover-file").html(data);` work? — StackSlave, Sep 26 '14 at 01:20

StackSlave · Answer 1 · 2014-09-26T01:33:29.333

Start by changing:

$("#hover-card").on({
    mouseenter: function() {
        $("#upload-event-cover").animate({
        opacity: 1
        }, {
            duration: 100,
        });
    },
    mouseleave: function() {
        $("#upload-event-cover").animate({
            opacity: 0
        }, {
            duration: 100,
    });
  }
});

to

var uec = $('#upload-event-cover')
$('#hover-card').mouseenter(function(){
  uec.fadeIn(100);
}).mouseleave(function(){
  uec.fadeOut(100);
});

url: from.attr('action') means you are submitting JavaScript data to the same PHP page that built your HTML. You would need the proper conditions in PHP on the page for this to work. I recommend that you use a completely different url to submit your AJAX to. You usually send AJAX to a url that processes JSON data (force with dataType:'JSON') as $_GET['json_object_property'] or $_POST['json_object_property']. sucess:function(){} fires after your PHP page (url is set to) usually encodes a PHP Associative Array as JSON like: echo json_encode($assoc_array).

Yeah, did that. The problem is that the AJAX can't get the name of the file I want to upload. Without AJAX it's working, so there's something odd going on with my code. — Cooper, Sep 26 '14 at 01:01
I checked my Developer Tools tab and the path for the userfile is following: userfile:C:\fakepath\IMG_0418.JPG.863x516_q85_box-0,225,5184,3324_crop_detail.jpg — Cooper, Sep 26 '14 at 01:03
Is the `events` folder in the current folder your PHP page, that generates HTML, is in? — StackSlave, Sep 26 '14 at 01:10

AJAX - Picture upload with only an icon (Facebook style)

1 Answers1