Best way to upload files using Ajax and before submitting - javascript

I have a form with multiple fields but also a file upload. I am able to upload multiple files.
I also know that it is possible to upload files with AJAX.
So I would like to upload my files using ajax while i'm filling in every other field. But how would I link the already uploaded images then? And also prevent the images to be uploaded again?
This is the form:
<form id="form_validation" method="POST" action="{{route('storeexpense')}}" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" name="description" required>
<label class="form-label">Omschrijving</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="number" class="form-control" name="amount" required>
<label class="form-label">Bedrag</label>
</div>
</div>
<div class="form-group form-float">
#foreach ($types as $type)
#if ($type->id === 1)
<input name="transactiontype" type="radio" id="rdio{{$type->id}}" value="{{$type->id}}" checked />
<label for="rdio{{$type->id}}">{{$type->description}}</label>
#else
<input name="transactiontype" type="radio" id="rdio{{$type->id}}" value="{{$type->id}}" />
<label for="rdio{{$type->id}}">{{$type->description}}</label>
#endif
#endforeach
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="datepicker form-control" name="date" placeholder="Please choose a date..." required>
<!-- <label class="form-label">Datum</label> -->
</div>
</div>
<div class="form-group demo-tagsinput-area">
<div class="form-line">
<input type="text" class="form-control" id="tagsinput" data-role="tagsinput" placeholder="Labels" name="tags" required>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
#if (count($errors) > 0)
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
#endif
<input type="file" name="attachments[]" multiple class="custom-file-control"/>
</div>
</div>
<button class="btn btn-primary waves-effect" type="submit">SAVE</button>
</form>
This is the PHP code that saves the information from the form:
public function store(UploadRequest $request)
{
// Save new transaction in database
$transaction = new Transaction;
$transaction->description = $request->description;
$transaction->amount = $request->amount;
$input = $request->date;
$format = 'd/m/Y';
$date = Carbon::createFromFormat($format, $input);
$transaction->date = $date;
$transaction->transactiontype_id = $request->transactiontype;
$transaction->user_id = Auth::id();
$transaction->save();
// Put tags in array
$inputtags = explode(",", $request->tags);
// Loop through every tag exists
// EXISTS: get ID
// NOT EXISTS: Create and get ID
foreach ($inputtags as $inputtag)
{
$tag = Tag::firstOrCreate(['description' => $inputtag]);
$transaction->tags()->attach($tag->id); //Put the 2 ID's in intermediate table ('tag_transaction')
}
//Check if there are files
if (!is_null($request->attachments))
{
//Loop through every file and upload it
foreach ($request->attachments as $attachment) {
$filename = $attachment->store('attachments');
// Store the filename in the database with link to the transaction
Attachment::create([
'transaction_id' => $transaction->id,
'path' => $filename
]);
}
}
Thanks,
Bart

It sounds like you want to make a fancy form that starts uploading the file as soon as you choose it and meanwhile the user can continue filling the rest of the form. If so, I'd do it like this:
Implement your main text/data form, eg.
<form method="POST" action="/save-data-endpoint.php">
<input name="email" type="text" />
<button type="submit>Submit</button>
</form>
Next to it, a form for the images. eg.
<form method="POST" class="file-upload-form" action="/save-file.php">
<input name="my-file" type="file" />
<!-- note that we wont show a submit button -->
</form>
For the user, it all looks like the same form but clicking the submit button will send only the data to the save-data-endpoint.php. Now we need some js to control this madness (I'll use jQuery for brevity). But you can use FileReader api in js, ajax progress tracking to make it even fancier. See https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications for more.
$(function(){ // run when document is ready
// listen when the input changes (when a file is selected)
$('.file-upload-form').on('change', function(e){
// file has been selected, submit it via ajax
// show some kind of uploading indication, eg. a spinner
$.ajax({
type:'POST',
url: $(this).attr('action'),
data: new FormData(this),
cache:false,
contentType: false,
processData: false,
success:function(data){
// the save-file.php endpoint returns an id and/or a url to the saved/resized/sanitized image
console.log(data.id, data.url);
// we then inject this id/url, into the main data form
var $hiddenInput = $('<input type="hidden" name="uploads[]" value="'+data.id+'">');
$('.main-form').append($hiddenInput);
// show a thumbnail maybe?
var $thumbnail = $('<img src="'+data.url+'" width="20" height="20" />');
$('.main-form').append($thumbnail);
// hide spinner
// reactivate file upload form to choose another file
$('.file-upload-form').find('input').val('');
},
error: function(){
console.log("error");
}
});
});
});
Your backend will get the images as they are selected, one by one. You then save them and return an id and/or a url to the image to be used in the success handler in js. After adding some images your main form should look something like this:
<form method="POST" action="/save-data-endpoint.php">
<input name="email" type="text" />
<button type="submit>Submit</button>
<input type="hidden" name="uploads[]" value="x">
<img src="...x.jpg" width="20" height="20" />
<input type="hidden" name="uploads[]" value="y">
<img src="...y.jpg" width="20" height="20" />
</form>
Now when the user fills the remaining fields and clicks submit, your server will get all the data along with an array called uploads which contains all the image ids/paths you have already saved. You can now store this data and relate it to the files.
I wont go deeper on the backend side as it can be implemented on any language. In summary the basic flow would be:
send files one at a time to a save file endpoint that returns a file identifier (can be an id, hash, full path to image, etc)
js injects those ids into the main form
the main form is submitted to a save data endpoint that returns a success or error message and stores + relates all the data in your preferred method of storage.
Hope it helps!

Related

How to get php page to receive ajax post from html page

I have a very simple form that has an input field for first name. I captured the form data and transmitted it via ajax to a PHP page using the standard jQuery posting method. However, I am not able at all get any responses from the PHP page that any data was captured on the server-side. I am not sure what I have done wrong or what is missing.
Here is my code.
Form:
<form action="process.php" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="First name">
<div class="d-none" id="firstName_feedback">
<p>Please enter a first name.</p>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Here is my Jquery Ajax call:
<script>
$(document).ready(function() {
$('form').submit(function(event) {
var formData = $("form").serialize();
console.log(formData);
$.ajax({
type: 'POST',
url: 'form.php',
data: formData,
dataType: 'json',
encode: true
})
.done(function(data) {
console.log(data);
});
event.preventDefault();
});
});
</script>
And here is my PHP page:
if(isset($_POST['formData']))
$ajaxData = ($_POST['formData']);
echo $ajaxData;
{
}
In your Ajax function, you're passing the contents of formData to the server, though not as formData but as their original input name.
In this case, you have:
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="First name">
The input's name is firstName, so you need to call $_POST['firstName'] instead of $_POST['formData'].
if (isset($_POST['firstName'])) {
$ajaxData = $_POST['firstName'];
echo $ajaxData;
}
The same applies for any other field you would have in your form, so for example, having another input with the name lastName means you'd have to call $_POST['lastName'] to access it.
There were also some misplaced brackets and parentheses in the PHP code which I accommodated above.

How to generate a QR code with templated data?

I'm currently using Express, Mustache and QRCode.js.
Currently, when editing a product from the database, a mustache template is used and the /id is added to the end of the URL to specify which product ID will be edited. On this edit page, at the bottom, I was able to create a QR code with QRCode.js that links to the current page. It is to be downloaded and printed on to a sticker, which will go on a shelf. That way, users can scan the QR code with their phone and subtract from the product inventory.
However, I'd really like to add the {{product.productId}}, {{product.Manufacturer}} and {{product.product.Sku}} on the right of that downloadable QR code. That way, they can easily be downloaded and go straight to a printer, instead of having to drop them in an editing program to add the information manually. This is my first back-end product. Would someone give me a roadmap on how to accomplish it?
Here is my code:
<pre>
<div class="generate">
<div class="generate_qrcode" id="output"></div>
</div>
<div class="qrcode__span">Right click to download as a .png</div>
<!-- <img class="QRCode" src="qrcode-encoding.png" /> -->
<script>
let qrcode = new QRCode("output", {
text: window.location.href,
width: 256,
height: 256,
colorDark : "#04243c",
colorLight : "#FFFFFF",
correctLevel : QRCode.CorrectLevel.H
});
</script>
<!-- HTML/Product Edit Field (on same page as above code) -->
<body class="product_edit">
<h2 class="ep__h2">Edit Product</h2>
<div class="ep">
<form class="ep__form"
action="/product_edit/{{product.productId}}" method="POST"
autocomplete="off">
<label for="productname" class="ep__label">Product Name:
</label>
<input type="text" name="product_name" class="ep__input"
placeholder="Product Name" value="{{product.productName}}">
<label for="manufacturer" class="ep__label">Manufacturer:
</label>
<input type="text" name="product_manufacturer"
class="ep__input" placeholder="Manufacturer" value=" .
{{product.productManufacturer}}">
<label for="product_size" class="ep__label">Size:</label>
<input type="text" name="product_size" class="ep__input"
placeholder="Size" value="{{product.productSize}}">
<label for="product_qty" class="ep__label">Quantity:
</label>
<button type="button" class="ep__qtyminus" value="-"
name="product_qty" field="product_qty">-</button>
<input type="number" name="product_qty"
class="ep__qtynumber" value="{{product.productQty}}">
<button type="button" class="ep__qtyplus" value="+"
name="product_qty" field="product_qty">+</button>
<label for="product_sku" class="ep__label--half">SKU:
</label>
<label for="product_minimum" class="ep__label--
half">Minimum:</label>
<input type="text" name="product_sku" class="ep__input--
half" placeholder="SKU" value="{{product.productSku}}">
<input type="number" name="product_minimum"
class="ep__input--half" placeholder="Minimum" value="
{{product.productMinimum}}">
<label for="product_color" class="ep__label--half">Color:
</label>
<label for="product_number" class="ep__label--half">Number:
</label>
<input type="text" name="product_color" class="ep__input--
half" placeholder="Color" value="{{product.productColor}}">
<input type="number" name="product_number"
class="ep__input--half" placeholder="Minimum" value=" .
{{product.productNumber}}">
<button class="ep__save" type="submit">Save</button>
</form>
</div>
</pre>
Typing here for more space:
Assuming you have access to the Express server, why can't you create a route that retrieves all products, and for each unique product, generates a little html that includes name, id, price, and QR code? Then express can compile all the HTML and send it to the browser.
app.get('/products/print_stickers', function(req, res, next){
// below is psuedo code
var products_array = database.getAllProductInfo();
res.render('print_page', {
products: products_array // pass data to mustahce template
});
})
Then in your print_page mustache file, you just loop over information we got from the server. If it contains data for all the products, then we can create the html stickers for every product on just one page!
var sticker_html = `
<ul>
{{#.}}
<li>
<div class="left_side">
${new QRCode("output", {
text: 'http://mywebsite/product/id/{{product_id}}', // using {{ mustache }} to insert product id
width: 256,
height: 256,
colorDark : "#04243c",
colorLight : "#FFFFFF",
correctLevel : QRCode.CorrectLevel.H
})}
</div>
<div class="right_side">
<p>{{name}}</p>
<p>{{date}}</p> // using {{ mustache }} to insert product information
<p>{{price}}</p>
</div>
</li>
{{/.}}
</ul>;
`;
Mustache.render(tmp, products_array);
So at this point, you'd go to this page, and the server would get the products, generate html for each unique item, send it to your browser, you print it, then use scissors to cut them up and post them where you need them. If you need to just print a single sticker, you can use an optional query param with the ID of the product, and say if product_id, then only get 1 product from DB, generate sticker html as normal.

prevent result, show through AJAX, after reload browser

I have a insert query through ajax. It is working correctly. But when I reload browser then result disappears from div section and if I insert form through ajax again then result is showing.
I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.
My first.php (html form) is:
<form class="reservation-form mb-0" action="" method="post" autocomplete="off">
<input name="name1" id="name1" class="form-control" type="text" placeholder="Enter Name" required aria-required="true">
<input name="age" id="age" class="form-control" required type="number" placeholder="Enter Age" aria-required="true">
<input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" >
<input type="button" class="pull-right btn btn-warning" value="Submit" id="submit">
</form>
Here data should be display:
<div class="col-md-5">
<div class="panel panel-primary" id="showdata">
<!-- Here is the results, but when reload browser then result disapper-->
</div>
</div>
AJAX is:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name1 = $("#name1").val();
var age = $("#age").val();
var chkArray=[];
$('.checkbox1:checked').each( function() {
chkArray.push($(this).val());
} );
var selected;
selected = chkArray.join(',') ;
if(selected.length > 1){
$.ajax( {
url:'firstcall.php',
type:'POST',
data:{name1: name1,age: age,namec: chkArray},
}).done(function(data){
$("#showdata").html(data);
});
}
else{
alert("Please at least one of the checkbox");
}
});
});
</script>
firstcall.php is:
<div class="panel panel-primary" id="showdata">
<?php
foreach($_POST['namec'] as $selected){
echo $selected;
$_SESSION['name1']=$_POST["name1"];
$_SESSION['age']=$_POST["age"];
echo $name1=$_SESSION['name1'];
echo $age=$_SESSION['age'];
$query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error());
}
?>
First of all fix your query to use MySQLi, instead of MySQL, check this or the PHP manual
Also don't ever add direct $_POST or $_GET variables into your mysql query, filter them first using mysqli_real_escape.
$name1 = mysqli_real_escape($link, $_POST["name1"]);
$age = mysqli_real_escape($link, $_POST["age"]);
After that, to show the data when the page reloads, you need to load the data with the page, easiest way to do that is just add in your HTML PHP tags with an echo command inside, adding your variables.
If I understand your question correctly, you want the Ajax result to also show on page load?
Right now you only execute the JS after a click (so on page load/relaod you will just see the html), you might want to execute it after page load aswell (so execute the script without the .click)
You could create a function once, and call it when the page is ready and on click.

