Drag and Drop image to select file to upload in standard form

Question

I have a form which asks for users details and also asks for them to upload a picture by dragging an image onto a div. How can I set the upload location of the file upload? I can only find ways that upload the image straight away but I need to process it with the rest of the info in the form?

Below is a simplified version of what I have so far.

<form action="/create" method="post" accept-charset="utf-8" id="create_form" enctype="multipart/form-data">
     <div class="form-group">

        <textarea class="form-control page-title tooltip_target" data-original-title=
        "What is your name"
        data-toggle="tooltip"  placeholder="What is your name" id="title" name="title" type=
        "text" value=""></textarea>

     </div>
     <div id="upload_div"></div>

     <input name="userfile" size="20" type="file">
     <input class="btn btn-primary" id="profile_submit"
        name="profile_submit" type="submit" value=
        "Publish">

</form>

Answer 1

You'll have to do it with the file that processes the request. Can you show what that file looks like?

Here's an example of how to do it with jQuery and AJAX

How can I upload files asynchronously?