Update data in codeigniter 4 using update() or save() - Does not work because of a missing ID - codeigniter-4

I tried to update my database by using update(), but I don't have an id in it. Instead, I have a primary key named kwt.
Every time I try to execute update(), the query always refers to table.id instead of table.kwt
UPDATE `zakat` SET `nama` = :nama:, `alamat` = :alamat:, `telp` = :telp:, `jmlhjiwa` = :jmlhjiwa:, `berasbeli` = :berasbeli:, `ttlbeli` = :ttlbeli:, `berasbawa` = :berasbawa:, `ttlberas` = :ttlberas:, `maal` = :maal:, `berasinfaq` = :berasinfaq:, `infaq` = :infaq:, `fidyah` = :fidyah:, `penerima` = :penerima: WHERE `zakat`.`id` IN :zakat.kwt:
I need to make WHERE 'zakat'.'id' become WHERE 'zakat'.'kwt'
This is my controller:
public function update($kwt)
{
$beli = $this->request->getvar('berasbeli');
$this->zakatModel->update(
[
'kwt' => $kwt,
'nama' => $this->request->getVar('nama'),
'alamat' => $this->request->getVar('alamat'),
'telp' => $this->request->getvar('telp'),
'jmlhjiwa' => $this->request->getVar('jmlhjiwa'),
'berasbeli' => $this->request->getVar('berasbeli'),
'ttlbeli' => (int)$beli * 38000,
'berasbawa' => $this->request->getvar('berasbawa'),
'ttlberas' => $this->request->getvar('berasbawa') + $this->request->getVar('berasbeli'),
'maal' => $this->request->getVar('maal'),
'berasinfaq' => $this->request->getVar('berasinfaq'),
'infaq' => $this->request->getvar('infaq'),
'fidyah' => $this->request->getVar('fidyah'),
'penerima' => $this->request->getVar('penerima')
]
);
session()->setFlashdata('pesan', 'Upload Berhasil');
return redirect()->to('/');
}
And my view:
> <?= $this->extend('layout/template'); ?>
> <?= $this->section('content'); ?>
> <div class="container">
> <div class="row">
> <div class="col-8">
> <form action="/Pages/update/<?= $muzaki['kwt']; ?>" method="post">
> <?= csrf_field(); ?>
> <input type="hidden" name="kwt" value"<?= $muzaki['nama']; ?>">
> <div class="row mb-3">
> <label for="nama" class="col-sm-2 col-form-label">Nama</label>
> <div class="col-sm-10">
> <input type="text" class="form-control" id="nama" name="nama" autofocus value="<?= $muzaki['nama']; ?>">
> </div>
> </div>
> <div class="row mb-3">
> <label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
> <div class="col-sm-10">
> <input type="text" class="form-control" id="alamat" name="alamat" value="<?= $muzaki['alamat']; ?>">
> </div>
> </div>
> <div class="row mb-3">
> <label for="telp" class="col-sm-2 col-form-label">No.Telp</label>
> <div class="col-sm-10">
> <input type="text" class="form-control" id="telp" name="telp" value="<?= $muzaki['telp']; ?>">
> </div>
> </div>
> <br>
> <h3>Zakat Fitrah :</h3>
> <div class=" row mb-3">
> <label for="jmlhjiwa" class="col-sm-2 col-form-label">Anggota Keluarga</label>
> <div class="col-sm-10">
> <input type="number" class="form-control" id="jmlhjiwa" name="jmlhjiwa" value="<?= $muzaki['jmlhjiwa']; ?>">
> </div>
> </div>
> <div class="row mb-3">
> <label for="berasbeli" class="col-sm-2 col-form-label">Beras Dalam</label>
> <div class="col-sm-10">
> <input type="number" class="form-control" id="berasbeli" name="berasbeli" value="<?= $muzaki['berasbeli']; ?>">
> </div>
> </div>
> <div class="row mb-3">
> <label for="berasbawa" class="col-sm-2 col-form-label">Beras Luar</label>
> <div class="col-sm-10">
> <input type="number" class="form-control" id="berasbawa" name="berasbawa" value="<?= $muzaki['berasbawa']; ?>">
> </div>
> </div>
> <br>
> <h3>Zakat Maal :</h3>
> <div class="row mb-3">
> <label for="maal" class="col-sm-2 col-form-label">Zakat Maal</label>
> <div class="col-sm-10">
> <input type="number" class="form-control" id="maal" name="maal" value="<?= $muzaki['maal']; ?>">
> </div>
> </div>
> <br>
> <h3>Infaq :</h3>
> <div class="row mb-3">
> <label for="berasinfaq" class="col-sm-2 col-form-label">Beras</label>
> <div class="col-sm-10">
> <input type="number" class="form-control" id="berasinfaq" name="berasinfaq" value="<?= $muzaki['berasinfaq'];
> ?>">
> </div>
> </div>
> <div class="row mb-3">
> <label for="infaq" class="col-sm-2 col-form-label">infaq</label>
> <div class="col-sm-10">
> <input type="number" class="form-control" id="infaq" name="infaq" value="<?= $muzaki['infaq']; ?>">
> </div>
> </div>
> <div class="row mb-3">
> <label for="fidyah" class="col-sm-2 col-form-label">Fidyah</label>
> <div class="col-sm-10">
> <input type="number" class="form-control" id="fidyah" name="fidyah" value="<?= $muzaki['fidyah']; ?>">
> </div>
> </div>
> <br><br>
> <div class="row mb-3">
> <label for="penerima" class="col-sm-2 col-form-label">Penerima</label>
> <div class="col-sm-10">
> <input type="text" class="form-control" id="penerima" name="penerima" value="<?= $muzaki['penerima']; ?>">
> </div>
> </div><br><br>
> <button type="submit" class="btn btn-primary">Submit</button>
> </form>
> </div>
> </div>
> </div>
> <?= $this->endsection(); ?>
For my model, I didn't write anything yet because there is nothing written in my tutorial's model. When I use save() instead of update() it will create new data with the same primary key.

