Develop Reference

Why does my form uploads the image again?

I am working on a Laravel 8 app with Jetstream and Inertia and I created a form that has two text fields and one image upload field. The problem is when I edit the resource and upload a new image everything works but when I try to save the resource again immediately after the first time it looks like it is uploading the image again even though the data after the first upload for the field is a URL to the image. The goal is to prevent the second image upload on the second edit as the image is the same - there is no change. If you reload the page after the first edit and save the data again it works fine there is no image upload.
I've uploaded a video here.
I assume the loading indicator below my bookmarks is somehow done by InertiaJS when making ajax requests. Or maybe it is doing a full page reload?
I've spend hours on this, googled various things, looked and tinkered with the code, read InertiaJS documentation and found nothing!
I am using S3 to upload the images to. Also, I am using Spatie's media-library package to handle the images.
here is my Edit page component:
<template>
<app-layout title="Edit author information">
<div>
<div class="max-w-7xl mx-auto py-5 sm:px-6 lg:px-8">
<div>
<create-or-update-author-form :author="author" method="PUT" :blank_avatar_image="$page.props.assets.blank_avatar_image"/>
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from '#/Layouts/AppLayout.vue'
import CreateOrUpdateAuthorForm from '#/Pages/Authors/Partials/CreateOrUpdateAuthorForm.vue'
export default {
props: ['sessions', 'author'],
components: {
AppLayout,
CreateOrUpdateAuthorForm,
},
}
</script>
here is my CreateOrUpdateAuthorForm component:
<template>
<jet-form-section #submitted="save">
<template #title>
<span v-if="method === 'POST'">Create new author</span>
<span v-else-if="method === 'NONE'">Viewing author</span>
<span v-else>Update author information</span>
</template>
<template #form>
<!-- Photo -->
<div class="col-span-6 sm:col-span-4">
<!-- Photo File Input -->
<input type="file" class="hidden"
ref="photo"
#change="updatePhotoPreview">
<jet-label for="photo" value="Photo" />
<!-- Current Photo -->
<div class="mt-2" v-show="! photo_preview">
<img v-if="photo_or_blank_image" :src="photo_or_blank_image" :alt="author.name" class="rounded-full h-20 w-20 object-cover">
</div>
<!-- New Photo Preview -->
<div class="mt-2" v-show="photo_preview">
<span class="block rounded-full w-20 h-20"
:style="'background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photo_preview + '\');'">
</span>
</div>
<jet-secondary-button v-if="method !== 'NONE'" class="mt-2 mr-2" type="button" #click.prevent="selectNewPhoto">
Select A New Photo
</jet-secondary-button>
<jet-secondary-button v-if="author.photo && method !== 'NONE' && !author_photo_is_blank" type="button" class="mt-2" #click.prevent="deletePhoto">
Remove Photo
</jet-secondary-button>
<jet-input-error :message="form.errors.photo" class="mt-2" />
</div>
<!-- Name -->
<div class="col-span-6 sm:col-span-4">
<jet-label for="name" value="Name" />
<jet-input id="name" type="text" class="mt-1 block w-full disabled:bg-gray-100" v-model="form.name" autocomplete="name" :disabled="disabled" />
<jet-input-error :message="form.errors.name" class="mt-2" />
</div>
<!-- Email -->
<div class="col-span-6 sm:col-span-4">
<jet-label for="bio" value="Bio" />
<jet-input id="bio" type="text" class="mt-1 block w-full disabled:bg-gray-100" v-model="form.bio" :disabled="disabled" />
<jet-input-error :message="form.errors.bio" class="mt-2" />
</div>
</template>
<template v-if="!disabled" #actions>
<jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<span v-if="method === 'POST'">Create</span>
<span v-else>Save</span>
</jet-button>
<progress-bar :progress="form.progress"/>
<jet-action-message :on="form.wasSuccessful" class="ml-3">
<span v-if="method === 'POST'">Created.</span>
<span v-else>Saved.</span>
</jet-action-message>
</template>
</jet-form-section>
</template>
<script>
import JetButton from '#/Jetstream/Button.vue'
import JetFormSection from '#/Jetstream/FormSection.vue'
import JetInput from '#/Jetstream/Input.vue'
import JetInputError from '#/Jetstream/InputError.vue'
import JetLabel from '#/Jetstream/Label.vue'
import JetActionMessage from '#/Jetstream/ActionMessage.vue'
import JetSecondaryButton from '#/Jetstream/SecondaryButton.vue'
import ProgressBar from '#/Shared/Elements/ProgressBar.vue'
import Utils from '#/Shared/Utils'
import Forms from '#/Shared/Forms'
export default {
components: {
JetActionMessage,
JetButton,
JetFormSection,
JetInput,
JetInputError,
JetLabel,
JetSecondaryButton,
ProgressBar,
},
props: {
author: {
type: Object,
default: {
id: null,
name: '',
bio: '',
photo: null,
}
},
blank_avatar_image: {
type: String,
default: null,
},
method: {
type: String,
default: 'POST',
},
disabled: {
default: false
}
},
data() {
return {
form: this.$inertia.form({
_method: this.method,
id: this.author.id,
name: this.author.name,
bio: this.author.bio,
photo: this.author.photo,
}),
formDetails: {
routes: {
store: route('authors.store'),
update: this.author.id
? route('authors.update', { author : this.author.id})
: null,
},
errorBag: 'createOrUpdateAuthor',
},
photo_preview: null,
}
},
methods: Forms,
computed: {
photo_or_blank_image() {
return this.author.photo ? this.author.photo : this.blank_avatar_image;
},
author_photo_is_blank() {
return Utils.isBlankAvatarImage(this.author.photo);
}
}
}
</script>
here is my Forms class:
var Forms = {
save() {
var self = this;
// if method is NONE don't submit form
if (this.method === 'NONE') {
return false;
}
if (this.$refs.photo && this.$refs.photo.files[0]) {
this.form.photo = this.$refs.photo.files[0];
}
var request = {
errorBag: this.formDetails.errorBag,
preserveScroll: true,
forceFormData: true,
};
var route = this.formDetails.routes.store;
if (this.method === 'PUT') {
route = this.formDetails.routes.update;
}
this.form.wasSuccessful = false;
this.form.post(route, request);
},
selectNewPhoto() {
this.$refs.photo.click();
},
updatePhotoPreview() {
const photo = this.$refs.photo.files[0];
if (! photo) return;
this.author.photo = photo;
const reader = new FileReader();
reader.onload = (e) => {
this.photo_preview = e.target.result;
};
reader.readAsDataURL(photo);
},
deletePhoto() {
this.author.photo = null;
this.form.photo = null;
this.photo_preview = this.blank_avatar_image;
this.clearPhotoFileInput();
},
clearPhotoFileInput() {
if (this.$refs.photo?.value) {
this.$refs.photo.value = null;
}
}
}
export default Forms;
here is my AuthorsController which handles the requests, I've only copied the edit and update methods as they are the only ones relevant:
<?php
namespace App\Http\Controllers;
use App\Actions\Zavoon\Authors\AuthorActions;
use App\Models\Author;
use Illuminate\Http\Request;
use Laravel\Jetstream\Jetstream;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Redirect;
use Inertia\Inertia;
class AuthorsController extends Controller
{
/**
* Show the form for editing the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function edit($id)
{
$author = Author::where('id', $id)
->where('team_id', Auth::user()->currentTeam->id)
->first();
if (!$author) {
abort(404);
}
return Inertia::render('Authors/Edit', ['author' => $author->id])
->with('author', $author);
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(Request $request, $id, AuthorActions $action)
{
$author = $action->update($request->all());
$success = 'Author information updated.';
session()->flash('success', $success);
return Redirect::route('authors.edit', ['author' => $author->id]);
}
}
here is my AuthorActions class which handles authors related logic:
<?php
namespace App\Actions\Zavoon\Authors;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;
use App\Models\Author;
use App\Rules\Rules;
use Illuminate\Validation\Rule;
class AuthorActions
{
/**
* Creates new author
*/
public function create(array $input)
{
if ($this->validate($input, 'create')) {
$user = Auth::user();
$input['user_id'] = $user->id;
$input['team_id'] = $user->currentTeam->id;
$author = new Author();
$author->fill($input);
$author->save();
$author->updatePhoto($input);
return $author;
}
return false;
}
/**
* Updates author
*
* #param array $input
* #return boolean|Author
*/
public function update(array $input)
{
if ($this->validate($input, 'update')) {
$author = Author::find($input['id']);
$author->fill($input);
$author->save();
$author->updatePhoto($input);
return $author;
}
return false;
}
/**
* Validates input
*/
public function validate(array $input, $type)
{
$user = Auth::user();
$rules = [
'name' => ['required', 'string', 'max:255'],
'bio' => ['required', 'string', 'max:4000'],
'photo' => Rules::photo($type),
];
if ($type === 'update') {
$rules['id'] = [
'required',
Rule::exists('authors')->where(function ($query) use ($input, $user) {
return $query
->where('id', $input['id'])
->where('team_id', $user->currentTeam->id);
}),
];
}
Validator::make($input, $rules)->validateWithBag('createOrUpdateAuthor');
return true;
}
}
here is my Rules class which gives me some of the validation rules:
<?php
namespace App\Rules;
use App\Rules\ImageOrLink;
class Rules
{
public static function photo($type = 'create')
{
if ($type === 'create') {
return ['nullable', self::mimes(), self::maxImageSize()];
} else {
return ['nullable', new ImageOrLink()];
}
}
public static function mimes()
{
return 'mimes:jpg,jpeg,png';
}
public static function maxImageSize()
{
return 'max:5120';
}
}
and finally here is my ImageOrLink rule which is used in validating the image uploads:
<?php
namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
use Illuminate\Support\Facades\Validator;
use App\Rules\Link;
class ImageOrLink implements Rule
{
/**
* Create a new rule instance.
*
* #return void
*/
public function __construct()
{
//
}
/**
* Determine if the validation rule passes.
* True if it is an image upload or a valid url.
*
* #param string $attribute
* #param mixed $value
* #return bool
*/
public function passes($attribute, $value)
{
if (Link::isLink($value)) {
return true;
} else {
$validator = Validator::make([
'image' => $value
], [
'image' => ['required', Rules::mimes(), Rules::maxImageSize()],
]);
if ($validator->fails()) {
return false;
}
return true;
}
return false;
}
/**
* Get the validation error message.
*
* #return string
*/
public function message()
{
return 'This needs to be an image upload or a link to an image.';
}
}
Any ideas appreciated! I really don't get why it's happening.
EDIT 1: It seems it is something to do with Inertia's Form helper. When the form is submitted once then the form.photo does not get updated with the new value. No idea why though.

