tifawt/resources/views/backend/produit/extension/diapo.blade.php

@extends('layouts.idara.panel')


@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
    <section style="margin-bottom: 44px;">
        <div class="card">
            <div class="card-header">
                Vos images pour le {{$article->nom}}
            </div>
            <div class="card-body">


                <a href="javascript:history.back()" class="btn btn-primary">Retour</a>

                <a href="javascript:window.location.href=window.location.href" class="btn btn-secondary"><i class="fa-solid fa-arrows-rotate"></i>Actualiser</a>


            </div>
        </div>
    </section>



    <div class="card">
        <div class="card-header">
            Featured
        </div>
        <div class="card-body">
            <h5 class="card-title">Vous pouvez ajouter</h5>

            <div class="container">
                @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
                @endif
                @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> Some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form method="post" action="{{url('produitDiapo/'.$article->id)}}" enctype="multipart/form-data">
                    <input type="hidden" name="_method" value="PUT">

                    @csrf
                    <div class="input-group control-group increment" >
                            <input type="file" name="diapo[]" class="form-control"  multiple>
                    
                    </div>
                    <img id="preview_img" src="https://w3adda.com/wp-content/uploads/2019/09/No_Image-128.png" class="mt-4" width="200" height="150" />

                    <div class="row">
                        <div class="col-md-4"></div>
                         <div class="form-group col-md-4">
                            <button type="submit" class="btn btn-success" style="margin-top:10px">Upload Image</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

</div>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<script>
    function loadPreview(input, id) {
        id = id || '#preview_img';
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $(id)
                    .attr('src', e.target.result)
                    .width(200)
                    .height(150);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
   

</script>

@endsection