its need id of table to update data;
your are forgot id
look at my sample example
function dommy($id, $data){
$myModel = new MyModel();
$myModel->update( $id, $data);
}

When you update a record, you need to identify which record(s) you want to update. It should be a definition by a primary key like id or a definition by WHERE sql clauses with different columns.
It should be like on of the following:
$this->zakatModel->update($id, [
...
]);
// OR
$data = [
...
];
$data['id'] = 4 // for example. You can send with form or you can get from URL.
$this->zekatModel->save($data);
In save method, no need to put id value as a separate parameter. Because inside the method, it checks itself:
protected function save($data) {
...
$this->update($this->getIdValue($data), $data);
}
Happy coding..

Related

Netlify Forms Issue

Im having an issue with Netlify forms. I have created a multistep form with HTML and Javascript to show and hide the separate sections in the form. All the steps are in separate <div>'s and are all inside the <form>
The issue that I'm having is that in the Netlify UI where you can see the form data, all fields are showing up, but on the email notification only half the fields are being emailed.
<form
action="/"
class="form-page p-lg-5"
name="HelloVet Form"
method="POST"
data-netlify="true"
>
<input type="hidden" name="HelloVet Form" value="HelloVet Form" />
<!-- Pet 1 information form -->
<div class="p-2 p-md-5 step step1 active">
<h2 class="border-bottom">Client Information</h2>
<div class="row pt-2">
<div class="col">
<label for="FirstName" class="form-label">Name:</label>
<input
name="FirstName"
type="text"
class="form-control"
id="FirstName"
placeholder="Jane Doe"
name="FirstName"
/>
<label for="emailAddress" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="emailAddress"
placeholder="name#example.com"
name="email"
/>
<label for="street-address" class="form-label">Street:</label>
<input
type="text"
class="form-control"
id="street-address"
placeholder="123 Main Street"
name="street-address"
/>
<label for="state" class="form-label">State:</label>
<input
type="text"
class="form-control"
id="state"
placeholder="State"
name="state"
/>
</div>
<div class="col">
<label for="petReferredBy">Referred by:</label>
<select
class="form-select"
id="petReferredBy"
name="petReferredBy"
required
>
<option selected>Select One</option>
<option value="facebook">Facebook</option>
<option value="google">Google</option>
<option value="nextdoor">NextDoor</option>
<option value="internet">Internet Search</option>
<option value="instagram">Instagram</option>
<option value="grommer">Mobile Groomer</option>
<option value="instagram">Previous Client</option>
<option value="friend">Referred by Friend</option>
<option value="vet">Vet Hospital</option>
<option value="yelp">Yelp</option>
</select>
<label for="phoneNumber" class="form-label">Phone</label>
<input
type="tel"
class="form-control"
id="phoneNumber"
placeholder="(555) 555-1234"
name="phoneNumber"
/>
<label for="city" class="form-label">City:</label>
<input
type="text"
class="form-control"
id="city"
placeholder="City"
name="city"
/>
<label for="zip" class="form-label">Zip:</label>
<input
type="text"
class="form-control"
id="zip"
placeholder="Zip"
name="zip"
/>
</div>
</div>
<!-- Pet 1 information form -->
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName">Pets Name:</label>
<input
type="text"
class="form-control"
id="petName"
placeholder="Pets Name"
name="petName"
/>
</div>
<div class="col">
<label for="breed">Breed:</label>
<input
type="text"
class="form-control"
id="breed"
placeholder="Breed"
name="breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species">Species:</label>
<select class="form-select" id="species" name="species">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender">Gender:</label>
<select class="form-select" id="gender" name="gender">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay">Neutered/Spayed:</label>
<select class="form-select" id="spay" name="spay">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight"
name="weight"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age"
name="age"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday"
name="birthday"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet"
name="pastVet"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords">Can we request records?:</label>
<select class="form-select" id="medRecords" name="medRecords">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile"
id="formFile"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason"
name="reason"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly"
id="isFriendly"
value="Checked"
/>
<label class="form-check-label" for="isFriendly">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite"
id="willBite"
value="Checked"
/>
<label class="form-check-label" for="willBite">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide"
id="willHide"
value="Checked"
/>
<label class="form-check-label" for="willHide">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle"
id="needsMuzzle"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive"
id="aggressive"
value="Checked"
/>
<label class="form-check-label" for="aggressive">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation"
id="sedation"
value="Checked"
/>
<label class="form-check-label" for="sedation">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands"
id="extraHands"
value="Checked"
/>
<label class="form-check-label" for="extraHands">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto"
name="petPhoto"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share"
name="share"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-add-pet">Add Pet</p>
</div>
</div>
<!-- Pet 2 information form -->
<div class="p-2 p-md-5 step step2">
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName2">Pets Name:</label>
<input
name="petName2"
type="text"
class="form-control"
id="petName2"
placeholder="Pets Name"
/>
</div>
<div class="col">
<label for="breed2">Breed:</label>
<input
name="breed2"
type="text"
class="form-control"
id="breed2"
placeholder="Breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species2">Species:</label>
<select class="form-select" name="species2" id="species2">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender2">Gender:</label>
<select class="form-select" name="gender2" id="gender2">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay2">Neutered/Spayed:</label>
<select class="form-select" name="spay2" id="spay2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight2" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight2"
name="weight2"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age2" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age2"
name="age2"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday2" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday2"
name="birthday2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet2">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet2"
name="pastVet2"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords2">Can we request records?:</label>
<select class="form-select" id="medRecords2" name="medRecords2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile2" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile2"
id="formFile2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason2">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason2"
name="reason2"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly2"
id="isFriendly2"
value="Checked"
/>
<label class="form-check-label" for="isFriendly2">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite2"
id="willBite2"
value="Checked"
/>
<label class="form-check-label" for="willBite2">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide2"
id="willHide2"
value="Checked"
/>
<label class="form-check-label" for="willHide2">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle2"
id="needsMuzzle2"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle2">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive2"
id="aggressive2"
value="Checked"
/>
<label class="form-check-label" for="aggressive2">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation2"
id="sedation2"
value="Checked"
/>
<label class="form-check-label" for="sedation2">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands2"
id="extraHands2"
value="Checked"
/>
<label class="form-check-label" for="extraHands2">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto2" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto2"
name="petPhoto2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share2">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share2"
name="share2"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-prev-pet">Previous Pet</p>
<p class="btn btn-primary full-width btn-add-pet">Next Pet</p>
</div>
</div>
<!-- Pet 3 information form -->
<!-- Pet 4 information form -->
<!-- submit button -->
<div class="row p-md-5">
<div class="col">
<div class="row p-3">
<button
type="submit"
class="btn btn-primary full-width"
id="btn-submit"
>
Submit
</button>
</div>
</div>
</div>
</form>
const steps = Array.from(document.querySelectorAll('form .step'))
const addPetBtn = document.querySelectorAll('form .btn-add-pet')
const prevPetBtn = document.querySelectorAll('form .btn-prev-pet')
const form = document.getElementsByClassName('form-page ')
addPetBtn.forEach((button) => {
button.addEventListener('click', (e) => {
changeStep('next')
scrollTo(0, 0)
})
})
prevPetBtn.forEach((button) => {
button.addEventListener('click', () => {
changeStep('prev')
scrollTo(0, 0)
})
})
function changeStep(btn) {
let index = 0
const active = document.querySelector('form .step.active')
index = steps.indexOf(active)
steps[index].classList.remove('active')
if (btn === 'next') {
index++
} else if (btn == 'prev') {
index--
}
steps[index].classList.add('active')
scrollTo(0, 0)
}

