Getting search result's id

Question

I am building a site, on which you can upload posts, just like facebook.
Everything works great except that at the moment you upload a post and after you uploaded it you can upload images to that post.

I would like to be able to upload the images to the post and then upload the post with the pictures. Here is my attempt:

The database image table

+-------------------------------------------------+
  | image_id | user_id | image_name |  post_id  | 
  |    1     |    1    |    bla     |     2     | 
+-------------------------------------------------+

The view

<script>
$(function () {
    $("#imageUpload").submit(function (e) { 
        e.preventDefault();
        var formData = new FormData($('#imageUpload')[0]);
            $.ajax({
                url: 'post/create',  //Trying to call the controller
                type: 'post',
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            });
          return false;
        });
    });
</script>

<form action="<?php echo Config::get('URL');?>post/create" method="post" id="imageUpload" enctype="multipart/form-data">
    <input type="text" name="post_text" placeholder="Post something" />
    <input type="file" name="images[]" multiple required />
    <input type="submit" value='post' autocomplete="off" />
</form>

The controller

public function create()
{   
    PostModel::createPost(strip_tags($_POST['post_text']));
    PostModel::uploadPostImages($_POST['post_id']);
}

I leave out the model, as the functions there work fine.

How can I get the post id to use it in the image table before posting the post?

I would be beyond thankful for any kind of help!!

UPDATE

<script>
    $("#imageUpload").submit(function (e) { 
             var fd = new FormData();
             var imagefile= document.getElementById('imagefile');
             var files = imagefile.files;

            for (var i = 0; i < files.length; i++) 
            {
              var file = files[i];                
              fd.append('imagefile[]', file, file.name);
            }
            fd.append("post_text", document.getElementById('post_text').value);
            fd.append("post_id", document.getElementById('post_id').value);      

        $.ajax({
            url: 'post/create',
            type: 'POST',
            data: fd,
            cache: false,
            contentType: false,
            processData: false
        });
      return false;
    });
});
</script>
<form action="<?php echo Config::get('URL');?>post/create" method="post" id="imageUpload" enctype="multipart/form-data">
    <input type="text" name="post_text" id="post_text" placeholder="Post something" />
    <input type="file" name="images[]" id="imagefile" multiple required />
    <input type="hidden" name="post_id" id="post_id" value="post_id" />
    <input type="submit" value='post' autocomplete="off" />
 </form>

You can get the ID from the post after saving it e.g. via `$mysqli->insert_id` (depending on what you use). This could be a return value of your `createPost` function. So information about your model would be good ... — empiric, Mar 24 '15 at 12:28
Thank you! That is what I am doing at the moment. But I am trying to find a way to upload the image to the post before the post is uploaded. — Schwesi, Mar 24 '15 at 12:30
if your post is auto incremented than you can try http://stackoverflow.com/questions/6761403/how-to-get-the-next-auto-increment-id-in-mysql — Shravan Sharma, Mar 24 '15 at 12:31
The easiest way for you would probably be to insert both queries, capture the ID, then UPDATE the queries you just inserted. There are other ways, but I'd try that to start out. — Joe Swindell, Mar 24 '15 at 12:33

Vishal Wadhawan · Answer 1 · 2015-03-24T13:02:18.573

You cannot directly upload image via jquery ajax. Moreover you are allowing multiple files to be uploaded via ajax. Here is your code. It will let you upload multiple images with the input text value too.

    $("#imageUpload").submit(function (e) { 
             var fd = new FormData();
             var imagefile= document.getElementById('imagefile');
             var files = imagefile.files;

            for (var i = 0; i < files.length; i++) 
            {
              var file = files[i];                
              fd.append('imagefile[]', file, file.name);
            }
            fd.append("post_text", document.getElementById('post_text').value);
           fd.append("post_id", document.getElementById('post_id').value);      

        $.ajax({
            url: 'post/create',  //Trying to call the controller
            type: 'POST',
            data: fd,
            cache: false,
            contentType: false,
            processData: false
        });
      return false;
    });
});

Your updated html

 <form action="<?php echo Config::get('URL');?>post/create" method="post" id="imageUpload" enctype="multipart/form-data">
<input type="text" name="post_text" id="post_text" placeholder="Post something" />
<input type="file" name="images[]" id="imagefile" multiple required />
<input type="hidden" name="post_id" id="post_id" value="<?=$_GET['post_id']?>" />
<input type="submit" value='post' autocomplete="off" />

Thank you so so much for your answer! What works now that I can upload the image and the post with one form. However, the post_id in the image table is still NULL. — Schwesi, Mar 24 '15 at 12:47
It still does not work. But thank you so much anyway! Now, I know which direction to research in! — Schwesi, Mar 24 '15 at 13:11
in this line just set the value here to the post_id and it will work — Vishal Wadhawan, Mar 24 '15 at 13:17
I added an update to my question, showing off the code in the view. I am sure I am doing something stupid wrong. At the moment I am getting a 0 for post_id in the image table instead of NULL, before. Thank you so much for all your effort!! — Schwesi, Mar 24 '15 at 13:26

Getting search result's id

1 Answers1