AJAX post variables to current page via href onclick - Jquery Mobile/PHP

I am creating an application that utilizes JQuery Mobile and PHP, nothing crazy here. I am trying to update a $_POST[''] variable on the page I am currently viewing.
The user clicks on an "Issue_Title" to add "Issue_Txt" to that particular list. So I need a way to know which issue_title the user clicks on so I can add it to the right place. To solve that when I retrieve the issue_title from mySQL table I format like so (testTitle is just a placeholder for debugging...I want $row['issue_title'] there so I can distinguish which title was clicked):
echo "<li data-role='fieldcontain'>"."".$row['issue_title']."</li>";
So onclick it will run the below JS function:
function NewIssueTxt(issue_title)
{
var combined = {'issue_title' : issue_title};
combined = $('#HiddenIssueTxtForm').serialize() + '&' + $.param(combined);
$.ajax({type:'POST', url: 'NewRoundDetails.php', data: combined, success: function(response){ }});
return false;
};
I can see via Javascript Console that this is POSTing as expected when I click the listview link. This should give me a $_POST['issue_title'] that I can use to submit along with the issue_txt which is all captured in the below form...which is a popup form that also appears when the user clicks the Issue_Title href.
<div data-role="popup" id="popupNewIssueTxt" data-history='false' data-theme="a" class="ui-corner-all">
<form id="NewIssueTxtForm" action="/NewRoundDetails.php" onsubmit="return submit_popupNewIssueTxt();" method="post">
<div style="padding:10px 20px;">
<h3>Issue Text:</h3>
<label for="issue_txt" class="ui-hidden-accessible">Issue Text:</label>
<input type="text" name="issue_txt" id="issue_txt" value="" />
<label for="issue_title" class="ui-hidden-accessible">Issue Title</label>
<input type="hidden" name="issue_title" id="issue_title" value="<?php echo $_POST['issue_title']; ?>"/>
<label for="date" class="ui-hidden-accessible">Date:</label>
<input type="hidden" name="date" id="date" value="<?php echo $_POST['date']; ?>"/>
<label for="dept_name" class="ui-hidden-accessible">Department Name:</label>
<input type="hidden" name="dept_name" id="dept_name" value="<?php echo $_POST['dept_name']; ?>"/>
<label for="participants" class="ui-hidden-accessible">Participants:</label>
<input type="hidden" name="participants" id="participants" value="<?php echo $_POST['participants']; ?>"/>
<label for="issue_category" class="ui-hidden-accessible">Issue Category:</label>
<input type="hidden" name="issue_category" id="issue_category" value="Work Environment"/>
<button id="NewIssueTxtButton" form="NewIssueTxtForm" type="submit" data-theme="b">Add</button>
</div>
</form>
As mentioned I confirmed the JS function is working...except I still have no value for $_POST['issue_title']. What am I doing wrong? Is the JS function not submitted fast enough...so I click the Issue_title but my form is opened before the POST happens? If that's the case how else can I get the href clicked into a usable variable?
To reiterate: I'm populating a listview with data from a mySQL DB. I need a way of knowing which link or listview is clicked so I can POST it along with other form data.

