AJAX photo upload on form, so thumbnail appears on form before it's submitted?
I've got a form in a Laravel (5.4) blade template (form is in full in HTML by the way, not using Laravel's form-generating capability) and I've also got a button that causes a standard system file selection dialog (e.g. on Windows) to pop up so user can select an image.
I now want to have the browser upload the image to my server (on standard shared hosting not cloud yet) over AJAX as soon as an image is selected, then send back a URL to a thumbnail of the image on the server and insert it into the page. This last bit I can do (inserting thumbnail on page), but just wondering how to get Laravel to do what it needs to do on the backend to make this happen? Does it have anything built in to help with this? Also not sure exactly how to upload on the browser side - obviously an AJAX request but not sure the exact call in that...
Also this all needs to happen before main form is submitted so user sees thumbnail in the form immediately after upload.
The Laravel part would simply be to accept a POST request (set up a route/action to which you will POST your image file via AJAX); store the file; calculate the file's URL, and return that as JSON (most likely) or HTML.
The slightly trickier part would be to match that image file up with the rest of the form data you are about to submit. You may need to create a hidden input and populate it with some sort of identifier from the AJAX response.
Another option would be to use JavaScript and the HTML5 File API to render the preview without actually uploading it.
