Have spent all day (again) trying to do simple stuff in CI ...

[eluser]Sven Delle[/eluser]
I'm trying to post a form with a file upload via jquery ajax. Simple, right?

Absolutely not. I've read hundreds of posts, downloaded all kinds of solutions. Watched video tutorials, and even created a simple CI project with only one controller and one view to make this work. And it did ... until I mixed in jQuery AJAX. What a nightmare.

I'm simply trying to post a form like this:

Code:

[removed]
$(function(){
$('#upload_media').submit(function(event) {
  event.preventDefault();

  if($('#userfile').val() === '')
  {
   alert('Please, select a file to upload ...');
   return false;
  }
  
//  var form_data = $('#upload_media').serialize();
  var form_data = { 'userfile' : $('#userfile').val(), 'upload' : $('#submit').val() };
  alert(form_data.upload);

  $.ajax({
   url: '<?php echo base_url(); ?>upload/upload_media',
   type: "POST",
   data: form_data,
   success: function(msg)
    {
     alert('Success: ' + msg);
    }
   });
  // prevents from refreshing the page
  return false;
});
});
[removed]

I can trace back a success, but my files NEVER gets uploaded to the server ... in this case localhost.

I have taken the code from the documentation and made a small project containing only that - without jquery. I've ported to code to my project, but no matter what I try the files never reach the server.

Can anyone tell me what I'm missing. Spent the whole god damn day on this. It's 14 F O U R T E E N hours!!!!

[eluser]redredraider[/eluser]
When I debug things like this I always use wireshark so I can see what's really going over the wire. On the php side you need to add some debugging to output what the ajax request is actually sending. There are lots of things that could be causing this and you need to eliminate them one at a time.

Right off the bat...
Is the file actually reaching the server?
Is it being moved on the server correctly if you're doing that?
Do you have the correct encoding on the form you're submitting?

[eluser]Stefan Hueg[/eluser]
Whereas a single post would have only taken 10 minutes...

I'm sorry to say that File Uploads via Ajax are not possible...BUT there are several jQuery Plugins that circumvent this limitation.

Like this:
http://blueimp.github.com/jQuery-File-Upload/

Next time: Drop a question here, although you could have googled for it

(Basically it creates an iFrame where the Upload is done or uses HTML5 if supported)

[eluser]redredraider[/eluser]
Haha you're right stefan. Try uploadify.

[eluser]Stefan Hueg[/eluser]
[quote author="redredraider" date="1335829894"]Haha you're right stefan. Try uploadify.[/quote]

As long as he doesn't want multiple uploads at once, a jQuery plugin is just fine. uploadify uses Flash, the jQuery plugin I mentioned just plain HTML and JavaScript.

[eluser]CroNiX[/eluser]
That's an expensive 14 hour lesson.

[eluser]Stefan Hueg[/eluser]
[quote author="CroNiX" date="1335830115"]That's an expensive 14 hour lesson.[/quote]

I don't want to be in his skin now :x

[eluser]Sven Delle[/eluser]
And how long would you guess that would take to implement. I always worry when I open zip and see 39 files ... sigh!

I'm doing a three step process of creating a media record in a database.

Now, since it's not possible to nest forms (man had I designed html and css we wouldn't even need javascript) I went for at multi step process.

Step 1:
Upload a media file (image, video or sound). Depending on the type ...

Step 2 (if image):
Create a thumbnail (post image back to client and add js cropping)

Step 2 (if video): prompt for thumbnail file.

Step 3:
Fill in the rest of the form with mandatory information

Save the damn thing.

And that simple process is causing me this much trouble. God I hate web tech ...

[eluser]Sven Delle[/eluser]
This helped somewhat:

How to use the blueimp plugin with CodeIgniter

but still have to figure out how to use it from within a div using jquery.

Been at this for 16 straight hours ... going to bed.

[eluser]vinayjoshi03[/eluser]
He he he

Please use Iframes or use uplodify plugin.

We are not getting temp name so its not possible to uplaod file using ajax.
you must have to use iframe