Sails.js : post text input and a file in the same time - javascript

I want to send a file and a hidden input text in a form.
<form method="POST" action="/api/import_xlsx_data" enctype="multipart/form-data">
<input type="file" name="xlsx_file_to_import" accept=".xlsx" required>
<input id="url" type="HIDDEN" name="url" value="url-value">
<input type="submit" value="Envoyer">
In my controller request.body is equal to {}.
When I remove enctype="multipart/form-data" it works for my text but not for my file.
To upload my file :
uploadFile.upload({saveAs : fileName, dirname : directoryName},function onUploadComplete(err, files) { ...............});
My controller :
importXLS: function (req, res) {
var uploadFile = req.file('xlsx_file_to_import');
//console.log(req.params()); -> send error params is not a function
console.log(req.body); // send me {}
console.log(req.param('url')); //send me undefined
...... }
More code on pastbin :
My view : view
My controller : controller

Using skipper as a body parser, you must send the text parameters before your file input.
Try this:
<form method="POST" action="/api/import_xlsx_data" enctype="multipart/form-data">
<input id="url" type="HIDDEN" name="url" value="url-value">
<input type="file" name="xlsx_file_to_import" accept=".xlsx" required>
<input type="submit" value="Envoyer">
For more information, please see the documentation for skipper : https://github.com/balderdashy/skipper#text-parameters

To retrieve your field, you need to use :
request.param("url")
And your file with
var file = request.file("xlsx_file_to_import");

Related

Laravel Query Ajax Update

Hello someone can you explain me how to update with Ajax!!
I use laravel
I want html and ajax only
My routes
Route::post('/post/homepage', 'AdminController#HomePage');
First, you should name your route:
Route::post('/post/homepage', 'AdminController#HomePage')->name('post.create');
Then, create your HTML form :
<form id="myForm">
{{csrf_field()}}
<label for="name">Article Name :</label>
<input id="name" name="articleName" type="text" required>
<button type="submit">Save</button>
</form>
Note: {{csrf_field()}} will generate the Form CSRF field. Or you can use instead :
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
I'll use jQuery to handle ajax:
<script type="text/javascript">
$(document).ready(function (){
$('#myForm').submit(function (e) {
e.preventDefault(); //Do not submit the form
var dataflow=$(this).serialize(); //Get the inputs value
$.post('{{route('post.create')}}', dataflow, function (data){ //post.create is the route name
//The request is done, do something with the server response
});
});
});
</script>

Convert HTML form into Angular POST request

