Clicking on existing profile picture to upload and change image. - javascript

I have made a user profile card where the user can click on choose file to select and upload an image.
Everything works fine however I would like to change it so instead of having to click on "choose file" and then click on "upload", the user can just click on the existing image and be brought to the select image screen:
and once they have selected a image and pressed open, the image is automatically changed?
This is my code to display the user profile card.
<?php
//query to see if the user has uploaded a profile picture.
$sql = "SELECT * FROM user_image WHERE userid = ?";
$stmt = mysqli_prepare($connect, $sql);
mysqli_stmt_bind_param($stmt,"i",$_SESSION['userid']);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$userImage = mysqli_fetch_assoc($result);
mysqli_stmt_close($stmt);
?>
<h1>User's Profile</h1>
<?php if($userImage['is_set'] == 0){
echo '<img src="profile_pics/default-profile-pic.png"/>';
}
else{
echo '<img src="'.$userImage['image_dir'].'"/>';
}
?>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*">
<button type="submit" name="submit">Upload</button>
</form>

Use a <label> (with for targeting the id on the file field):
<label for="fileField"><img src="..."></label>
<input type="file" id="fileField" name="file" accept="image/*">

You can use a <label> tag attached the file input to trigger the open box or you can use a click handler on the image that triggers a click on the file input.
document.querySelector('img').addEventListener('click', function(){
document.querySelector('h1 + img').click();
});
To get the file to upload immediately when selected you have to attach a change event handler for the image input. Then submit the form in it. You would have to change the submit button name to something other than submit to get this to work.
document.querySelector('input[type=file]').addEventListener('change', function(){
this.form.submit();
});
<button type="submit" name="upload">Upload</button>

<label for="fileField"><img src="..." height="100px" width="100px"></label>
<input type="file" id="fileField" name="file" accept="image/*" hidden="true">
Using hidden = "true", you can invisible the choose file.
Using height and width inside the img tag, you can adjust the image size.

Related

Submitting forms automatically when the content of a text box changes

I am developing a facial recognition system. When i capture image with my webcam the url is loaded into a text box in a form. Now i want the form to submit and process the php if it is submnitted. Here is my form
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" enctype="multipart/form-data" id="frmsubmit">
<input type="text" class="form-control input-sm" id="imgsrc" name="imgsrc">
<input type="submit" value="AUTHENTICATE" class="btn btn-primary" data-loading-text="Loading..." name="send" id="submit">
</form>
AND MY JAVASCRIPT
<script language="JavaScript">
webcam.set_api_url( 'present.php' );
webcam.set_quality( 100 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot(){
// take snapshot and upload to server
document.getElementById('upload_results').innerHTML = '<h1>Uploading Image To Database...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
document.getElementById("imgsrc").value=msg;
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
// show JPEG image in page
document.getElementById('upload_results').innerHTML ="<div class='alert alert-success fade in'> <i class='icon-remove close' data-dismiss='alert'></i> <strong>Success!</strong>Image Captured And Uploaded Successfully </div>";
document.getElementById('upload_img').innerHTML ="<img src="+msg+" class=\"images\">";
// reset camera for another shot
webcam.reset();
document.getElementById('frmsubmit').submit();
}
else {alert("PHP Error: " + msg);
}
}
</script>
AND PHP CODE
if(isset ($_POST["send"]))
{
Use submit button click trigger for example
document.getElementById("submit").click();
you are using document.getElementById('frmsubmit').submit(); but you don't have any form with this id but you have submit button with id submit. so this code will work for you.
if you give the form an id
<form action="someaction" method="post" id="someform">
You can trigger the submit event with jQuery
$('#someform').trigger('submit');
or
$('#someform').submit();
Try this...
$('#imgsrc').on('change', function(){
$(this).parent().submit();
})
You can add the attribute onchange to the text box
onchange="this.form.submit()"

Register which image has been clicked in form

I have multiple images in a HTML document and I want them to render unique values when they are clicked (in some retrievable way). I have tried having them as form elements, like so:
<form id="myform" method="post" action="">
<input type="hidden" name="action" value="submit" />
<div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/<?php echo $data[$counter] ?>"></div>
<div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/<?php echo $data[$counter+1] ?>"></div>
</form>
In this case I would like to access the POST data with PHP, something like:
if (isset($_POST['action'])) {
echo '<br />The ' . $_POST['submit'] . ' button was pressed';
}
But this doesn't work, as it's the image input type, which doesn't seem to be able to send data. I have tried using a button with the image as background, but this way I would have to adapt the size of each image to make it fit in the button (which I want to avoid, as I have many images).
I know I could use an image as a submit button with Javascript, but as I said, information about which image has been clicked also needs to be available somehow. Any ideas about the best solution?
HTML / CSS - Only way.
Set up the CSS to hide the radio buttons:
.hidden {
display: none !important;
}
In your form, use radio buttons to track which image is selected. Put the image inside of a label that is "for" the relevant radio button . Be sure to put whatever info you want in PHP inside the value attribute of the radio buttons:
<form method="post" name="myForm">
<div>
<input type="radio" name="image" value="image1" id="image1" class="hidden">
<label for="image1"><img src="path-to-your-image.jpg"></label>
</div>
<div>
<input type="radio" name="image" value="image2" id="image2" class="hidden">
<label for="image2"><img src="path-to-your-other-image.jpg"></label>
</div>
<div>
<input type="submit" name="save" value="Save Image Selection">
</div>
</form>
If you need the form to submit when they click an image, then add this bit of javascript:
<script>
// No-conflict-mode-safe document ready function (waits until page is loaded to run, which ensures radio buttons are available to bind to)
jQuery(function($) {
// Hide / suppress the submit button
$('input[type="submit"]').closest('div').hide();
// Bind to change event for all radio buttons
$('input[type="radio"]').on('change', function() {
// Submit the form ("this" refers to the radio button)
$(this).closest('form').submit();
});
});
</script>
Then, when you submit this form, in your PHP you'd be able to do this:
$image = $_POST[ 'image' ]; // 'image' is the name of the radio buttons
var_dump( $image );
// Will result in "image1" or "image2", etc - whatever "value" you assigned to the radio buttons
When you use your code, you get the submit param (because of the button's attribute name) in your $_POST object. The value will be the value attribute.
So you can check this like this:
<form id="myform" method="post" action="">
<input type="hidden" name="action" value="submit" />
<div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/img1"></div>
<div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/img2"></div>
</form>
<?php
if (isset($_POST['submit'])) {
if ($_POST['submit'] == 'alt1') {
echo 'alt1 clicked';
// First button clicked
}
else {
echo 'alt2 clicked';
// second button clicked
}
}
?>

not able to update input type file value

1)i am adding image and its title in database
but if i submit form for first time it works but again without selecting the image when its pre selected from first submit
2) submiting form 2nd time takes image value null or is empty(updating image)
<form method="post" enctype="multipart/form-data">
<div id="photoselect_box">
<h5 id="logo_head">Profile Image</h5>
<script>
function profile_imagee(input){
$('#profile_image')[0].src = (window.URL ? URL :webkitURL).createObjectURL(input.files[0]);
}
</script>
//input image preview
<img src="<?php $path = "download/items/$uid/"; echo $path.$userRow['profile_image']; ?>" id="profile_image" alt="profile photo" name="profile_image" />
<input type="file" id="img_file" name="profile_image" onChange="profile_imagee(this);"
value="<?php echo $userRow['profile_image']; ?>" />
</div>
// i am able to update this input after clicking submit
<input type="text" id="download_content1" name="download_content1" value="<?php echo $userRow['download_content1']; ?>" >
</form>
i cannot update the image value in database after submiting form for 2nd time
php code
include_once '../../database/conn.php';
$res=mysqli_query($bd,"SELECT * FROM organisation);
$userRow=mysqli_fetch_array($res);
$email=$userRow['email'];
if (isset($_POST['register'])){
//inserting logo image
$profile_image=$_FILES['profile_image']['name'];
$profile_image_temp=$_FILES['profile_image']['tmp_name'];
// changing the destination required folder according to users unique id
$path = "download/items/$uid/";
#mkdir($path, 0666, true); // Create upload folder.
move_uploaded_file($profile_image_temp,$path.$profile_image);
//updating image in database
$insert="UPDATE organisation SET profile_image= '$profile_image',download_content1 = '$download_content1 '
WHERE email = '$email'";
$insert_pro = mysqli_query($bd,$insert);
}

Only apply image upload url to specific input field

I'm making a custom field in a custom meta box in WordPress. I have input text fields, textareas, and checkboxes that are all working fine. I also included a browse button for the image gallery that is working.
When you click on the "Browse" button, it pulls up the WordPress media upload screen, and when you select that image, it will replace the input value (as well as an image thumbnail).
Here is the relevant part of the WordPress meta box set up.
function show_custom_fields_meta_box() {
global $post;
$meta = get_post_meta( $post->ID, 'custom_fields', true ); ?>
<input type="hidden" name="custom_meta_box_nonce" value="<?php echo wp_create_nonce( basename(__FILE__) ); ?>">
<!-- image upload field -->
<p>
<label for="custom_fields[image]">Image Upload</label><br>
<input type="text" name="custom_fields[image]" id="custom_fields[image]" class="meta-image regular-text" value="<?php echo $meta['image']; ?>">
<input type="button" class="button image-upload" value="Choose or Upload an Image">
<div class="image-preview"><img src="<?php echo $meta['image']; ?>" style="max-width: 250px;"></div>
</p>
}
And here's the jQuery I'm using to open the WordPress media gallery and upload the image.
<script>
/*
* Attaches the image uploader to the input field
*/
jQuery(document).ready(function ($) {
// Instantiates the variable that holds the media library frame.
var meta_image_frame;
// Runs when the image button is clicked.
$('.image-upload').click(function (e) {
// Prevents the default action from occuring.
e.preventDefault();
var selected = $(this);
var meta_image = $('.meta-image');
// If the frame already exists, re-open it.
if (meta_image_frame) {
meta_image_frame.open();
return;
}
// Sets up the media library frame
meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
title: meta_image.title,
button: {
text: meta_image.button
}
});
// Runs when an image is selected.
meta_image_frame.on('select', function () {
// Grabs the attachment selection and creates a JSON representation of the model.
var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
// Sends the attachment URL to our custom image input field.
$('.meta-image').val(media_attachment.url);
var imgurl = $('.meta-image').val();
$(selected).prev().val(imgurl);
$(selected).closest('div').find('.image-preview').children('img').attr('src',imgurl);
});
// Opens the media library frame.
meta_image_frame.open();
});
});
</script>
Now, this works perfectly fine as-is. The input button has a class of .image-upload, and the input text field has a class of meta-image.
However, if I add another field...(custom_fields[image2])
<p>
<label for="custom_fields[image2]">Image Upload</label><br>
<input type="text" name="custom_fields[image2]" id="custom_fields[image2]" class="meta-image regular-text" value="<?php echo $meta['image2']; ?>">
<input type="button" class="button image-upload" value="Choose or Upload an Image">
<div class="image-preview"><img src="<?php echo $meta['image2']; ?>" style="max-width: 250px;"></div>
</p>
The jQuery will apply to both browse buttons and text inputs, because it's a class. I know (think) I have to use some form of $(this) to get the correct button and text input, but all of my efforts have been in vain so far.
I've tried $(this).closest('.meta-image'), but that doesn't seem to work.
Thank you!
I was able to do it with this code:
var meta_image = $(this).parent().children('.meta-image');
You could use the variable selected in the select event handler.
Try this:
var metaImage = $(selected).closest('p').find('.meta-image),
imgurl = $(metaImage).val();

how to manage in JavaScript null values from PHP code

I have the next PHP/HTML code for upload an image:
<label>Image (*)</label>
<!-- if image exists, show it -->
<?php if($category->getImage() === null) : ?>
<input type="file" name="image" id="image" required>
<?php else : ?>
<p><img src="../uploads/images/<?php echo $categoria->getImage(); ?>"></p>
<input type="file" name="image" id="image">
<?php endif; ?>
And I want to validate it using JavaScript
// Validate image
image = document.getElementById("image").value;
if (!image) {
window.alert("You must select a file for the image.");
document.getElementById("image").focus();
return false;
}
The image is required. If you create a new registry it sets all of its atributes to null, including the image. Then, the image is not show and you can set it in the form. If you want to update them, the form shows the current imagen but you don't have to update it if you don't want to.
I need to validate if the file hasn't been uploaded and the value is null it means that the user is creating a new registry and the image is required. If the file hasn't been uploaded but its value isn't null, the user is updating the registry and it isn't required to upload an image.
Thanks in advance and sorry for my bad english.
You can add id to the image
<img id="foo" src="../uploads/images/<?php echo $categoria->getImage(); ?>">
and check if it's in the DOM:
if ($('#foo').length) {
// image is there
}
or without jQuery:
if (document.getElementById("foo")) {
// image is there
}

Categories

Resources