Trouble trying to store an image and store the information in the database table

I have set up a new form to allow someone to add a profile for who a user will manage.
Its a pretty simple form with 4 fields, name, avatar, sport and description
<form method="POST" action="{{ route('add') }}">
#csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right"
for="avatar"
>
Avatar
</label>
<div class="col-md-6">
<input class="form-control #error('name') is-invalid #enderror" value="{{ old('name') }}"
type="file"
name="avatar"
id="avatar"
>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Sport') }}</label>
<div class="col-md-6">
<select name="sport" id="sport" class="form-control #error('name') is-invalid #enderror" name="name" value="{{ old('name') }}">
<option value="Football">Football</option>
<option value="Cricket">Cricket</option>
<option value="Hockey">Hockey</option>
<option value="Basketball">Basketball</option>
</select>
#error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="description" class="col-md-4 col-form-label text-md-right">{{ __('Description') }}</label>
<div class="col-md-6">
<input id="description" type="textarea" class="form-control #error('description') is-invalid #enderror" name="description" required>
#error('description')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Save') }}
</button>
</div>
</div>
</form>
</div>
The controller I have added is as follows
public function create()
{
//dd(request());
$attributes = request()->validate([
'name' => 'required',
'avatar' => ['file'],
'sport' => 'required',
'description' => 'required'
]);
if (request('avatar'))
{
$attributes['avatar'] = request('avatar')->store('avatars');
}
Players::create([
'user_id' => auth()->id(),
'name' => $attributes['name'],
'avatar' => $attributes['avatar'],
'sport' => $attributes['sport'],
'description' => $attributes['description']
]);
return redirect('/home');
}
Every time I go to submit the form I get a 302 and it returns back to the add form.
If I hardcode a value for 'avatar' => $attributes['avatar'] it adds the record to the table fine, except for the file will not upload into the director.
I am working on my local machine.
Any help would be appreciated
As you can see from here, you need first to get the file form the request:
$attributes['avatar'] = $request->file('avatar')->store('avatars');
// ^^^^^^^^^^^^^^^^^ -- missing
It looks as if I hadnt set the right things up on the form.
Still have issues with storing the files but would like to try and resolve that myself so that I can learn by doing.
I appreciate everyone's help

Angular 4 email Contact form

I'm pretty new to Angular and have been tasked to complete a "Contact Us" form to allow customers to send emails through the web form.
The HTML:
<div class="content-section">
<div class="container">
<div class="row">
<div class="">
<h2 class="intro-title">Contact Us</h2>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<div class="col-lg-6 spacer">
<div class="fadeIn-1">
<p>
<strong>Contact us</strong>
<br />
111.222.3333
<br />
information#mysite.com
</p>
</div>
<br />
<div class="fadeIn-2">
<p>
<strong>Office 1</strong>
<br />
Our street address
<br />
City, state, zip
</p>
</div>
<br />
<div class="fadeIn-3">
<p>
<strong>Office 2</strong>
<br />
street address
<br />
City, state, zip
</p>
</div>
</div>
<fieldset>
<!-- Form Name -->
<legend>Send us a message</legend>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">First Name</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-1">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">E-Mail</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-2">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">Phone #</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-3">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(801)222-3333" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Subject</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Message</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-5">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea rows="9" class="form-control" name="comment" placeholder="Message">
</textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Send
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
This is this the component:
import { Component } from '#angular/core';
import { trigger, state, style, transition, animate } from '#angular/animations';
import { slideInOutAnimation, fadeInAnimation } from '../_animations/index';
#Component({
selector: 'contact-page',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
animations: [slideInOutAnimation, fadeInAnimation, trigger('slideInOut', [
state('in', style({
transform: 'translate3d(0, 0, 0)'
})),
state('out', style({
transform: 'translate3d(100%, 0, 0)'
})),
transition('in => out', animate('400ms ease-in-out')),
transition('out => in', animate('400ms ease-in-out'))
]),
],
host: {
'(window:scroll)': 'updateHeader($event)',
'[#slideInOutAnimation]': '',
'[#fadeInAnimation]': ''
}
})
export class ContactComponent {
title = 'app';
isScrolled = false;
currPos: Number = 0;
startPos: Number = 0;
changePos: Number = 0;
menuState = 'out';
constructor() { }
updateHeader(evt) {
this.currPos = (window.pageYOffset || evt.target.scrollTop) - (evt.target.clientTop || 0);
if (this.currPos >= this.changePos) {
this.isScrolled = true;
} else {
this.isScrolled = false;
}
}
}
I've looked at options such as "nodemailer" and I just can't seem to figure out how it all works.
I need the email to be sent to our email address when a customer clicks the submit button. Any suggestions?
Also, I'm not really sure what else is needed to get help, so if you need anything else, I am happy to post it up.

