[[oktatas:web:back-end_framework:laravel:laravel_rest_api|< Laravel API]]

====== Laravel API - Fájl feltöltése ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Kép feltöltése =====

<code php app/Http/Models/Image.php>
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;
    protected $fillable = ['name', 'path', 'productId'];
}

</code>



<code php database/migrations/2022_05_09_112433_create_images_table.php>
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('path');
            $table->integer('productId')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

</code>



<code php app/Http/Controllers/ImageController.php>
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Image;

class ImageController extends Controller
{
    public function store (Request $request) {
      request()->validate([
        'file' => 'required|image|mimes:jpg,png',
      ]);
    
      if ($request->hasFile('file')) {
        //Eredeti név lekérdezése
        $name = $request->file->getClientOriginalName();        
        //Feltöltés
        $path = $request->file->store('images', 'public');

        /* A storage/app/public könyvtárban létrehoz
        egy images könyvtárat, abba menti a fájlokat */
        
        //Eredeti és új név mentése adatbázisba
        $image = new Image();
        $image->name = $name;
        $image->path = $path;
        $image->save();

        return response()->json([
          "success" => true,
          "path" => $path,
          "name" => $name,
          "message" => "File successfully uploaded"
        ]);
      }
    }
}
</code>



Szűrés egyéb lehetőség:

<code php>
'file' => 'required|image|mimes:png,jpg,gif|max:2048',
</code>

==== A fájl ide töltődik fel ====

  * storage/app/

A storage könyvtárban van egy public könyvtár.
Ha olyan könyvtárra hivatkozunk, ami még nem létezik,
automatikusan létrejön.

===== Feltöltött képfájl elérése =====

Engedélyezzük a storage könyvtár elérését egy link létrehozásával:
  php artisan storage:link

Ezek után így érhető el:
  http://localost:8000/storage/images/by6Pj6ozT5Zjt8PlYhDb7IdPywKKT8LxrpFJbnIg.png



===== JavaScript kliensoldalon =====

<code javascript app.js>
var fileUploadElem = document.querySelector('#imageFile');
var storeButton = document.querySelector('#storeButton');
var host = 'http://localhost:8000/api/';

const uploadFile = () => {
    const files = fileUploadElem.files;
    const formData = new FormData();
    formData.append('file', files[0]);
    let endpoint = 'imageup';
    let url = host + endpoint;
    fetch(url, {
        method: 'post',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        console.log(result);
    })
    .catch(err => {
        console.log(err);
    })
    ;
}

storeButton.addEventListener('click', () => {
    uploadFile();
})
</code>


===== Kép adatbázisban =====

A binary() egyenértékű a blob típussal.


<code php>
$table->binary('image');
</code>


===== Linkek =====

  * https://laravel.com/docs/9.x/filesystem (2022)
  * https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData (2022)