Cordial greetings fellow, I have the following problem, I have an application that lets you upload images laravel to use this js dropzone, when loading the image into the form I get the following error:
and pressing the load button displays the following error:
But the image is saved in the folder that I tell you, but the record is not saved in the database.
This is the submission form:
@extends('layouts.layout')
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.css">
@section('contenido')
<div>
<p>Album: {{ $foto->id }}</p>
</div>
<form action="{{ route('fotos') }}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group">
{{-- Este div es para cargar las imagenes --}}
<div class="dropzone">
</div>
<input type="text" name="id" value="{{ $foto->id }}" hidden>
<div class="form-group">
<button type="submit" class="btn btn-primary">Cargar</button>
</div>
</form>
</div>
@stop
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
<script >
var myDropzone = new Dropzone('.dropzone', {
// url por donde pasaremos las imagenes del post
url: '{{route("fotos")}}',
// con esta sentencia le decimos a dropzone que solo acepte archivos de imagen y con el * le decimos que acepte imagenes con cualquier extension
acceptedFiles: 'image/*',
// con esta sentencia le definimos a dropzone la restriccion de tamaño del archivo a subir en Mega Bytes
maxFilesize: 2,
// con esta sentencia restringimos la cantidad de archivos que se pueden subir
// maxFiles: 1,
paramName: 'photo',
headers: {
// verificacion del token
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
// esta sentencia cambia el mensaje por defecto que aparece en la caja de dropzone
dictDefaultMessage : 'Arrastra las imagenes aqui para subirlas'
});
myDropzone.on('error', function(file , res){
console.log(res);
});
// con esta sentencia le decimos a dropzone que no se active automaticamente, solo cuando le demos clic
Dropzone.autoDiscover = false;
</script>
@endpush
This is the route it goes through:
Route::post('fotos','FotoController@upload')->name('fotos');
This is the upload function of the FotoController to which the form data arrives:
public function upload(Request $request)
{
$foto = request()->file('photo')->store('fotos', 'public'); //Si comento esta linea
$fotos = new Foto;
$fotos->url = $foto; // y aqui agrego una url manualmente, el registro si se guarda en la base de datos con el id del album que llega por el formulario
$fotos->album_id = $request->id;
$fotos->user_id = auth()->user()->id;
$fotos->save();
return 'imagen guardada';
}
I also attach the code of the migrations and models of the album table and photos:
Migration of the table photos:
public function up()
{
Schema::create('fotos', function (Blueprint $table) {
$table->increments('id');
$table->string('url');
$table->unsignedInteger('album_id');
$table->unsignedInteger('user_id');
$table->timestamps();
});
}
Photo model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Album;
class Foto extends Model
{
protected $table = 'fotos';
protected $fillable = ['url','album_id','user_id'];
protected $guard = ['id'];
public function Foto()
{
return $this->belongsTo(Album::class, 'album_id');
}
}
Migration of the albums table:
public function up()
{
Schema::create('albums', function (Blueprint $table) {
$table->increments('id');
$table->string('nombre_album');
$table->integer('user_id');
$table->timestamps();
});
}
Album Model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\User;
use App\Foto;
class Album extends Model
{
protected $table = 'albums';
protected $fillable = ['nombre_album','user_id'];
protected $guard = ['id'];
public function User()
{
return $this->belongsTo(User::class, 'user_id');
}
public function fotos()
{
return $this->hasMany(Foto::class);
}
}
What can be wrong here?