How do I upload a file with reactjs without using multipart/form-data?

I am using Stormpath API and building a web app on top of its React/Express boilerplate. How do I implement without the multipart/form-data option? I've tried using multer but it doesn't work without first specifying the option.
Here's the code snippet for the update profile page. The UserProfilePage component will become a form tag in HTML.
export default class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.state = {resume: 'No Resume Selected'};
this.changeResume = this.changeResume.bind(this);
}
changeResume(e) {
var str = e.target.value;
var n = str.lastIndexOf('\\');
var result = str.substring(n + 1);
this.setState({resume: result});
}
render() {
return (
<DocumentTitle title="Update Profile">
<div className="container">
<div className="row">
<div className="col-xs-12">
<h3>Update Profile</h3>
<hr />
</div>
</div>
<div className="row">
<div className="col-xs-12">
<UserProfileForm>
<div className='sp-update-profile-form'>
<div className="row">
<div className="col-xs-12">
<div className="form-horizontal">
<div className="form-group">
<label htmlFor="givenName"
className="col-xs-12 col-sm-4 control-label">Name</label>
<div className="col-xs-12 col-sm-4">
<input className="form-control" id="givenName" name="givenName" placeholder="Name"
required="true"/>
<input className="form-control" id="surname" name="surname"
style={{display: 'none'}}/>
</div>
</div>
<div className="form-group">
<label htmlFor="email" className="col-xs-12 col-sm-4 control-label">Email</label>
<div className="col-xs-12 col-sm-4">
<input className="form-control" id="email" name="email" placeholder="Email"
required="true"/>
</div>
</div>
<div className="form-group">
<label htmlFor="resume"
className="col-xs-12 col-sm-4 control-label">Resume</label>
<div className="col-xs-12 col-sm-4">
<label className="btn btn-default btn-file">
Browse<input key="resume" id="resume" name="resume"
type="file" style={{display: 'none'}}
onChange={this.changeResume}/>
</label>
<span id="resume_filename"
className="control-label pull-right">{this.state.resume}</span>
</div>
</div>
<div className="form-group">
<label htmlFor="coverletter"
className="col-xs-12 col-sm-4 control-label">Cover
Letter</label>
<div className="col-xs-12 col-sm-4">
<textarea className="form-control" id="coverletter"
name="coverletter" rows="10"/>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-4 col-sm-4">
<p className="alert alert-danger" spIf="form.error"><span
spBind="form.errorMessage"/></p>
<p className="alert alert-success" spIf="form.successful">
Profile Updated.</p>
<button type="submit" className="btn btn-primary">
Update
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</UserProfileForm>
</div>
</div>
</div>
</DocumentTitle>
);
}
You can try encoding the image using base64 and send it to API as a string.
You can achieve that by using eg. this https://www.npmjs.com/package/base64-img

