Please refer question: Jquery Image Upload in Form with Plugin goes Null
I am trying to submit a form using JQuery Ajax and trying to retrieve in a PHP file and save. for the particular form there are two file inputs.
Image
Note
when I debug using var_dump($_FILES), I was able to see only Note's array but not Image's. for image upload I am using a plugin called FancyUpload, that is what probably causing the issue. below is the form
<form id="form" action="add.php" method="post" autocomplete="off" enctype="multipart/form-data">
<div>
<input aria-label="cxname" id="cxname" name="cxname" class="form-control" placeholder="Name" type="text">
</div>
<div>
<select name="sales" id="sales" class="SlectBox form-control">
<option value='0'>Sales</option>
<?php echo sales(); ?>
</select>
</div>
<div>
<input class="custom-file-input" placeholder="choose note" name="note" id="note" type="file">
<label class="custom-file-label">Choose Note</label>
</div>
<div>
<input class="custom-file-input" placeholder="Choose Image" name="image" id="image" type="file" multiple>
</div>
<div>
<button id="submit" class="btn btn-primary btn-size">Add</button>
</div>
</form>
Jquery Below along with its fancy uploader classes
<!-- JQuery min js -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui/ui/widget.js"></script>
<script src="assets/plugins/fancyuploder/jquery.ui.widget.js"></script>
<script src="assets/plugins/fancyuploder/jquery.fileupload.js"></script>
<script src="assets/plugins/fancyuploder/jquery.iframe-transport.js"></script>
<script src="assets/plugins/fancyuploder/jquery.fancy-fileupload.js"></script>
<script>
$(document).ready(function(e){
var image = $('#image').FancyFileUpload({
maxfilesize : 1000000,
params : {
action : 'form'
},
autoUpload: false
});
$("#form").on('submit', function(e){
e.preventDefault();
var fd = new FormData();
fd.append('pimage', $(image)[0].files[0]);
fd.append('deliveryNote', $("#note")[0].files[0]);
fd.append('cxname', $('input[name=cxname]').val());
fd.append('sales', $('select[name=sales]').val());
$.ajax({
type: 'POST',
url: 'add.php',
data: fd,
dataType: 'json',
processData:false,
contentType: false,
cache: false,
async: false,
success: function(response){
$('.statusMsg').html('');
if(response.status == 1){
$('#form')[0].reset();
$('.statusMsg').html('<p class="alert alert-success">'+response.message+'</p>');
alert('received');
}else{
$('.statusMsg').html(alert(response.message));
}
$('#form').css("opacity","");
$(".submit").removeAttr("disabled");
}
});
});
});
Retreiving PHP
upload_dir = 'uploads/';
pdf_dir = 'doc/';
if (isset($_POST['cxname']) || isset($_POST['deliveryNote']) || isset($_POST['pimage']) || isset($_POST['sales'])) //even tried with ($_FILES['pimage'])
{
$cxname=$_POST['cxname'];
$sales=$_POST['sales'];
var_dump($_FILES);
//MOVE IMAGE -> Comes Empty
if(!empty($_FILES['pimage']['tmp_name']))
{
$temp = $_FILES['pimage']['tmp_name'];
$name = $_FILES['pimage']['name'];
$result = move_uploaded_file($temp,$upload_dir.$name);
$response['status'] = 1;
$response['message'] = 'IMAGE HAS BEEN SAVED';
}
else{
$name = '';
$response['status'] = 0;
$response['message'] = 'IMAGE CAME EMPTY!';
}
//SAVE NOTE
$_pdfDN = $_FILES['deliveryNote']['name'];
$Tempfile = $_FILES['deliveryNote']['tmp_name'];
$_pdfResult = move_uploaded_file($Tempfile,$pdf_dir.$_pdfDN);
}
If I do without image upload plugin, it works fine. Please advice.
Related
I am trying to upload image and crop that image and then get the image using following script:
https://github.com/trigo-at/slim-image-cropper-test
Without WordPress I am using this HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slim Image Cropper Test</title>
<link href="slim/slim.min.css" rel="stylesheet">
<link href="styles/styles.css" rel="stylesheet">
<body>
<form action="" class="form" method="POST" id="form" enctype="multipart/form-data">
<div class="frame">
<input type="file" id="myCropper"/>
<input type="submit" name="submit" id="register_btn" value="Register" class="btn btn-primary">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="slim/slim.kickstart.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
and the Ajax Script is
$("#form").submit(function( e ) {
e.preventDefault();
var data = new FormData($('#form')[0]);
$.ajax({
type: 'POST',
url : 'test.php',
data : data,
dataType: 'json',
cache: false,
processData: false,
contentType: false,
success: function( result ) {
console.log( result );
}
});
});
Now, on the test.php page I can get the image array data
<?php
require_once( 'server/slim.php' );
$imgs = Slim::getImages();
print_r( $imgs );
NOW, for this WordPRess Ajax call it's not getting the image data :(
WordPress Ajax Call
$("#form").submit(function( e ) {
e.preventDefault();
var register_type = '' ;
register_type = $(this).data('register-type');
var data = new FormData($('#form')[0]);
data.append("action", "register_action");
data.append("register_type", register_type);
$.ajax({
type: 'POST',
url : settings.ajaxurl,
data : data,
dataType: 'json',
cache: false,
processData: false,
contentType: false,
success: function( result ) {
console.log( result );
}
});
});
WordPress HTML form part:
<form action="" class="form" method="POST" id="form" enctype="multipart/form-data">
<div class="form-group">
<div class="frame">
<input type="file" id="myCropper"/>
</div>
</div>
<div class="form-group">
<div id="form_result"></div>
<?php wp_nonce_field( 'register_action' ); ?>
<input type="submit" name="submit" data-register-type="<?php echo hashMe('ccroipr_register_p', 'e'); ?>" id="register_btn" value="Register" class="btn btn-primary">
</div>
</form>
WordPress PHP Part ( get nothign :():
echo '<pre>';
$imgs = Slim::getImages();
print_r( $imgs );
echo '</pre>';
**PHP output:**
<pre>Array
(
[0] => Array
(
[input] =>
[output] =>
[actions] =>
[meta] =>
)
)
</pre>
But without WordPress, I can get the image array data.
Can someone tell me what's going wrong here please?
I am trying to update an image in the my database. I have a modal that is loaded with jquery. When clicking on the save modification button, alla the form data shows up except for the image file, which does not show up in the $_FILES in php. I tried all the indication found on the web (php ini file enables file upload, images size is good). The code works if I use that classic submit method, but I don't want a full screen refresh, I need to do it all in ajax. Here is the html:
$('#updatePubDevFrm').submit(function (e) {
e.preventDefault();
var data = $(this).serialize();
alert(data);
var url = '/PubDev/updatePubDev';
$.post(url, data, null, 'json')
.done(function (data) {
if (data.status === "OK") {
$('#updatePubDevModal').removeClass('md-show');
} else {
alert("update error");
}
})
.fail(function (data) {
alert("ajax error");
})
.always(function () {
});
});
<div class="md-modal md-effect-1" id="updatePubDevModal" >
<div class="md-content">
<div class="modal-header">
<button class="md-close close">×</button>
<h4 class="modal-title">Update Publisher/Developer</h4>
</div>
<form id="updatePubDevFrm" class="dz-clickable dropzone" action="/PubDev/updatePubDev" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="row dropzone">
<div class="col-lg-5">
<div class="form-group">
<label for="pubDevName">System Id of Publisher/Developer</label>
<input type="text" placeholder="Name of Publisher/Developer" name="pubDevIdDisplay" id="pubDevIdDisplay" class="form-control input-large" disabled="true">
<input type="hidden" name="pubDevId" id="pubDevId" >
</div>
<div class="form-group">
<label for="pubDevName">Name of Publisher/Developer</label>
<input type="text" placeholder="Name of Publisher/Developer" name="pubDevName-update" id="pubDevName-update" class="form-control input-large">
</div>
<div class="form-group">
<label for="date-founded">Date Founded</label>
<input type="text" placeholder="Date founded" id="date-founded-update" name="date-founded-update" class="form-control date-picker input-large">
</div>
<div class="form-group">
<label>What type of company is this?</label>
<div class="checkbox-nice">
<input type="checkbox" name="isPub-update" id="isPub-update">
<label for="date-founded-update">
This company is a publisher
</label>
</div>
<div class="checkbox-nice">
<input type="checkbox" name="isDev-update" id="isDev-update">
<label for="isDev-update">
This company is a developer
</label>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="main-box clearfix main-box-frame" >
<header class="main-box-header clearfix">
<h2>Upload Publisher /Developer Logo</h2>
</header>
<div class="main-box-body clearfix imgcontainer center">
<img id="preview" src="" class="pointable" alt="No Image Available" style="max-height:100%; max-width: 100%; "/>
<div class="main-box-body clearfix">
<div id="dropzone" class="drop-zone-frame" >
<input type="file" name="image2" id="image2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="confirmUpdPubdev" class="btn btn-primary">Save Modifications.</button>
</div>
</form>
</div>
</div>
Here is the php code:
public function updatePubDev() {
$fields = array();
$fields[$this->pubdev->get_id_name()] = $this->input->post('pubDevId');
$fields['name'] = $this->input->post('pubDevName-update');
if ($this->input->post('date-founded'))
$fields['date_founded'] = stampa_data_formato_DATE($this->input->post('date-founded-update'), '/');
if ($this->input->post('isPub-update'))
$fields['publisher'] = 1;
else
$fields['publisher'] = 0;
if ($this->input->post('isDev-update'))
$fields['developer'] = 1;
else
$fields['developer'] = 0;
$row_count = $this->pubdev->update($fields,$this->pubdev->get_id_name());
$file = $_FILES['image2'];
//$idPubDev = $this->input->post("pubDevName");
$ds = DIRECTORY_SEPARATOR;
$path = dirname('../') . $ds . 'application' . $ds . 'assets' . $ds . 'img' . $ds . 'pub_devs' . $ds . 'logos' . $ds;
//print_r($file);
$info = new SplFileInfo($file['name']);
//var_dump($info->getExtension());
$filename = "logo_id_" . str_pad( $this->input->post('pubDevId'), 11, "0", STR_PAD_LEFT) . "." . $info->getExtension();
$result = $this->upload->uploadfile($file, $path, $filename);
//echo "test";
if ($result['status'] === "OK") {
$logo = 'logo_id_' . str_pad($this->input->post('pubDevId'), 11, "0", STR_PAD_LEFT) . '.' . $info->getExtension();
$this->pubdev->update(array('logo' => $logo, $this->pubdev->get_id_name() => $this->input->post('pubDevId')), $this->pubdev->get_id_name());
$result['message'] = "file saved successfully";
$result['query'] = $this->db->last_query();
}
$result['update_rows']= $row_count;
echo json_encode($result);
}
I tried the .ajax version, but the problem persist, here is the modified jquery:
$('#updatePubDevFrm').submit(function (e) {
e.preventDefault();
var data = $(this).serialize();
var url = '/PubDev/updatePubDev';
$.ajax({
url: url,
type: "POST",
data: data,
processData: false,
contentType: false
})
.done(function (data) {
if (data.status === "OK") {
$('#updatePubDevModal').removeClass('md-show');
} else {
alert("update error!");
}
})
.fail(function (data) {
alert("ajax error!");
})
.always(function () {
});
});
It is not a duplicate question because the answer provide contained different properties necessary to uplaod both image and data inputs. these two properties in the $.ajax call are needed:
processData: false,
contentType: false
This way, it solved my problem.
Use FormData as data instead of $(this).serialize();, set processData and contentType to false
var data = new FormData();
data.append("file", $(":file", this)[0].files[0]);
$.ajax({
url: "/PubDev/updatePubDev",
type: "POST",
data: data,
processData: false,
contentType: false
})
Please try to use file_get_contents('php://input'); to get the upload content.
I'm having some difficulties with uploading an image from an html form. the form should be able to send the image name with other data to php page.
I used formData instead of serialized function, since it can't handle files data.
$(document).on('click', '#btn_add', function(){
var formData = new FormData($(this)[0]);
$.ajax({
url:"includes/widgets/insert.php",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false
success: function (data) {
alert(data);
},
});
return false;
});
html form
<form id="insert_post" action="includes/widgets/insert.php" method="post" enctype="multipart/form-data" >
<div class="row">
<div class="medium-6 columns">
<label>First name
<input type="text" name="first_name" id="first_name" contenteditable>
</label>
</div>
<div class="medium-6 columns">
<label>Last name
<input type="text" name="last_name" id="last_name" contenteditable>
</label>
</div>
<div class="medium-12 columns">
<label>Last name
<input type="file" name="file" id="image" multiple contenteditable>
</label>
</div>
</div>
<button type="button" name="btn_add" id="btn_add" class="button btn btn-xs btn-success" >Submit</button>
</form>
php page
<?php
$connect = mysqli_connect("localhost", "root", "", "myaddboard");
echo $_POST['first_name'];
echo $_POST['last_name'];
echo $image = $_FILES['file']['name'];
echo $image_tmp = $_FILES['file']['tmp_name'];
/*
if(empty($image)){
echo 'error';
}
move_uploaded_file($image_tmp,"img/$image");
//$sql = "INSERT INTO posts(post_content, post_author) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
} else {
echo 'error';
}
*/
?>
The php form is just to test if the ajax send the data correctly.
When I click on the button I always get errors that the php variables is not defined
The errors i get each time I submit the form
undefined index: frist_name in c:xampp\htdocs\unv\includes\widgets\insert.php on line 4
undefined index: last_name in c:xampp\htdocs\unv\includes\widgets\insert.php on line 5
undefined index: file in c:xampp\htdocs\unv\includes\widgets\insert.php on line 8
undefined index: file in c:xampp\htdocs\unv\includes\widgets\insert.php on line 9
what should I do to make the ajax send the data to the php page ?
This won't work because of how your selector is created.
$(document).on('click', '#btn_add', function(){
var formData = new FormData($(this)[0]);
In the above scenario, $(this)[0] is getting you the raw HTML interpretation of the button.
What you actually want is to change your button to a submit type, capture the form submit event, and then process your request.
button type="submit" <-- change
$(document).on('submit', '#insert_post', function(e){
e.preventDefault(); //stop default form submission
//do the rest of your stuff here
});
Now $(this)[0] is actually the form and not the button.
Have got an HTML and a PHP to upload the image to the server. I have used this same code previously and it works fine but I dont know why it is not working now,
Or its maybe the place where I am using the code is not appropriate. Below are the codes.
HTML to take input from user
<form action ="login.php" method="POST">
<label >USername :</label><br/>
<input type="text" name ="userid" /><br/>
<label >Password :</label><br/>
<input type="password" name="pid" /><br><br/>
<input type="submit" value ="Login" />
</form>
PHP for login.php
<?php
$x = 1;
while($row = mysqli_fetch_array($result)){
echo $x.'<br/>';
?>
//Form to upload the image
<form enctype="multipart/form-data" id="form" action="" method="post">
<input type="file" id="image" name="img" />
<img id="blah" src="#" alt="your image" /><br/><br/>
<input type="button" value="upload" onclick="javascript:uploadInage();" />
</form>
<script type="text/javascript">
function uploadInage()
{
var file_data = $('#image').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: "file.php",
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (result) {
alert(result)
}
});
}
</script>
<?
echo "-------------------------------------------------------".'<br/>';
$x = $x+1;
}
print_r($stores,$stores_add,$stores_chain,$jobs);
}
?>
PHP to upload File
file.php
<?php
$imagePath = "uploads/";
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
$filename = $_FILES["file"]["tmp_name"];
$time = time();
move_uploaded_file($filename, $imagePath . $time . '.' . $extension);
echo "File Uploade";
exit;
?>
Kindly tell me why this code doesnt work.
<form enctype="multipart/form-data" id="form" action="" method="post">
<input type="file" id="image" name="img" />
<img id="blah" src="#" alt="your image" /><br/><br/>
<input type="button" value="upload" onclick="javascript:uploadInage();" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function uploadInage()
{
var file_data = $('#image').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: "file.php",
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (result) {
alert(result)
}
});
}
</script>
Thanks to I'am Back.
Just added jquery.min.js and it works completely fine.
Paste this code in login.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I guess you are using ajax so you have to convert this file to DataUrl to send it by ajax
var fileInput = document.getElementById('YourInputID');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
$("#myTextAreaID").val(reader.result)
}
reader.readAsDataURL(file);
}
});
It will convert your file to data url and before save it on a textarea now you can send it by ajax
to convert it to an image at php script use
convert_data_url($data_url,$idFile,$folder) {
$image = base64_decode(str_replace('data:image/png;base64,','',$data_url));
save_to_file($image,$idp,$size,$pasta);
}
function save_to_file($image,$idFile,$folder) {
if(!file_exists($folder)){
mkdir($folder);
}
$fp = fopen($folder."/".$idFile.".jpg", 'w');
fwrite($fp, $image);
fclose($fp);
}
So you have to use this function convert_data_url($data_url,$idFile,$folder)
where data_url is the image
id idFile is the name that you want
and folder where you want to save it.
I am having a problem to call the ajax function from the php after I clicked submit button to submit the form. Everything is working fine on Localhost, but when I transfer all of the php to FTP server, all the function can't work already.
In Localhost, I'm able to submit the file upload to filesystem which I name it "uploads" folder and then insert the data of the form into database with query. But when I try on the FTP server, where I also create a uploads folder to store the uploaded file, it can't work.
Anything I did wrong in my code or any configuration I need to set? Please point me out.
Here is my php code where I use to submit form :
schoolform.php
<!--Banner Item No 1 Start-->
<div class="box box-primary1" id="no1" style="display:block;">
<div class="box-header">
<h3 class="box-title">Upload New Form Here <small>Only PDF</small></h3>
</div>
<div class="box-body">
<form class="form" id="form" action="" method="POST" enctype="multipart/form-data">
<div class="box-body">
<div class="form-group" >
<label for="formName">Form Name</label>
<input type="text" class="form-control" name="formName" id="formName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
</div>
<div class="form-group" >
<label for="formDescription">Form Description</label>
<input type="text" class="form-control" name="formDescription" id="formDescription" placeholder="Please Enter Description" onChange="checkDisabled(testing);">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input type="file" id="uploaded_file" name="uploaded_file" onChange="checkDisabled(testing);"><br>
<p class="help-block">You file must not more than 1MB. (Only PDF allowed)</p>
</div>
<div class="checkbox">
<button id="testing" type="submit" class="btn btn-primary" disabled>Add</button>
</div>
</div><!-- /.box-body -->
</form> <!-- Date range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
</div><!-- /.box-body -->
</div><!-- /.box -->
Here is where I used to call the ajax function to insert the data:
//File and text upload with formDATA function
$("#form").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url:'schoolFormItem.php',
type: 'POST',
data: formData,
async: false,
beforeSend: function(){
if(confirm('Are you sure?'))
return true;
else
return false;
},
cache: false,
contentType: false,
processData: false
}).done(function () {
//do something if you want when the post is successfully
if(!alert('Form Had Successfully Inserted.')){document.getelementbyclassname('form').reset()}
});
return false;
});
Here is my query function to insert data into database and also filesystem :
<?php
include 'dbConnection.php';
global $dbLink;
$path = "uploads/";
$valid_formats = array("PDF", "pdf");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['uploaded_file']['name'];
$size = $_FILES['uploaded_file']['size'];
$fName = $dbLink->real_escape_string($_POST['formName']);
$fDescription = $dbLink->real_escape_string($_POST['formDescription']);
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024))
{
$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmp = $_FILES['uploaded_file']['tmp_name'];
if(move_uploaded_file($tmp,$path.$actual_image_name))
{
//mysqli_query ($db,"INSERT INTO image VALUES('','hello','$actual_image_name')");
//mysqli_query($db,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
$query = "INSERT INTO schoolform_item (schoolform_name,schoolform_description,schoolform_data,schoolform_created) VALUES ('{$fName}','{$fDescription}','{$actual_image_name}', NOW())";
$result = $dbLink->query($query);
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>
Did I miss any step or is any code is wrong? Because everything is working when I try on localhost with xammp. And it all become malfunction when put on the server.
Please guide me through this.
The reason your confirm box never appears is actually because you have an error in jquery.confirm.js on line 147: Uncaught ReferenceError: dataOptions is not defined I see your using jquery.confirm.js version 2.3.1.
In the official version the file ends like this:
/**
* Globally definable rules
*/
$.confirm.options = {
text: "Are you sure?",
title: "",
confirmButton: "Yes",
cancelButton: "Cancel",
post: false,
confirmButtonClass: "btn-primary"
}
})(jQuery);
In your copy, the file ends like this:
/**
* Globally definable rules
*/
var settings = $.extend({}, $.confirm.options = {
confirm: $.noop,
cancel: function (o) {},
button: null,
text: "Are you sure?",
title: "Warning!",
confirmButton: "Yes",
cancelButton: "Cancel",
post: true,
confirmButtonClass: "btn-primary",
cancelButtonClass: "btn-default"
}, dataOptions, options);
})(jQuery);
I would replace that bit of code iwth the original bit, or, better yet, grab a new copy of the file from the jquery.confirm site
try $.post() instead of $.ajax({}) and see. may be it's the cause, $.post is simplified. for more info http://api.jquery.com/jQuery.post/
also try changing:
var formData = new FormData($(this)[0]);
to:
var formData = jQuery('#myform').serialize();
try this code too:
$("#form").submit(function(){if(confirm('Are you sure?')) {$.post('schoolFormItem',{data:$('#form').serialize()}, function(){$('#form #resetbtn').trigger('click');alert('success')})} else {alert('not posted');return false;}});
at the top, have:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
and wrap the code in:
jQuery(function(){ //our code goes here })