I have an image upload form where you click "Choose Image" and it brings up the file selection window. You choose an image and then the filename appears on the screen (not the image yet, just the filename) alongside a newly appeared "Upload" button. Then you have to hit "Upload" to make the image truly upload and appear in the preview pane.
I would love to condense this process so that when someone clicks "Choose Image" and selects the image they want to upload, it removes the middle man and immediately uploads the image and shows them the image in the preview pane. Why make the user have to click "Upload"?
I've included my related code below. Is there a way to tweak my existing code to make the upload part happen immediately after file selection? Or do I likely need to start from scratch to do what I want?
Image upload form:
<li class="section">
<label class="caption" for="">Pool Image </label> (OPTIONAL - You can add one later if you don't have one now)<br>
<div id="preview"><img id="image" src="images/no-image.png" /></div>
<label for="uploadImage" id="custom-file-upload">
Choose Image
</label>
<span id="file-selected"></span>
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" type="button" value="Upload" class="displaynone webkit">
<input id="remove-image" class="displaynone" type="button" value="Remove/Change">
<div id="err"></div>
</li>
<li class="section">
<a class="goback" id="cancel-and-remove-image" href='/my-pools'>« Cancel</a>
<input type="submit" name="submit" class="submit" value="Create Pool »" />
</li>
This JS is also on the page:
$(document).ready(function () {
$("input:file").change(function (){
$( "#button" ).show();
});
$('#uploadImage').on('change', function() { var fileName = ''; fileName = $(this).val(); $('#file-selected').html(fileName); });
$("#button").click(function(){
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
//Make ajax call here:
$.ajax({
url: '/upload-image-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
beforeSend : function() {
$("#err").fadeOut();
},
success: function(result) {
if(result=='invalid file') {
// invalid file format.
$("#err").html("Invalid File. Image must be JPEG, PNG or GIF.").fadeIn();
} else {
// view uploaded file.
$("#image").attr('src', '/'+result);
/* $("#preview").html(data).fadeIn();*/
/* $("#form")[0].reset(); */
//show the remove image button
$('#file-selected').empty();
$( "#remove-image" ).show();
$( "#custom-file-upload" ).hide();
$( "#uploadImage" ).hide();
$( "#button" ).hide();
}
},
error: function(result) {
$("#err").html("errorcity").fadeIn();
}
});
});
$("#remove-image").click(function(){
//Make ajax call here:
$.ajax({
url: "/remove-image.php",
type: 'POST',
processData: false, // important
contentType: false, // important
success: function(result) {
if(result=='gone') {
$("#image").attr('src', '/images/no-image.png');
$('#file-selected').empty();
$( "#custom-file-upload" ).show();
$( "#remove-image" ).hide();
$( "#uploadImage" ).hide();
$( "#button" ).hide();
} else {
$("#err").html("sorry"+result).fadeIn();
}
},
error: function(result) {
$("#err").html("error").fadeIn();
}
});
});
});
This is the PHP script that AJAX calls (i.e. upload-image-ajax.php):
<?php
require_once("includes/session.php");
$poolid=strtolower($_SESSION['poolid']); //lowercase it first so we get exact matches
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
if(isset($_FILES['image'])) {
$img = $_FILES['image']['name'];
$tmp = $_FILES['image']['tmp_name'];
// get uploaded file's extension
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
//checking if image exists for this pool and removing if so, before adding new image in its place
if(file_exists("uploads/".$poolid.".png")) {
unlink("uploads/".$poolid.".png");
}
// checks valid format
if(in_array($ext, $valid_extensions)) {
//re-size the image and make it a PNG before sending to server
$final_image = $poolid . ".png";
$path = "uploads/".strtolower($final_image);
$size = getimagesize($tmp);
$ratio = $size[0]/$size[1]; // width/height
if( $ratio > 1) {
$width = 200;
$height = 200/$ratio;
}
else {
$width = 200*$ratio;
$height = 200;
}
$src = imagecreatefromstring(file_get_contents($tmp));
$dst = imagecreatetruecolor($width,$height);
imagecopyresampled($dst,$src,0,0,0,0,$width,$height,$size[0],$size[1]);
imagedestroy($src);
imagepng($dst, $path); // adjust format as needed
imagedestroy($dst);
$_SESSION['image_uploaded']="yes";
echo $path ."?".rand(1,32000);
} else {
echo 'invalid file';
}
}
?>
Just add your image upload AJAX call inside the file input change event. This should upload your image right after user selects the image.
$(document).ready(function() {
$('#uploadImage').on('change', function() {
var fileName = '';
fileName = $(this).val();
$('#file-selected').html(fileName);
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
//Make ajax call here:
$.ajax({
url: '/upload-image-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
beforeSend: function() {
$("#err").fadeOut();
},
success: function(result) {
if (result == 'invalid file') {
// invalid file format.
$("#err").html("Invalid File. Image must be JPEG, PNG or GIF.").fadeIn();
} else {
// view uploaded file.
$("#image").attr('src', '/' + result);
/* $("#preview").html(data).fadeIn();*/
/* $("#form")[0].reset(); */
//show the remove image button
$('#file-selected').empty();
$("#remove-image").show();
$("#custom-file-upload").hide();
$("#uploadImage").hide();
$("#button").hide();
}
},
error: function(result) {
$("#err").html("errorcity").fadeIn();
}
});
});
});