Express fails to find resources in case of parameterized route. What am I missing?

In my express app I have a separate file for middlewares. I used express.static to make the resources available to the app. Code from middlewares.js...
app.use(express.static('public'));
app.use(express.static('node_modules/vue/dist'));
app.use(express.static('node_modules/bootstrap/dist/css'));
app.use(express.static('node_modules/bootstrap/dist/js'));
app.use(express.static('node_modules/multiple.js'));
app.use(express.static('node_modules/chart.js/dist'));
It works fine for all the routes. However, when I try to define a parameterized route, and render a template this way, it fails to load up the resources. Express fails to find CSS/JS/Image files from those statics. What am I missing here? Here is my code for the route..
app.get('/invoices/:id', app.authenticated, (req, res) => {
Invoices.find({_id: req.params.id}, (err, invoice) => {
if (err) {
res.json({error: err});
}
res.render('invoicesCreate');
});
});
Updated: The View file
{{#section 'classes'}}has-navigation page-dashboard{{/section}}
{{#section 'body-classes'}}-fluid{{/section}}
<div class="row" id="invoicer">
<div class="col-xs-12 col-md-6">
Fill your details and get live preview in the right side
<form class="" action="/invoices" method="post" enctype="multipart/form-data">
<div class="">
<div class="invoiceform-logo-container">
<input type="file" name="profilelogo" id="fileinput" accept="image/*" v-on:change="updateImage()">
<img v-bind:src="logo" alt="" />
</div>
<div class="invoiceform-number"></div>
<div class="invoiceform-currency"></div>
</div>
<div class="divider"></div>
<div class="">
Your Name / Company Name
<textarea name="company_name" rows="8" cols="40" v-model="from"></textarea>
Client Name / Company Name
<textarea name="client_name" rows="8" cols="40" v-model="to"></textarea>
\{{date_title}}
<input type="date" name="start_date" v-model="date">
\{{due_date_title}}
<input type="date" name="end_date" v-model="due_date" v-bind:min="date">
\{{balance_title}} \{{balance}}
<div class="input-group">
<span class="input-group-addon">$</span>
<input name="end_date" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="invoiceform-itemlist" v-on:focusout="checkToRemove()">
<div class="">
\{{item_header}}
\{{quantity_header}}
\{{unit_cost_header}}
\{{amount_header}}
</div>
<div class="" v-for="item in items">
<input type="text" name="items[1][item_name]" v-model="item.head">
<input type="number" name="items[1][item_quantity]" v-model="item.quantity" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_rate]" v-model="item.rate" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_amount]" v-model="item.amount">
</div>
<button type="button" name="button">Add Item</button>
</div>
<div class="divider"></div>
<div class="">
\{{subtotal_title}} \{{subtotal}}
\{{tax_title}}
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" v-model="tax">
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> %
</span>
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> F
</span>
</div>
<div id="discount" v-if="fields.discount">
Discount <input type="number" name="" v-model="discounts">
</div>
<div id="shipping" v-if="fields.shipping">
Shipping <input type="number" name="shipping" v-model="shipping">
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="discount" v-model="fields.discount"> \{{discounts_title}}
</label>
<label class="btn btn-primary">
<input type="checkbox" name="shipping" v-model="fields.shipping"> \{{shipping_title}}
</label>
</div>
</div>
<div class="divider"></div>
<div class="">
Total <input type="number" name="name" v-model="total" min="0">
\{{amount_paid_title}} <input type="number" name="total" v-model="amount_paid" min="0" v-bind:max="total">
</div>
<div class="divider"></div>
<div class="">
\{{notes_title}}
<input type="text" name="name" v-model="notes">
\{{payment_terms_title}}
<input type="text" name="name" v-model="terms">
<button type="submit" name="button">Save Now</button>
<button type="button" name="button">Download PDF</button>
</div>
</form>
</div>
<div class="col-xs-12 col-md-6 hidden-sm-down"></div>
</div>
{{#section 'script'}}
window.invoice = {{{json defaultInvoice}}}
console.log({{{json defaultInvoice}}})
{{/section}}

Resources