The solution was strange, still don't know why exactly it happens. Maybe it is an Inertia bug. So, after the request was submitted successfully just do this:
this.form.photo = this.author.photo;
this goes in its own method in Forms.js and to repeat myself, it is called in the onSuccess callback.

php, Laravel 7 - Unable to receive data from AJAX request

I'm still a newbie and currently learning how to use Laravel 7.
My problem is, I tried to pass my data from the controller by using an AJAX request on
my child page. I noticed that when I tried to pass the data from my child page, the page won't
receive it but somehow it's working on a master page (where I didn't use any Blade directives).
I tried to dd() the data in the controller and it does show that there is data.
But it won't pass it to the child page. All the JS files and custom script that I push does
come out on the child page.
blade
code
index.blade.php (child page)
#extends('layouts.app')
#section('content')
<div class="container">
<div class="container mt-5">
<h2 class="mb-4">Laravel 7 Yajra Datatables Example</h2>
<table class="table table-bordered yajra-datatable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Batch</th>
<th class="text-center">Graduation Year</th>
<th class="text-center">Mobile</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
#endsection
#push('child-scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(function () {
var table = $('.yajra-datatable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('alumni-list') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'batch_year', name: 'batch_year'},
{data: 'graduation_year', name: 'graduation_year'},
{data: 'contact_no', name: 'contact_no'},
{
data: 'action',
name: 'action',
orderable: true,
searchable: true
},
]
});
});
</script>
#endpush
AlumniController.php
class AlumniController extends Controller
{
public function index(Request $request)
{
// dd(Profile::latest()->get());
if ($request->ajax()) {
$data = Profile::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = 'Edit Delete';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.users.index');
}
}
Alumni Route
Route::get('alumni', [
'uses' => 'AlumniController#index',
'as' => 'alumni-list'
]);
Thank you for your time, sir.

Solved it after MORE googling done.
Make sure to add defer inside your DataTable CDN.
Example:
<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>
Here's the link where I found the answer:
https://datatables.net/forums/discussion/50869/typeerror-datatable-is-not-a-function-datatable-laravel
For more understanding on why defer is added:
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

use Yajra\DataTables\Contracts\DataTable;
use Yajra\DataTables\Facades\DataTables;
please use this two line in your controller

how to solve "500 (Internal Server Error)" (Laravel - ajax)

I have this problem when trying to bring the data of a route through AJAX.
I want to make a Dynamic Select that according to the "Faculty" chosen, show the "programs" that belong to that faculty.
this is my route
Route::get('selectprogramas/{id}', 'SyllabusController#getProgramas');
This is the model of Programas
class Programa extends Model
{
protected $table = 'Programas';
protected $fillable = [ 'nombre', 'perfil_profesional', 'competencias', 'facultad_id',
'perfil_profesional'];
public function selectprogramas($id){
return Programa::Where('facultad_id', $id)->get();
}
}
this is the function in the controller
public function getProgramas(Request $request, $id){
if($request->ajax()){
$programas = Programa::selectprogramas($id);
return response()->json($programas);
}
}
these are the two select in the html, I use Laravel Collective
<div class="form-group col-9 font-weight-bold">
{{ Form::label('facultad', 'Facultades:') }}
{{ Form::select('facultad', $facultades, null, ['class' => 'form-control', 'id' => 'facultad']) }}
</div>
<div class="form-group col-9 font-weight-bold">
{{ Form::label('programa', 'Programas:') }}
{!! Form::select('programa', ['placeholder'=>'Selecciona'], null, ['id'=>'programa']) !!}
</div>
and this is my javascript
$("#facultad").change(function (event){
console.log("entre!!");
$.get("../selectprogramas/" + event.target.value + "" ,function(response, facultad){
$("#programa").empty();
for(i=0; i<response.length; i++){
$("#programa").append("<option>"+response[i].nombre+"</option>");
}
});
});
the error I have is this:

already solved!
I made this change in controller function
public function getProgramas(Request $request, $id){
if($request->ajax()){
$programas = Programa::where('facultad_id', $id)->get();
return response()->json($programas);
}
}

Symfony2 IvoryCKEditorBundle - CK Editor not showing

I am trying to display the CK Editor within my textarea form without success :(. I've already searched in github, symfony doc, IvoryCKEditorBundle etc. and still cannot figure out why it doesn't show for me.
I've installed:
Ivory\CKEditorBundle\IvoryCKEditorBundle(),
Ivory\FormExtraBundle\IvoryFormExtraBundle()
assets
Here is my config:
ivory_ck_editor:
enable: true
autoload: false
async: true
base_path: bundles/ivoryckeditor/
js_path: bundles/ivoryckeditor/ckeditor.js
default_config: ~
configs:
my_config:
toolbar: full
uiColor: "#000000"
extraPlugins: "wordcount"
name: []
plugins:
name:
path: ~
filename: ~
styles:
name: []
Here is a class with the form:
class MatchScheduleType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('content', CKEditorType::class,
array('label' => 'content',
'required' => false,
'config_name' => 'my_config',
'trim' => true
)
)
->add('save', SubmitType::class, array('label' => 'saveButtonValue'));
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'fcHlinskoBundle\Entity\MatchSchedule',
I have a simple entity MatchSchedule..
Then i try to pass the form from controller:
class DefaultController extends Controller
{
public function indexAction()
{
$post = new MatchSchedule();
$form = $this->createForm(MatchScheduleType::class, $post, array(
'action' => $this->generateUrl('homepage'),
'method' => 'POST',
));
return $this->render('fcHlinskoBundle:Default:index.html.twig', array(
'form' => $form->createView(),
));
}
// ...
And display it inside a twig:
{{ form_start(form) }}
{{ form_javascript(form) }}
{{ form_end(form) }}
And i got this result in html code:
<form name="match_schedule" method="post" action="/app_dev.php/">
<script type="text/javascript">
if (CKEDITOR.instances["match_schedule_content"]) { delete CKEDITOR.instances["match_schedule_content"]; }
CKEDITOR.plugins.addExternal("name", "/", "");
if (CKEDITOR.stylesSet.get("name") === null) { CKEDITOR.stylesSet.add("name", []); }
CKEDITOR.replace("match_schedule_content", {"toolbar":[["Source","-","NewPage","Preview","Print","-","Templates"],["Cut","Copy","Paste","PasteText","PasteFromWord","-","Undo","Redo"],["Find","Replace","-","SelectAll","-","Scayt"],...... etc.
</script>
<div><label for="match_schedule_content">obsah</label> <textarea id="match_schedule_content" name="match_schedule[content]"></textarea>
</div><div><button type="submit" id="match_schedule_save" name="match_schedule[save]">odeslat</button></div><input type="hidden" id="match_schedule__token" name="match_schedule[_token]" value="E-zJ2sUyfDIxGP3gljVQGpj8FWId3a8_FIJw3rLkOYU" /></form>
All of this results just in simple default textarea with label a submit button.
No CK Editor. Can anyone please tell what I am doing wrong? I am really out of ideas, thx for every advice :)

Rendering Ember view with helpers

I have read the ember guide to achieve the same in my Ember Application, but i can't.
I am trying to configure my view with a Controller which makes a multiplication between two values
Here the code:
App.TotalView = Ember.View.extend({
attributeBindings: ['value', 'placeholder'],
placeholder: null,
value: '',
total: (function() {
return this.get('newThread.selectContentTariffa') * this.get('newThread.primary');
}).property('newThread.selectContentTariffa', 'newThread.primary')
});
Here in the view:
<td>{{view "total" valueBinding=newThread.value}}</td>
I can not get the result of this multiplication in this view,is this code correct? what's wrong?
You can see here: http://emberjs.jsbin.com/qakado/edit

By only focusing on the issue you are facing and not the design and based on the code you have provided, there are the following issues and corresponding possible solutions applied to the examples at the end,
there are calls to newThread but it is not defined anywhere - create a newThread in controller
the view helper uses total you may either create a template and associate it with App.TotalView or use the block form of view helper - 1st example uses a template, 2nd uses block form
js
App.ThreadsController=Ember.ArrayController.extend({
selectContentTariffa: [
{label: "180", value: "180"},
{label: "200", value: "200"},
{label: "300", value: "300"}
],
newThread:{
value:null,
selectContentTariffa:null,
primary:null
}
});
App.TotalView = Ember.View.extend({
templateName:"total",
attributeBindings: ['value', 'placeholder'],
placeholder: null,
value: '',
total: (function() {
var res= parseInt(this.get('controller.newThread.selectContentTariffa')) * parseInt(this.get('controller.newThread.primary'));
return isNaN(res)?"":res;
}).property('controller.newThread.selectContentTariffa', 'controller.newThread.primary')
});
hbs - example1
<script type="text/x-handlebars" data-template-name="threads">
<table class="table table-bordered table-hover">
<tr><th>Title 1</th><th>Title 2</th><th>Title 3</th></tr>
<tr>
<td>{{view Ember.Select prompt="Tariffa" valueBinding=newThread.selectContentTariffa content=selectContentTariffa optionValuePath="content.value" optionLabelPath="content.label"}}</td>
<td>{{view Em.TextField type="number" valueBinding=newThread.primary class="form-control"}}</td>
<td>{{view "total"}}</td>
</tr>
</table>
</script>
<script type="text/x-handlebars" data-template-name="total">
this is total:{{view.total}}
</script>
hbs-example2
<script type="text/x-handlebars" data-template-name="threads">
<table class="table table-bordered table-hover">
<tr><th>Title 1</th><th>Title 2</th><th>Title 3</th></tr>
<tr>
<td>{{view Ember.Select prompt="Tariffa" valueBinding=newThread.selectContentTariffa content=selectContentTariffa optionValuePath="content.value" optionLabelPath="content.label"}}</td>
<td>{{view Em.TextField type="number" valueBinding=newThread.primary class="form-control"}}</td>
<td>{{#view "App.TotalView"}}t:{{view.total}}{{/view}}</td>
</tr>
</table>
</script>
example1 - http://emberjs.jsbin.com/falafezijo/edit?html,js
example2 - http://emberjs.jsbin.com/cuxafigiqe/1/edit?html,js