0

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.

4
  • Do a google search on AJAX file uploads. It's NOT as simple as you'd think: stackoverflow.com/q/23980733/870729 Commented Jul 16, 2018 at 16:09
  • Possible duplicate of jQuery AJAX file upload PHP Commented Jul 16, 2018 at 16:09
  • 3
    try adding enctype="multipart/form-data" in <form> tag Commented Jul 16, 2018 at 16:17
  • @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 ;) Commented Jul 16, 2018 at 16:29

1 Answer 1

2

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

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

  1. Check if the file_uploads = On on the php.ini file
  2. Make sure that the form uses method="post"
  3. 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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.