Twitter Bootstrap Question posted in

Laravel 5.8 image upload-Twitter bootstrap

After creating a Laravel site with user login, I wanted to add file upload ability. I followed a simple tutorial but when it came to do php artisan migrate it didn’t work because Base table or view already exists so I created an images table manually in MySQL.

Finally, I navigated to my websites image upload page http://localhost/sites/mywebsite/public/image and attached an image. The error I got was The POST method is not supported for this route. Supported methods: GET, HEAD.

This is the line in my image.blade.php file:

<form action="{{ url('save') }}" method="post" accept-charset="utf-8" enctype="multipart/form-data">

Note; When I created an images table manually in MySQL I only added ‘id’ and ‘image’ columns and I wasn’t 100% sure how to format them.

Any help very much appreciated.

Here’s my ImageController


namespace AppHttpControllers;

use IlluminateHttpRequest;
use Validator, Redirect, Response, File;
use AppImage;

class ImageController extends Controller
{

    public function index()
    {
        return view('image');
    }

    public function save(Request $request)
    {

        request()->validate([

            'image' => 'required',
            'image.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'

        ]);

        if ($image = $request->file('image')) {
            foreach ($image as $files) {
                $destinationPath = 'public/image/'; // upload path
                $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
                $files->move($destinationPath, $profileImage);
                $insert[]['image'] = "$profileImage";
            }
        }

        $check = Image::insert($insert);

        return Redirect::to("image")->withSuccess('Great! Image has been successfully uploaded.');
    }
}

Image.blade.php

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 5.7 Multiple Image Upload Example - Tutsmake.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

    <style>
        .container {
            padding: 10%;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="container">
        <h2 style="margin-left: -48px;">Laravel 5.7 Multiple Image Upload Example - Tutsmake.com</h2>
        <br>
        <br>
        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
        </div>
        <br>
        @endif
        @if (count($errors) > 0)
        <div class="alert alert-danger">
            <strong>Opps!</strong> There were something went wrong with your input.
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        <br>
        @endif
        <form action="{{ url('save') }}" method="post" accept-charset="utf-8" enctype="multipart/form-data">
            @csrf
            <div class="avatar-upload col-6">
                <div class=" form-group avatar-edit">
                    <input type='file' id="image" name="image[]" accept=".png, .jpg, .jpeg" />
                    <label for="imageUpload"></label>
                </div>
            </div>
            <div class="form-group col-3">
                <button type="submit" class="btn btn-success">Submit</button>
            </div>
        </form>
    </div>

</body>

</html>

Migration table

<?php

use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;

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

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

2

Answers


  1. 0

    You need to create a POST method route in routes/web.php.
    A get route does not support posting form data

    Route::post('save', 'ImageController@save');

    Also, the image column in your database should be a string, an integer can’t hold a path to a file

    $table->string('image');

    But you can’t insert an array to a string column anyway so you should move the Model create method inside the foreach loop

    foreach ($image as $files) {
   $destinationPath = 'public/image/'; // upload path
   $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
   $files->move($destinationPath, $profileImage);
   Image::insert($profileImage);
}
    Login or Signup to reply.
  2. 0

    Follow Any Method :

    <form action="{{ url('save') }}" method="get" accept-charset="utf-8" enctype="multipart/form-data">

    And Change Migartion $table->text('image');

    OR

    Route::post('save', 'ImageController@save');

    And Change Migartion $table->text('image');

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search