PHP - uploading images and $_files variable

Question

I'm creating a blog with a WYSIWYG editor for blog posts as well as an image upload for each blog post.

So my inputs look something like this, I'm including a file here called wysiwyg.php but this isn't really necessary for this question. (It basically has buttons for bold italics etc, and it's just included like this because I use it in other areas of my site)

<form action="blog_create.php" method="POST">
    <input id="title" name="title" type="text" placeholder="Title">
    <input id="post_image" name="post_image" type="file">
    <textarea id="description" name="description" placeholder="Description"></textarea>
    <textarea id="meta" name="meta" placeholder="Meta"></textarea>

    <div id="wysiwyg_controls"><?php include_once("wysiwyg.php"); ?></div>
    <iframe name="richTextField" id="wysiwyg" class="news_article"></iframe>

    <input type="hidden" id="text_content" name="text_content" value="">
    <input type="hidden" id="save_as_type" name="save_as_type" value="">

    <button id="blog_draft_submit" name="blog_draft_submit" onclick="return false">Save as Draft</button>
    <button id="blog_publish_submit" name="blog_publish_submit" onclick="return false">Publish</button>
</form>

I then use JavaScript/jQuery to submit the form like so to actually get the content of the iframe:

$("#blog_draft_submit").on("click", function(){
    $text_content = richTextField.document.getElementsByTagName('body')[0].innerHTML;
    $("#text_content").attr("value", $text_content);
    $("#save_as_type").attr("value", "draft");
    this.form.submit();
});
$("#blog_publish_submit").on("click", function(){
    $text_content = richTextField.document.getElementsByTagName('body')[0].innerHTML;
    $("#text_content").attr("value", $text_content);
    $("#save_as_type").attr("value", "publish");
    this.form.submit();
});

However, this doesn't seem to be working properly for the file input or being able to access anything that should be in the Global $_FILES variable.

If I do var_dump($_FILES); I get:

array (size=0)
  empty

But when I do var_dump($_POST); I get:

array (size=8)
  'title' => string '' (length=0)
  'post_image' => string 'image.png' (length=23)
  'description' => string '' (length=0)
  'meta' => string '' (length=0)
  'wysiwyg_image' => string '' (length=0)
  'text_content' => string '' (length=0)
  'save_as_type' => string 'draft' (length=5)

Is this because of the way I am submitting via JS or am I actually doing something wrong? Will I need to create a seperate parsing file and do an XMLHttpRequest and something AJAX-like?

Edit

AJAX is not needed.

Do a google search on AJAX file uploads. It's NOT as simple as you'd think: https://stackoverflow.com/q/23980733/870729 — random_user_name, Jul 16 '18 at 16:09
Possible duplicate of [jQuery AJAX file upload PHP](https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php) — random_user_name, Jul 16 '18 at 16:09
@marcogomes Thanks a million that was exactly what I was looking for much simpler than trying to send it all via ajax. Put it down as an answer and I'll accept it ;) — Paddy Hallihan, Jul 16 '18 at 16:29

score 2 · Accepted Answer · answered Jul 17 '18 at 09:02

Try adding enctype="multipart/form-data" in <form> tag

Some rules to follow when we use are working with $_FILE:

Check if the file_uploads = On on the php.ini file

Make sure that the form uses method="post"

The form also needs the following attribute: enctype="multipart/form-data"(It specifies which content-type to use when submitting the form)

Without the requirements above, the file upload will not work.

PHP - uploading images and $_files variable

Edit

1 Answers1