Sending HTML form via AJAX to PHP server

I'm working on phonegap, basically its like making mobileapps crossplatform by using HTML, JS and CSS. On the device i currently have the JS and the HTML (form) in same document.
What I'm trying to do is to pass email and password to my server, and then process it there through a login. I've tested the login script on the server and it works with hardcoded data. So I'm guessing somewhere when sending the data from the device its failing.. I'm fairly new to JS too.
I tried to hardcode the data in the AJAX but it doesnt seem to work. Preferebly I would like to use something like var pdata = $('#form').serialize(); or something else if its better.
Any ideas?
EDIT: Forgot to say that the PHP on the server auto submits by using JS when $_POST is set (isset)
The form
<form id="form" onsubmit="dologin()">
<div class="form-group">
<label for="email">Epost</label>
<input type="email" class="form-control" name="email" value="" placeholder="Epost">
</div>
<div class="form-group">
<label for="password">Passord</label>
<input type="password" class="form-control" name="password" value="" placeholder="Passord">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember_me">
Husk meg
</label>
</div>
<button type="submit" class="btn btn-primary">Logg inn</button>
</form>
The javascript
<script>
function dologin() {
//var pdata = $('#form').serialize();
//alert(pdata);
$.ajax({
type: 'POST',
data: {email:"test#test.no",password:"test"},
url: 'LINK',
success: function(data) {
alert(data);
},
error: function() {
alert("error");
}
});
return false;
};
</script>
The PHP
<form id="form" method="post">
<!-- {{ Form::label('email', 'Email Address') }} -->
<div class="form-group">
<input type="text" name="email" value="<?php if(isset($_POST["email"])) echo $_POST['email'];?>">
</div>
<div class="form-group">
<!-- {{ Form::label('password', 'Password') }} -->
<input type="text" name="password" value="<?php if(isset($_POST["password"])) echo $_POST['password'];?>">
</div>
</form>
Are you able to hit your server via through phonegap?
If no then please check your config.xml for white list urls - change access control property to
access origin = "*"
Hopeful you will be able to hit your server with data.
You can use weinre to debug your app. That way you will be able to see if the request was placed from the app or not.
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

Categories

Resources