I have a form with a file input field, I created a label for the input and made the input display none. and whenever I upload pictures it automatically submits the form. But the problem is it return the wrong ID with the link if I submit like this, if I just have a normal submit buttons it works.
#foreach($wedstrijden as $wedstrijd)
<a class="verslag-manager-button" data-toggle="modal" data-target="#verslagModal{{ $wedstrijd->id }}" href="">
<p>Verslag </p>
</a>
--modal #verslagModal{{ $wedstrijd->id }}
<form action="/manager/fotos/upload/{{ $wedstrijd->id }}" class="upload" method="post" enctype="multipart/form-data">
<label class="btn btn-default btn-success" for="my-file-selector">
<input onchange="this.form.submit()" id="my-file-selector" multiple name="sourceImage[]" type="file" style="display:none;">
Upload Foto
</label>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input style="display: none" type="submit" value="Upload Image" name="submitBtn">
</form>
--modal
#endoforeach
In my route file I have the following route
Route::post('manager/fotos/upload/{id}', 'managerController#postFotoUpload');
But in my controller it always returns the latest id.
if I inspect my code in the browser the form url shows /manager/fotos/upload/16 but if I dump the $id in my controller it return 17.
public function postFotoUpload($id, Request $request)
{
foreach($request->file('sourceImage') as $foto)
{
$file = $foto;
$destinationPath = 'img/' . $id . '/';
$filename = $file->getClientOriginalName();
$file->move($destinationPath, $filename);
$foto = new Foto();
$foto->wedstrijd_id = $id;
$foto->foto = $filename;
$foto->save();
}
Session::flash('upload', true);
Return Redirect::to('/manager');
}
Related
I have a form to edit product_Details, after I press save button it run updateProduct.php which is update product_detail table successfully, the problem is : success message displayed on a new page, I just want it to be displayed beside save button, please advice and I thank you very much
here is code of my form:
<form action = "updateproduct.php">
<!-- \\\\\\\\\\\\\\\\\\\START Product Name\\\\\\\\\\\\\\\\\\\\ -->
<div class="mb-3 mt-3">
<label for="product_id" class="form-label">Product Name</label>
<?php $strquery2="SELECT Name, ID FROM products WHERE ID='". htmlspecialchars($row['product_id'])."'";
$result2 = mysqli_query($conn, $strquery2);
$row2 = mysqli_fetch_array($result2)
?>
<input type="text-area" class="form-control" name="productname" value= <?= htmlspecialchars($row2['Name']) ?>>
<input type="text" class="form-control" name="ID" value= <?= htmlspecialchars($row2['ID']) ?> hidden>
</div>
<!-- \\\\\\\\\\\\\\\\\\\END Product Name\\\\\\\\\\\\\\\\\\\\ -->
<div class="mb-3 mt-3">
<label for="discription" class="form-label">Discription</label>
<input type="text" class="form-control" name="discription" value= "<?= htmlspecialchars($row['discription']) ?>">
</div>
<input type="submit" value="Save">
</form>
Bellow is my updateproduct.php file
<?php $mysqli = new mysqli("localhost", "root", "", "test")
or die('Error connecting to MySQL server.');
$id=mysqli_real_escape_string($mysqli, $_REQUEST['ID']);
$comments=mysqli_real_escape_string($mysqli, $_REQUEST['discription']);
$query= "UPDATE product_details SET
discription = '$comments'
WHERE product_id='$id'";
if(mysqli_query($mysqli, $query)){
echo '<script>alert("Product added successfully")</script>';
}
else{
echo "ERROR: Hush! Sorry $sql. "
. mysqli_error($conn);
}
// Close connection
mysqli_close($mysqli);
?>
I'm trying to upload multiple images to my database and then show it on another page, but when I upload them, I can see only one image and not the rest.
This is my html
<div class="form-group">
<label for="inputGroupFile01">Upload foto's</label>
<input type="file" name="image" class="form-control-file" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01" multiple>
</div>
and this is my controller to save it
if ($request->hasFile('image')) {
$filenameWithExt = $request->file('image')->getClientOriginalExtension();
$filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
$extension = $request->file('image')->getClientOriginalExtension();
$fileNameToStore = $filename . '_' . time() . '.' . $extension;
$request->file('image')->move('storage/images', $fileNameToStore);
} else {
$fileNameToStore = 'noimage.jpg';
}
And this is my code to show it
<a download="retourmelding_{{$retour->firmaname}}" href="{{ asset('storage/images/'.$retour->images) }}" title="Foto">
<img alt="Foto" src="{{ asset('storage/images/'.$retour->images) }}"></a>
So uploading works perfectly, I also made my input multiple, and when I choose images only the first image is uploaded to my database, and that is the only picture I can see.
Where is the problem?
1) Add enctype="multipart/form-data" to your form tag
<form method="post" action="YOUR URL GOES HERE" enctype="multipart/form-data">
{{csrf_field()}}
//...
</form>
2) The name of your file input must be image[]
<input type="file" name="image[]" class="form-control-file" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01" multiple>
3) Backend Validation
$this->validate($request, [
'image' => 'required',
'image.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
4) Insert multiple images in the database
//...
if($request->hasfile('image'))
{
foreach($request->file('image') as $image)
{
$name=$image->getClientOriginalName();
$image->move(public_path().'/images/', $name);
$data[] = $name;
}
}
$myModel = new App\MyModel();
$myModel->filename = json_encode($data);
$myModel->save();
//...
I’m using a library called floating-tabs.js which is being used to create floating navigational buttons: here’s an example of what the layout looks like
<floating-tabs>
//this is my button
<floating-tabs-item icon="ion-android-arrow-dropright-circle" click="goNext(data)"></floating-tabs-item>
</floating-tabs>
<ion-content>
<form name=“formName” ng-submit="goNext(data)">
***form stuff
</form>
</ion-content>
How can I submit/validate the form without having my button inside the form tags
Thanks guys
here i am using simple change password form.
<form name="changepasswordform" novalidate>
<input type="password" placeholder="New Password" class="reset-inputs" name="newpassword" ng-keyup="compare()" ng-model="changePassword.newpassword" maxlength="10" required/>
<span style="color:red" ng-show="submitted && changepasswordform.newpassword.$error.required">Required</span>
</form>
<button type="button" class="reset-submit" ng-click="changepassword(changepasswordform.$valid,changePassword)">Change Password</button>
it consist button out side the form
and please use the script in your controller
$scope.submitted = false;
$scope.changepassword = function(formValidStatus, formdata) {
if (!formValidStatus) {
$scope.submitted = true;
} else {
$scope.submitted = false;
}
}
in the script i am checking form is valid or not if form is not valid i am showing error messages by using submitted variable from script.
This works for me
This is my form my HTML
<form id = "myform" name="myform" ng-submit="saveForm()" novalidate >
<div class="input-group">
<span class="input-group-addon"> <img src="/icon.png" alt=""/> </span>
<input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="Username" autofocus required>
</div>
<span ng-show="formInvalid">Please enter username</span>
<button type="submit" class="btn btn-default" id="saveBtn"> Save </button>
</form>
And inside the controller I have
$scope.formInvalid = false;
$scope.saveForm = function(){
if($scope.myform.username.$invalid){
$scope.formInvalid = true;
}
if($scope.myform.$valid){
//....save it....
At first the form has no error message, if I hit "Save" the "Please enter username" appears, so far, all good.
But if I click on the form field to type a username, the error message does not go away. Even if I finish typing and click somewhere else, the error message still does not go away.
I also try
if(!$scope.myform.username.$valid){
$scope.formInvalid = true;
}
and I also try together
if(!$scope.myform.username.$valid){
$scope.formInvalid = true;
}
if($scope.myform.username.$valid){
$scope.formInvalid = false;
}
and the problem is still there. How can I debug? How do I fix this?
Thanks
You don't have to introduce and maintain a new variable ($scope.formInvalid) for managing the state of your form. Angular maintains the valid / invalid state of the form for you.
As your form is named myform, just show the message about the username based on the value of myform.username.$invalid, and save the form only if myform.$valid is true:
HTML
<span ng-show="myform.username.$invalid">Please enter username</span>
JS
$scope.saveForm = function () {
if ($scope.myform.$valid) {
// save the form
}
};
See fiddle
you can try a watch event,
$scope.$watch('myform.$valid', function(n, o) {
if(n) {
$scope.formInvalid = false;
} else {
$scope.formInvalid = true;
}
});
But i might even be a better idea, if you start using validators.
you do not trigger a change to form invalid property anywhere, I suggest you solve this issue with angulars built in validators and ng-messages module, which will listen to changes on you're form inputs and notify when the inputs are valid or invalid and notify the warning text.
Another approach you can take is use the ng-change directive on the inputs you want to listen to changes in and trigger and update on the form invalid property according to the inputs validity.
example : (taken from the official angular website )
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
i think this is the most elegant way to do it.
i am trying to use the File upload feature in my application ..
i am having a Form with many fields of type Text,textarea and including File upload FIeld.
I have kept a Submit button at the end of the Form which on click will submit the actual value of the textbox /textarea and even the value for the Field of type File upload.
How to get the actual file that is uploaded and to save it in a location so that i can view the uploaded file later on ..
The code that i have used is,
Edit :
i have added enctype in the Form tag but not working while submission
<form method="post" action="/FormBuilder/index.php/forms/submit/93/13" id="ResultSubmit" enctype="multipart/form-data">
<div class="input file">
<label for="276">Choose Ur File To Upload</label>
<input type="file" value="" style="width: 400px;" id="276" name="Choose ur file to upload"/>
</div><br/>
<div class="input text">
<label for="277">Name</label>
<input type="text" value="" style="width: 200px;" id="277" name="Name"/>
</div> <br/>
<div class="submit"><input type="submit" value="submit"/></div>
</form>
Action Submit in the Cakephp controller is
function submit($formid = null,$fillerid=null)
{
$this->data['Result']['form_id']=$formid;
$this->data['Result']['submitter_id']=$fillerid;
$this->data['Result']['submitter']=$this->Session->read('filler');
echo "submitter: ".$this->Session->read('filler');
$results=$this->Form->hasResults($this->data);
echo http_build_query($_POST);
if(empty($results)){
foreach ($_POST as $key => $value):
if(is_array($value)){
$value = implode('', $_POST[$key]);
$this->data['Result']['value']=$value;
}
else{
$this->data['Result']['value']=$value;
}
$this->data['Result']['form_id']=$formid;
$this->data['Result']['submitter_id']=$fillerid;
$this->data['Result']['label']=Inflector::humanize($key);
$this->data['Result']['submitter']=$this->Session->read('filler');
$this->Form->submitForm($this->data);
endforeach;
$this->Session->setFlash('Your entry has been submitted.');
$this->Invite->updateAll(array('Invite.filled'=>"'Yes'"),array('Invite.id'=>"$fillerid"));
}else{
$this->Session->setFlash('You have already filled the Form .');
}
}
In /app/models/upload.ctp:
function beforeSave()
{
if (!empty($this->data['Upload']['File']) && is_uploaded_file($this->data['Upload']['File']['tmp_name']))
{
if (!move_uploaded_file($this->data['Upload']['File']['tmp_name'], 'some_location/' . $this->data['Upload']['File']['name']))
{
return false;
}
$this->data['Upload']['name'] = $this->data['Upload']['File']['name'];
$this->data['Upload']['type'] = $this->data['Upload']['File']['type'];
$this->data['Upload']['size'] = $this->data['Upload']['File']['size'];
}
return true;
}
In /app/controllers/uploads_controller.php:
function add()
{
if (!empty($this->data))
{
if ($this->Upload->save($this->data))
{
$this->Session->setFlash('File upload successful.');
$this->redirect('/uploads');
}
}
}
In app/views/uploads/add.ctp:
echo $form->create('Upload');
echo $form->input('Upload.File', array('type' => 'file'));
echo $form->submit('Upload the file');
echo $form->end();