I have a form with some input data and also dropzone in it. The form sending and successfully storing to the DB. But i have some problems.
1) Im using Laravel and i have validate method after sending the form and when i get erros (422) like the name input is required, after this i cannot submit form for the second time. How can i fix this?
2) I cant send form not choosing the images. How can i send form when i dont want to upload images?
And is there a normal solution to not append all formData to Dropzone instead sending them directly to Laravel?
DropzoneJS init:
jQuery(function () {
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
url: '',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
addRemoveLinks: true,
//paramName: 'image',
//hiddenInputContainer: true,
maxFiles: 100,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
// The setting up of the dropzone
init: function () {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
document.querySelector("button[type=submit]").addEventListener("click", function (e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function (data, xhr, formData) {
function fData(input_name, selector) {
var values = jQuery(selector)
.map(function () {
return jQuery(this).val();
}).get();
for (var i = 0; i < values.length; i++) {
formData.append(input_name, values[i]);
}
}
formData.append('name', jQuery('input[name="name"]').val());
fData('phone[]', '.phone');
formData.append('work_time', jQuery('input[name="work_time"]').val());
formData.append('metro', jQuery('input[name="metro"]').val());
formData.append('country', jQuery('input[name="country"]').val());
formData.append('address', jQuery('input[name="address"]').val());
formData.append('place', jQuery('input[name="place"]').val());
formData.append('lat', jQuery('input[name="lat"]').val());
formData.append('lng', jQuery('input[name="lng"]').val());
fData('properties[]', '.properties:checked');
fData('we_accept[]', '.we_accept:checked');
});
this.on("successmultiple", function (files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function (files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
console.log(response)
});
}
}
});
In the back i have this:
public function postAddOffice(Request $request)
{
$this->validate($request, [
'name' => 'required',
'phone' => 'required',
'work_time' => 'required'
]);
if ($request->ajax()) {
$images = [];
if ($request->file) {
foreach ($request->file as $file) {
$extension = $file->extension();
$imageName = str_random(15) . '.' . $extension;
$path = base_path() . '/public/uploads/admin/images/offices/';
$file->move($path, $imageName);
array_push($images, '/images/offices/' . $imageName);
}
}
$office = new Office([
'name' => $request->name,
'phone' => $request->phone,
'work_time' => $request->work_time,
'metro' => $request->metro,
'country' => $request->country,
'address' => $request->address,
'place' => $request->place,
'lat' => $request->lat,
'lng' => $request->lng,
'properties' => $request->properties,
'we_accept' => $request->we_accept,
'image' => $images ? $images : '/img/no-img.png',
]);
$office->save();
return response()->json(['request' => $request->all()]);
}
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire