Mostrando entradas con la etiqueta Dropzone. Mostrar todas las entradas
Mostrando entradas con la etiqueta Dropzone. Mostrar todas las entradas

Dropzone: rescatar la imagen mandanda

Desde el form de la view se envía a una ruta: controller o a un componente de Livewire y para rescatarlo:
<form action="{{ route('admin.product.storeImagenes', $product) }}" method="POST" class="dropzone"id="my-awesome-dropzone">

Y desde el controller o componente Livewire al que apunte esa ruta:
use Illuminate\Support\Facades\Storage;
...
public function storeImagenes(Product $product, Request $request) {
    $request->validate([
       'fichero' => 'required|image|max:2048'
    ]);
    $url = Storage::put('products', $request->file('fichero'));

    $product->images()->create([
       'url' => $url
    ]);
}

Storage::put lo almacena en donde lo tengas configurado enconfig\filesystems.php:
'default' => env('FILESYSTEM_DRIVER', 'public'),

Por ejemplo en este caso lo almacenaría físicamente dentro de la carpeta: C:\xampp\htdocs\miproyecto\public\storage\products

Para el caso de borrar desde la view:
deleteImagen({{ $image->id }})
Y desde el método del controller o del componente livewire:
public function deleteImagen(Image $image) {
    Storage::delete([$image->url]); // eliminarla físicamente
    $image->delete(); // borrar de la BD
    $this->product = $this->product->fresh();
}

EJEMPLO GENERAL DEL DROPZONE:
Dropzone.options.myAwesomeDropzone = {
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
paramName: "fichero",
dictDefaultMessage: "Arrastra aquí las imágenes que quieras subir",
acceptedFiles: "image/*",
maxFilesize: 2, // MB
maxFiles: 4,
complete: function(fichero) {
this.removeFile(fichero);
},
queuecomplete: function() { // se ejecuta cuando se hayan subido todos los q estén en la cola
Livewire.emit('refreshProduct');
},
accept: function(file, done) {
if (file.name == "xxxx") {
done("xxxx");
}
else { done(); }
}
};

Procesar imagen mandada por dropzone

En \composer.json añadir a los require:
"intervention/image": "^2.5",
composer update
composer install

En Laravel 7 no es necesario añadirlo en los providers y alias de \config\app.php

Ya en el FileController.php añadir:
use Intervention\Image\Facades\Image;
use Illuminate\Support\Str;

y en la función store:
$nombre = Str::random(10)."_".$request->file('fichero')->getClientOriginalName();
$ruta = storage_path().'\app\public\imagenes/' . $nombre;
Image::make($request->file('fichero'))
           ->resize(700, null, function ($constraint) { // redimensiona a 700 de ancho
                 $constraint->aspectRatio();
           })
           ->save($ruta);

File::create([
    'url_foto' => 'storage/imagenes/' . $nombre
]);

Añadir plugin de dropzone para subir muchos ficheros a la vez desde una view

En \resources\views\layouts\app.blade.php añadir:
@yield('css_lsg')
@yield('js_lsg')

En la vista q queramos usarlo (por ejemplo create):
@section('css_lsg')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
@endsection
...
@section('js_lsg')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
@endsection

En esa misma view:
<form action="{{ route('admin.files.store') }}" method="POST" class="dropzone" id="my-awesome-dropzone">
</form>

y dentro del @section('js') añadir las propiedades de la subida:
<script>
   Dropzone.options.myAwesomeDropzone = {
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        paramName: "fichero",
        dictDefaultMessage: "Arrastra aquí las imágenes que quieras subir",
        acceptedFiles: "image/*",
        maxFilesize: 0.1,
        maxFiles: 4
  };
</script>


Más información en: https://www.dropzonejs.com/#installation