We Keep Coding

Upload Image and stay on page

I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!

I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.

Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.

Store an image in browser storage using input type 'file' - Reactjs

I'm trying to store an image in the browser storage when the user selects an image from his/her computer.
<div className="add_grp_image_div margin_bottom">
<img src={img_upload} className="add_grp_image"/>
<input type="file" className="filetype"/>
<span className="small_font to_middle">Add group image</span>
</div>
As shown in the above code i'm opening the file upload window when someone clicks on this div. I want to show the selected image inside the div i have given above. How can i do it?
My html part looks like this.

You don't need to store the image for showing it to the user or manipulating it.
To show the image, make use of FileReader api. This answer should show you how to display the selected image
To manipulate the image, you need to draw it on a canvas and then perform the selected actions. To draw on the canvas you can follow as described here
But if you wanna to crop it, i suggest you to search for a good javascript image manipulation library. There are n libraries that already does this. It saves time and you can learn much faster without re-inventing the wheel.

Correct way to resize an image and append to HTML form?

I'm trying to resize an image client-side before submitting a form and then appending it to the form. When I submit this initially it seems to be working correctly. But on the server-side it's still uploading the original. Is this possible?

I noticed this post only now while solving the same problem.
It is NOT POSSIBLE to replace the user selected input of type 'file' with a resized one. For security reasons browsers do not allow this.
The form is posted using HTTP POST which is synchronous. According to some articles, altered image should be posted asynchronously. All examples use XHR or Ajax for this.
Possible solution seems to be like this:
1) Resize the image and convert canvas to dataUrl or blob;
2) Either add a new hidden field to your form or move image upload outside the form;
3) Use XHR or Ajax to post the resized image;
4) Either remove name attribute from the original input of 'file' type (this will prevent its submission) or ignore server-side;
5) On a server decode dataUrl and save the image in your upload folder.

API that let's you edit/manipulate an image

Is there an API that lets you add text to an image and fetch it to your app?
For example:
User uploads an image to my website.
User has the ability to add text (prices, locations, info) to the image through a third-party service and once ready I can make an API call to the service and fetch the new image to my server so the user can use the image for products or save it.
If there are no services like that how would I go about creating an image editor in JavaScript/jQuery so that user could add boxes/text to the image? I know that I would need to use ImageMagick to convert the data and render an image after the user has finished but image editing in the browser is an unexplored area for me.

Sure, you can render and manipulate images in HTML/javascript:
http://code.tutsplus.com/tutorials/canvas-from-scratch-pixel-manipulation--net-20573

Uploading an image before pressing submit

My website allows a user to upload images. I'm stuck between two situations: whether I should upload the image immediately after it's selected, or upload the image after clicking the submit button.
I decided that uploading the image immediately makes a little more sense for my website, however, I ran into another issue.
As it stands, I want to have each image's name being the id of the post (for example: 500.png). However, if I upload the image before the user clicks submit, how would I name the image in this way (since I can't get the insert id when the user presses submit)?

Each time you upload an image, store the image in a separate table, with one column of the time at which the image is uploaded; and another column to indicate whether the image is attached to a post. You may use postid for this column.
When an image is auto uploaded, you can populate a hidden input field to store the auto ID of the image, and forward it to the post creation handler. The newly created post will have an ID. Save this in the postid column in the image. Now your image filename is using the imageid, not postid, but it's okay. If you really want to change the image name after the post name, upload the original image as img_###.png; then rename it to *.png, where ### is the image ID, and * is the post id. The img_ prefix is necessary to avoid name conflict. Again, this is not necessary. Image ID is just fine.
Finally you can set up a cron job to delete the image files and records that are uploaded a while ago but without a post ID. This will purge all the auto uploaded images without a submitted form.
You do have to take care of image upload racing condition. What if your image is still being uploaded, and someone clicks on the form post button already?