I have this form in HTML and I am trying to convert it into a POST request using a frontend framework (either AngularJS or Angular2). The purpose of this form is to allow a client to subscribe to my wordpress blog. I am trying to convert it from PHP to Angular2 (if someone knows how to convert it to AngularJS I can convert to Angular2 from there). How would I do this? What would have to be in the body of the POST request vs query strings? I am having trouble understanding exactly what role each part of this form plays in the POST request.
EDIT: Just to clarify, I know how to use AngularJS and Angular2 and how to use the HTTP service in both of them. I am wondering how to convert the form into the body/query strings of the request.
<form action="/blog/" class="form-inline" role="form" method="POST" accept-charset="utf-8" id="subscribe-blog">
<!-- add hidden inputs for wordpress jetpack widget -->
<input type="hidden" name="action" value="subscribe" />
<input type="hidden" name="source" value="http://www.mywebsite.com/blog/" />
<input type="hidden" name="sub-type" value="widget" />
<input type="hidden" name="redirect_fragment" value="blog_subscription-2" />
<label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="email" class="form-control wide" id="exampleInputEmail" placeholder="Enter email address">
<button type="submit" name="jetpack_subscriptions_widget" class="btn btn-submit">Subscribe</button>
</form>
Would something along the lines of this be correct?
postForm() {
var body = {
action: 'subscribe',
source: 'http://www.mywebsite.com/blog/',
sub-type: 'widget',
redirect_fragment: 'blog_subscription-2',
email: 'clientEmailAddress#gmail.com', // don't think this is right
// not sure what to do with `jetpack_subscriptions_widget` attribute on the submit button either
};
return this.http.post(`http://www.mywebsite.com/blog/`, body)
.map(res => res.json())
.toPromise()
.then(data => {
return data;
});
}
You need to include angular.min.js and script.js
html
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name" />
<input type="submit" value="Send" ng-click="send(name)"/>
</body>
angular js code:
script.js
angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$http', funtion($scope, $http){
$scope.name = ""; // intially the input field is empty. As you type in the input field, the value will be updated here.
$scope.send = function(name){
alert(name);
var url = $scope.name; // try to enter an url
$http.get(url).then(function Success(res){
// here you can do anything with res
}, function Error(err){
alert(error);
})
}
}]);
Using angular, you split the application in parts:
view (html)
process some validations, etc (controller)
and do some model logic processing (service).
If you want to make the http request completely with angular to an endpoint (backend service, REST, or any other), usually in this case:
You use ng-model for each input field you need to send in the request, something like <input type="text" ng-model="val">. In your case your html would be something like:
html
<form ng-submit="send()" class="form-inline" role="form" accept-charset="utf-8" id="subscribe-blog">
<!--no need of 'action' attribute in the form since the post will be done using angular-->
<!-- add hidden inputs for wordpress jetpack widget -->
<input type="hidden" name="action" value="subscribe" ng-model="subscribe"/>
<input type="hidden" name="source" value="http://www.mywebsite.com/blog/" ng-model="source"/>
<input type="hidden" name="sub-type" value="widget" ng-model="widget" />
<input type="hidden" name="redirect_fragment" value="blog_subscription-2" ng-model="redirect_fragment"/>
<label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="email" class="form-control wide" id="exampleInputEmail" placeholder="Enter email address" ng-model="email">
<button type="submit" name="jetpack_subscriptions_widget" class="btn btn-submit">Subscribe</button>
</form>
Then in your controller you can process all your ng-model if needed and then pass those values to a (angular) service like this
//....angular controller
function send(){
//..collect params using the ng-models
var params = [];
params['email'] = $scope.email; //here you define 'email' as the name of the param received by the webservice as input !!!
myService.sendValues(params).then(function(data){
})
}
...where you would finally send the values to the php service like code below:
//... angular service
function sendValues(params){
var url = "miendpointurl/subscribe";
//... at this pont in params you have all those params you named like 'email', 'subscribe' and so on
return $http.post(url, params).then(function(response){
return response.data;
},
function(responseOnError){
return responseOnError.data;
}
}
Angular will interact with the php service transparently to you and will give you back the server response.

Upload image immediately after selected

My goal is to automatically upload an image to a folder when the file is selected. Following the answer on how do I auto-submit an upload form when a file is selected, I attempted to use Javascript's onchange event to automatically submit the form:
<?php
if(isset($_POST['upload']))
{
$ImageName = $_FILES['photo']['name'];
$fileElementName = 'photo';
$path = '../images/';
$location = $path . $_FILES['photo']['name'];
move_uploaded_file($_FILES['photo']['tmp_name'], $location);
}
?>
<form method="post" enctype="multipart/form-data">
<input type="file" name="photo" onchange="document.getElementById('upload').submit();" id="file" class="inputfile" />
<label for="file">Add Image</label>
<input type="submit" style="display: none;" name="upload" id="upload">
<input type="text">
<input type="submit">
</form>
When the file is selected, it's not automatically uploaded to a folder.
Note: I cannot use onchange="form.submit()" as I have multiple submit buttons in my form!
I think you could simply change it to:
document.getElementById('upload').click();
Or do something like this:
var button = document.getElementById('upload');
button.form.submit();

sails:Can't able to get textbox value while submitting a form with enctype="multipart/form-data"

I'm doing file upload in sails.js facing issue while submitting a form with enctype="multipart/form-data".
my file.ejs
<form id="uploadForm" enctype="multipart/form-data" action="/Employee/upload"
method="post">
<input type="file" name="uploadFile" />
<input type="text" name="Name" />
<input type="submit" value="submit"/>
</form>
my controller
upload: function (req, res) {
var UserName =req.param("Name");
console.log(UserName);
var uploadFile = req.file('uploadFile');
console.log(uploadFile);
uploadFile.upload(function onUploadComplete (err, files) {
if (err) return res.serverError(err);
console.log(files);
res.json({status:200,file:files});
});
}
I'm going to do create function in this same upload function for storing file name and UserName into DatabaseTable.but req.param("Name") always shows undefined.How can i get texbox value from this form.
I'm new to this sails.js.So please give any suggestions or sollutions for this bug.It will be very usefull for me.

How can I pass in this data into a form submit call (similar to data parameter for an ajax post)?

I have the following code that submits data to an asp.net-mvc controller action via jquery ajax
var queryString = "name=Joe&age=22&weight=200";
$.ajax({
url: '/MyController/Generate',
type: 'post',
data: queryString,
dataType: 'json'
});
this works fine and binds to the controller action parameter
public ActionResult Generate(MyParams p)
{
Console.Write(p.name);
Console.Write(p.age);
Console.Write(p.weight);
}
The issue now is that I need to change this from ajax to being a regular form post (I need to use regular form post as I am now returning a file from the controller action). I am trying to figure out how I can get that same querystring variable to get submitted as part of a regular form post (non ajax).
Is this possible?
try with html.beginform
#using (Html.BeginForm("Generate", "MyController","name=Joe&age=22&weight=200", FormMethod.Post, new { id = "frmMyForm" }))
{
// Your form elements
}
If you want that data to be fixed you can make a form like this:
<form action="/MyController/Generate" method="post">
<input type="hidden" name="name" value="Joe" />
<input type="hidden" name="age" value="22" />
<input type="hidden" name="weight" value="200" />
<input type="submit" />
</form>
Otherwise, if you want the data to be editable, it goes like this:
<form action="/MyController/Generate" method="post">
<input type="text" name="name" />
<input type="number" name="age" />
<input type="number" name="weight" />
<input type="submit" />
</form>

Categories