My goal is to upload a file and insert data into a database table with ajax using formdata. I can do both separately. Or at least, I can use formdata to upload a file and I can use ajax to insert data into a database, but putting it together has proven difficult. The tutorial for this code seemed to indicate it would do it, and based on what I understand, the ajax is processing the entire form, but it's only uploading the file. I'm not having any issue with that and unfortunately, that's what most of the questions and tutorials I'm finding seem to be directed towards.
I think the issue is with my php insert code. Should I be inserting differently because of how the data is passed through ajax? Or am I more lost than that and just think I'm passing it all through ajax? I feel like I'm so close now, but I can't figure out what I'm doing wrong.
Thank you for any help.
The form and ajax:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<form name="multiform" id="multiform" action="upload.php" method="POST" enctype="multipart/form-data">
Name: <input type="text" name="dname" /> <br/>
Age :<input type="text" name="age" /> <br/>
Image :<input type="file" name="photo" /><br/>
<input type="submit" value="Ajax File Upload" />
</form>
<script>
//Callback handler for form submit event
jQuery(document).ready(function() {
$("#multiform").submit(function(e)
{
var formObj = $(this);
var formURL = formObj.attr("action");
var formData = new FormData($(this)[0]);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{ alert(data)
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault(); //Prevent Default action.
});
$("#multiform").submit(); //Submit the form
});
</script>
The php:
<?php
$username="...";
$password="...";
$database="...";
$target = "...";
$target = $target . time() . '_' . basename( $_FILES['photo']['name']);
$File = time() . '_' . basename($_FILES['photo']['name']);
$name = $_POST['dname'];
$age = $_POST['age'];
mysql_connect(localhost,$username,$password);
#mysql_select_db($database) or die( "Death");
print_r($_POST);
print_r($_FILES);
mysql_query("INSERT INTO wp_demo('name','age','File')VALUES('$name','$age','$File')");
if(isset($_FILES["photo"]))
{
//Filter the file types , if you want.
if ($_FILES["photo"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["photo"]["tmp_name"],$target);
echo $_FILES['photo']['name'] . " is now available";
}
}
?>
EDIT: Nevermind. I still don't know what's wrong here, but it ultimately just needs to work in wordpress. I got it to work there with this:
global $wpdb;
if($wpdb->insert('wp_demo',array(
'name' => $name,
'age' => $age,
'File' => $File
))===FALSE) {
echo "error";
}
else {
echo "success";
}
Now I just need to figure out why it submits on page load...
Related
Using Joomla:
My problem is when I submit the button, ajax send an empty data array back to my client. Debbuging in the console shows me that datas in the header but the preview and response values are empty.
Here is my code (I am using a modal form from bootstrap).
HTML in my default script:
<form action="<?php echo JRoute::_('index.php?option=com_addproduct&view=addproducts'); ?>" method="post" name="modalMessageForm" id="modalMessageForm" enctype="multipart/form-data">
<input type="file" id="message-image-upload" accept="image/*" style="display:none;" name="message-image-upload">
<textarea class="form-control message-textarea" id="message-textarea" placeholder="Nachricht..." name="new-message" rows="4"></textarea>
<button type="button" id="button-close-message" class="btn btn-default btn-block btn-message-close" style="display:none; margin-top:5px;"><?=JText::_( 'COM_ADDPRODUCT_MODAL_MESSAGES_CLOSE')?></button>
</form>
JQuery / Ajax:
$(document).on("submit", "#modalMessageForm", function(e)
{
var form = $('#modalMessageForm').get(0);
e.preventDefault();
var formData = new FormData(form);
for(var pair of formData.entries()) {
console.log(pair[0]+ ', '+ pair[1]);
}
$.ajax({
crossDomain: true,
type: "POST",
url: "index.php?option=com_addproduct&task=sendMessages&format=json",
data: formData,
dataType: "json",
processData: false
})
.done(function(data, textStatus, jqXHR){
console.log('Message: '+data.new-message+' PicName: '+data.img);
})
});
Here my controller.php:
public function sendMessages()
{
JResponse::setHeader('Content-Type', 'application/json', true);
$app = JFactory::getApplication();
$input = $app->input;
$new-message = $input->getString('new-message', '', 'RAW');
$img = $_FILES['message-image-upload']["name"];
$img = JFile::makeSafe($img);
$results=array(
'new-message' => 'new-message',
'img' => $img
);
echo json_encode($results);
$app->close();
}
I got the datas / variables in the console log.
it is:
new-message: null,
img: null
trying to set contentType: false will give me an 500 error.
Thank you very much
That´s the info from my network
enter image description here
I figure something out.
It´s the URL in my ajax command.
When I am using a normal url like
url: 'upload.php'
that will work and then I can set the
contentType: false,
But this is not safety enought.
I just want to use this url
url: "index.php?option=com_addproduct&task=sendMessages&format=json",
But then I got the error message that the view is not found. That´s very strange.
I'm trying to post form data to a php file that will then handle a mysql request. But before I do the mysql, I'm trying to connect to the php file.
The request is Cross-Domain.
When i submit the form, i get the error: {"readyState":4,"status":200,"statusText":"success"}
You can see the test page here: http://jonathan-tapia.mybigcommerce.com/store-locator/
form code:
<div class="map-search">
<h1>Give us your zip code. We'll tell you where to find us.</h1>
<div id="map-form">
<form id="lookup-form" action="http://dev.visioncourse.com/customers/baldguy/index.php" method="post">
<p>Within
<select id="distance" name="distance">
<option value="10">10</option>
<option selected="selected" value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
miles of
<input id="zipcode" type="text" name="postalcode" value="" size="8" />
<input id="lookup" type="submit" value="Look Up" />
</p>
</form>
</div>
</div>
<div class="map-results"> </div>
updated JS:
<script type="text/javascript">// <![CDATA[
//submit form
$('#lookup-form').submit(function(event) {
event.preventDefault();
var formdata = $(this);
var link = formdata.attr('action');
var distance = $('#distance').val();
var zipcode = $('#zipcode').val();
console.log('.\n..\n...\n....\nSubmitting Form\n....\n...\n..\n.');
$.ajax({
crossDomain: true,
type: 'POST',
url: link,
data: {
'distance': distance,
'postalcode': zipcode
},
dataType: 'jsonp',
error: function(data) {
console.log('error: ' + data);
},
success: function(data) {
console.log('success: ' + data);
},
xhrFields: {
withCredentials: true
}
});
});
// ]]>
updated php file:
<?php
$arr = array();
$distance = $_POST['distance']
$zip = $_POST['postalcode'];
if(isset($distance) && isset($zip)) {
array_push($arrr, {'d': $distance, 'z': $zip});
}
echo json_encode($arr);
?>
error i'm receiving from console:
GET http://dev.visioncourse.com/customers/baldguy/index.php?callback=jQuery17203092896034941077_1451698154204&distance=25&postalcode=85251 jquery.min.js:4
EDIT:
The php file will get the distance and zip code from the form and connect to a mysql database for a google maps store locator. so when a person submits the radius and the zip code it will display results. but all of this will be on the php file.
The file doing the form submission will submit the form, wait for the php to do it's work, then display the php file with the results
Try it with data: {"distance": distance, "zipcode": zipcode},.
In your code you insert the value of the variables twice instead of a name and a value.
Also, you need to send the zipcode with the name of 'postalcode'. Otherwise your phpscript wouldn't find it.
you can try this way:
javascript:
<script>
var formdata = $(this);
var link = formdata.attr('action');
var distance = $('#distance').val();
var zipcode = $('#zipcode').val();
$.ajax({
type: 'GET',
url: link,
data: {"distance": distance,"postalcode": zipcode},
async: false,
jsonpCallback: 'jsonp_callback',//name of function returned from php
contentType: "application/json",
dataType: 'jsonp',
success: function(r) {
console.log(r);
},
error: function(e) {
alert(e.message);
}
});
</script>
php:
<?php
$arr = array();
$distance = $_GET['distance'];//sample 123
$zip = $_GET['postalcode'];//sample 65455
if(isset($distance) && isset($zip)) {
$arr = array('d'=> $distance, 'z'=> $zip);
}
$json = 'jsonp_callback(';
$json .= json_encode($arr);
$json .= ');';
echo $json;
?>
response:
jsonp_callback({"d":123,"z":65455});
I am supposed to upload images using using Ctrl keys for which I am using Ajax, but the problem is that while uploading the image names in the database successfully I am not able to upload them in the folder under the name images
I have the following code which is able to upload my images using ajax on database but unable to upload images in the folder
<script>
function showChar(e){
if(e.ctrlKey && e.charCode == 98){
e.preventDefault();
var j = $('#fl').click();
if(j){saveImage();}
}
}
function saveImage(){
//var abc = $('#form1').serialize();
//alert(abc);return false;
var fl = $('#fl').val();
if(fl != ''){
alert('t');
$.ajax({
type: 'post',
url: 'sent.php',
data: 'fl='+fl,
success:function(msg){
}
});
//$.ajaxFileUpload();
}
}
</script>
</head>
<body onkeypress="showChar(event);">
<form enctype="multipart/form-data" method="post" id="form1">
<input type="file" name="fl" id="fl" value=""/>
<input type="button" name="submit" id="submit" value="Submit" onclick="saveImage();"/>
</form>
and the query as
$fl = $_REQUEST['fl'];
$name = $_FILES['fl']['name'];
$temp = $_FILES['fl']['tmp_name'];
move_uploaded_file($temp, 'images/'.$fl);
$query = "INSERT INTO tbl_browse (fld_name) VALUES ('$fl')";
$res = mysql_query($query);
if(mysql_num_rows($res)>0){ return 'U'; }
Try this method
https://stackoverflow.com/a/24839628/1640577
check question and answer
$.ajax({
type: 'post',
url: 'sent.php',
data: 'fl='+fl,
processData: false,
contentType: false ,
success:function(msg){
}
});
I have a login page, that sends a ajax request to the server when someone tries to log in. The ajax, goes to the server, cause they get logged in I've been able to confirm. But the problem is it seems my jQuery isn't receiving the JSON.
The function in my controller is:
public function login(){
$this->load->model('users_model');
if((!!$this->input->post('email')) || (!!$this->input->post('password'))){
$ret = $this->users_model->login($this->input->post('email'), $this->input->post('password'));
echo json_encode(array('status' => "OK", 'msg' => 'Logged in!')); //also tried return
}else{
echo json_encode(array('status' => 'FAIL', "msg" => 'Invalid Email or Pass'));
}
}
and the AJAX function is:
<script type="text/javascript">
$(document).ready(function() {
$("#login").ajaxForm(function(json) {
alert(json);
if(json.status == true) {
alert(json.msg);
//window.location = '<?php echo base_url(); ?>';
} else {
alert("Problem");
$(".error_msg").html(json.msg);
};
});
});
</script>
if I alert the json variable, it's blank, and if I do json.msg it say undefined. So... what do I have to do to get this to give the callback, a json object, or an object of any kind? Please explain it so I understand the problem, not just how to fix it. Thanks a lot!
EDIT:
Here's the form too:
<span class="error_msg"></span></br>
<form id="login" action="<?php echo base_url(); ?>users/login" method="POST" enctype="multipart/form-data">
Email: <input name="email" type="text"/></br>
Password: <input type="password" name="password"></br>
<input type="submit"/>
</form>
Ah, I think I understand.
Is this the plugin you are using? http://www.malsup.com/jquery/form/#api
In that case, use ajaxSubmit, not ajaxForm.
Other examples online do something like this:
$(document).ready(function() {
$('#login').submit(function() {
$("#login").ajaxSubmit({
success: function(json) {
alert(json);
if(json.status == true) {
alert(json.msg);
//window.location = '<?php echo base_url(); ?>';
} else {
alert("Problem");
$(".error_msg").html(json.msg);
}
}
});
return false;
});
});
How do I use fileuploader.js in Codeigniter with csrf, in ajax?
I am using the images_crud library http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeigniter/
I keep getting
The action you have requested is not allowed.
Added..
I have added the create method in the controller :
/**
* pages form
*/
public function create(){
if(!isset($this->data['output'])){
$this->data = array_merge($this->data,
array( 'output' => '' ,
'js_files' => array() ,
'css_files' => array()
)
);
}
//-------------------------
//for file uploading
$image_crud = new image_CRUD();
$image_crud->set_primary_key_field('id');
$image_crud->set_url_field('filename');
$image_crud->set_table('news')
->set_image_path('public/documents');
$output = $image_crud->render();
$this->data['output']=$output->output;
$this->data['js_files']=$output->js_files;
$this->data['css_files']=$output->css_files;
//-------------------------
//display
$this->load->view('templates/admin_header');
$this->load->view('admin/index.php');
$this->load->view('admin/create_pages.php', $this->data);
$this->load->view('templates/admin_footer');
}
And the create_pages in view :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<?php echo validation_errors()?>
<?php
foreach($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>
<?php echo form_open(site_url('admin/pages/save'),array('style'=>'width:700px;'))?>
<label>
Title
<input type='text' name='title' value='<?php echo #$title?>' />
</label>
<br/>
content :
<textarea name="content" id="content" >
<?php echo #$content?>
</textarea>
<br/>
<?php echo $output?>
<input type='submit' name='submit' value='save' />
</form>
I have added image_crud.php and image_moo.php in the library.
I am getting 500 Internal Server Error with the url being
http://example.com/mole/pages/create/upload_file?qqfile=1355936206.9151.jpg
which I wanted to be
http://example.com/mole/admin/pages/create/upload_file?qqfile=1355936206.9151.jpg
I am not sure why the fileuploader.js is taking a different url for uploading.
Added
Well, I have not made much changes to the codings avilaible from http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeigniter/
$(function(){
<?php if ( ! $unset_upload) {?>
createUploader();
<?php }?>
loadColorbox();
});
function loadColorbox()
{
$('.color-box').colorbox({
rel: 'color-box'
});
}
function loadPhotoGallery(){
$.ajax({
url: '<?php echo $ajax_list_url?>',
dataType: 'text',
data:$('input[type=hidden]').eq(1).prop('name')+':'+$('input[type=hidden]').eq(1).prop('value'),
beforeSend: function()
{
$('.file-upload-messages-container:first').show();
$('.file-upload-message').html("<?php echo $this->l('loading');?>");
},
complete: function()
{
$('.file-upload-messages-container').hide();
$('.file-upload-message').html('');
},
success: function(data){
$('#ajax-list').html(data);
loadColorbox();
}
});
}
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span><?php echo $this->l("upload-drop-area");?></span></div>' +
'<div class="qq-upload-button"><?php echo $this->l("upload_button");?></div>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
fileTemplate: '<li>' +
'<span class="qq-upload-file"></span>' +
'<span class="qq-upload-spinner"></span>' +
'<span class="qq-upload-size"></span>' +
'<a class="qq-upload-cancel" href="#"><?php echo $this->l("upload-cancel");?></a>' +
'<span class="qq-upload-failed-text"><?php echo $this->l("upload-failed");?></span>' +
'</li>',
action: '<?php echo $upload_url?>',
debug: true,
onComplete: function(id, fileName, responseJSON){
loadPhotoGallery();
}
});
}
function saveTitle(data_id, data_title)
{
$.ajax({
url: '<?php echo $insert_title_url; ?>',
type: 'post',
data: {primary_key: data_id, value: data_title},
beforeSend: function()
{
$('.file-upload-messages-container:first').show();
$('.file-upload-message').html("<?php echo $this->l('saving_title');?>");
},
complete: function()
{
$('.file-upload-messages-container').hide();
$('.file-upload-message').html('');
}
});
}
here you have two problems.
First: you need to set the csrf token with every ajax request. which is simple.
Second: you need to set the csrf token for when uploading. which is impossible.
But sure you have other alternatives here. DON'T Worry!.
each method like edit title or delete etc.. you can solve it like this:
in your list.php at the very first:
$this->set_css('assets/image_crud/css/fileuploader.css');
$this->set_css('assets/image_crud/css/photogallery.css');
$this->set_css('assets/image_crud/css/colorbox.css');
$this->set_js('assets/image_crud/js/jquery-1.8.2.min.js');
$this->set_js('assets/image_crud/js/jquery-ui-1.9.0.custom.min.js');
$this->set_js('assets/image_crud/js/fileuploader.js');
$this->set_js('assets/image_crud/js/jquery.colorbox-min.js');
$CI =& get_instance(); // create codeigniter reference instance.
Then:
function saveTitle(data_id, data_title)
{
$.ajax({
url: '<?php echo $insert_title_url; ?>',
type: 'post',
data: {primary_key: data_id, value: data_title,
'<?php echo $CI->security->get_csrf_token_name(); ?>':'<?php echo $CI->security->get_csrf_hash(); ?>'},
beforeSend: function()
{
$('.file-upload-messages-container:first').show();
$('.file-upload-message').html("<?php echo $this->l('saving_title');?>");
},
complete: function()
{
$('.file-upload-messages-container').hide();
$('.file-upload-message').html('');
}
});
}
simple solution. just adding the csrf_token_name and csrf_hash_value.
now for the second problem I said that it's impossible because the qq.fileuploader
uses $_GET and not $_POST, so the property params they offer just adds a get argument for you which will not be parsed by csrf_verify() method.
how to solve it: simply go to your config/config.php and add the following code to the end of it:
if(stripos($_SERVER["REQUEST_URI"],'/upload_file') === FALSE)
{
$config['csrf_protection'] = TRUE;
}
else
{
$config['csrf_protection'] = FALSE;
}
which will disable the uploading csrf checking for you ( it will be disabled just when uploading ) and it will re-enable it with the next request.
I have tested this code and it's working 100%. :)
Update: the main problem consists of that the developer of image_crud has not considered multipart encoded request ( as I can see from the new results). and he is using an old version of fineuploader. the problem is solved by fineuploader 3.0+ but not yet in image_crud which is making problems when using multipart encoded request.
Hope that I helped.
The author of image_crud has just pushed out a new version that utilizes the latest version of Fine Uploader. Problems with IE and other issues you may have run into should be fixed in the newest version. You should be able to make use of csrf tokens now without minimal reconfiguration.