editor image everywhere

app/Http/Controllers/backend/CategorieController.php

@@ -4,8 +4,15 @@ namespace App\Http\Controllers\backend;
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use App\Models\Categorie;
+use App\Models\Produit;
+
 use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Redirect;
+
+
+
 
+use App\Models\temporaryFile;
 
 
 class CategorieController extends Controller
@@ -22,17 +29,25 @@ class CategorieController extends Controller
        } 
      public function store( Request $request){
    
-        $article= new Categorie();
-        $article->nom = $request->input('nom');
+             $tmp_file = temporaryFile::where('folder',$request->image)->first();
+
+        
+        if($tmp_file){
+            Storage::copy('image/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'image/'.$tmp_file->folder.'/'.$tmp_file->file);
+               
+           Categorie::create( 
+               [
+                   'nom' => $request->nom,
+                   'image' => $tmp_file->folder . '/' . $tmp_file->file,
+                   ],
+               );
+               Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+               $tmp_file->delete();
         
-        if($request->hasFile('image')){
-            $article->image = $request->image->store('image');
-           }
-           
-           $article->save();
            return redirect('categories');
    
     }
+}
     
     public function show($id){
         $article=Categorie::find($id);
@@ -52,15 +67,18 @@ class CategorieController extends Controller
         $article = Categorie::find($id);
         $article->nom = $request->input('nom');
 
-        if($request->hasFile('image')){
-            $article->image = $request->image->store('image');
-              if ($request->image) {
-           Storage::delete('public/' . $request->image);
-                }
-                  else {
-           $article->image = $request->image->store('image');
+        $tmp_file = temporaryFile::where('folder',$request->image)->first();
+
+        if($tmp_file){
+            Storage::copy('image/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'image/'.$tmp_file->folder.'/'.$tmp_file->file);
+               
+            $article->update([
+           
+                "image" => $tmp_file->folder . '/' . $tmp_file->file
+            ]);
+            Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+                $tmp_file->delete();
            }
-          } 
           
 
           $article->created_at = \Carbon\Carbon::now();
@@ -70,11 +88,26 @@ class CategorieController extends Controller
 
     public function destroy(Request $request, $id){
 
-        $article = Categorie::find($id);
-        $article->delete();
-
+        // $article = Categorie::find($id);
+        // $article->delete();
+
+        // Produit::whereCategoryId($id)->update(['category_id' => null]);
+        $products = Produit::where('category_id', $id)->count();
+        if($products > 0){
+            return redirect ('categories')
+                    ->with('message', 'Produit existe dans cette categorie');
+        }
+        else{
+            $category= Categorie::find($id);
+            $category->delete();
+            return Redirect::to('categories')
+                        ->with('message', 'Categorie supprimée');
+        }
+        
         return back();
     }
+
+
     public function changeStatus(Request $request)
     {
         $article = Categorie::find($request->Id);
@@ -85,4 +118,38 @@ class CategorieController extends Controller
     }
 
 
+
+    public function fileUpload(Request $request){
+   
+        if($request->hasfile('image')){
+         
+         $image = $request->file('image');
+         $file = $image->getClientOriginalName();
+         $folder = uniqid('post', 'true');
+         $image->storeAs('image/tmp/' . $folder,$file);
+           
+
+           TemporaryFile::create([
+             'folder' => $folder,
+             'file'=> $file           
+             ]);
+       return  $folder;   
+            
+           
+        }
+     return '';
+
+         
+}
+
+public function deleteUpload(){
+
+ $tmp_file = TemporaryFile::where('folder',request()->getContent())->first();
+ if($tmp_file){
+     Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+     $tmp_file->delete();
+     return response('');
+ }
+}
+
 }

app/Http/Controllers/backend/PresentationController.php

@@ -5,14 +5,17 @@ namespace App\Http\Controllers\backend;
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use App\Models\Presentation;
+use App\Models\Media;
+
 use Illuminate\Support\Facades\Storage;
+use App\Http\Traits\EditorTrait;
 
-use App\Http\Traits\PresentationTrait;
+use App\Models\temporaryFile;
 
 class PresentationController extends Controller
 {
 
-        // use PresentationTrait;
+       
           public function changeStatus(Request $request)
         {
             $article = Presentation::find($request->Id);
@@ -87,16 +90,26 @@ class PresentationController extends Controller
 
     public function updateImage(Request $request, $id) {
 
-        request()->validate([
-            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg',
-       ]);
+        
 
        $article = Presentation::find($id);
 
-       if($request->hasFile('image')){
-        $article->image = $request->image->store('image');
+       $tmp_file = temporaryFile::where('folder',$request->image)->first();
+
+
+  
+
+       if($tmp_file){
+        Storage::copy('image/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'image/'.$tmp_file->folder.'/'.$tmp_file->file);
+           
+        $article->update([
+           
+            "image" => $tmp_file->folder . '/' . $tmp_file->file
+        ]);
+        Storage::deleteDirectory('diapo/tmp/'.$tmp_file->folder);
+                $tmp_file->delete();
        }
-       
+     
        $article->save();
       
         return back()->with('success', 'Image Upload successfully');
@@ -184,7 +197,38 @@ class PresentationController extends Controller
             return response()->json(['success'=>'Status change successfully.']);
         }
     
-
+        public function fileUpload(Request $request){
+   
+            if($request->hasfile('image')){
+             
+             $image = $request->file('image');
+             $file = $image->getClientOriginalName();
+             $folder = uniqid('post', 'true');
+             $image->storeAs('image/tmp/' . $folder,$file);
+               
+    
+               TemporaryFile::create([
+                 'folder' => $folder,
+                 'file'=> $file           
+                 ]);
+           return  $folder;   
+                
+               
+            }
+         return '';
+    
+             
+    }
+    
+    public function deleteUpload(){
+    
+     $tmp_file = TemporaryFile::where('folder',request()->getContent())->first();
+     if($tmp_file){
+         Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+         $tmp_file->delete();
+         return response('');
+     }
+    }
 }
  
    

app/Http/Controllers/backend/ProduitController.php

@@ -26,21 +26,30 @@ class ProduitController extends Controller
         
 
         return view('backend.produit.add',compact('categories'));
+
        } 
      public function store( Request $request){
-   
-        $article= new Produit();
-        $article->nom = $request->input('nom');
-        $article->category_id = $request->input('categorie');
-
-        $article->description = $request->input('description');
-
+        $tmp_file = temporaryFile::where('folder',$request->image)->first();
         
-        if($request->hasFile('image')){
-            $article->image = $request->image->store('image');
+       
+        if($tmp_file){
+            Storage::copy('image/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'image/'.$tmp_file->folder.'/'.$tmp_file->file);
+               
+           Produit::create( 
+               [
+                   'nom' => $request->nom,
+                   'category_id' => $request->input('categorie'),
+                   'description' => $request->description,
+                   'image' => $tmp_file->folder . '/' . $tmp_file->file,
+                   ],
+               );
+               Storage::deleteDirectory('diapo/tmp/'.$tmp_file->folder);
+               $tmp_file->delete();
+           
+           return redirect('produits');
            }
            
-           $article->save();
+    
            return redirect('produits');
    
     }
@@ -71,15 +80,18 @@ class ProduitController extends Controller
 
         $article->description = $request->input('description');
 
-        if($request->hasFile('image')){
-            $article->image = $request->image->store('image');
-              if ($request->image) {
-           Storage::delete('public/' . $request->image);
-                }
-                  else {
-           $article->image = $request->image->store('image');
+        $tmp_file = temporaryFile::where('folder',$request->image)->first();
+
+        if($tmp_file){
+            Storage::copy('image/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'image/'.$tmp_file->folder.'/'.$tmp_file->file);
+               
+            $article->update([
+           
+                "image" => $tmp_file->folder . '/' . $tmp_file->file
+            ]);
+            Storage::deleteDirectory('diapo/tmp/'.$tmp_file->folder);
+                $tmp_file->delete();
            }
-          } 
           $article->created_at = \Carbon\Carbon::now();
         $article->save();
         return redirect ('produits');
@@ -102,15 +114,12 @@ class ProduitController extends Controller
        
   
           if($tmp_file){
+            
             Storage::copy('diapo/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'diapo/'.$tmp_file->folder.'/'.$tmp_file->file);
-            // $diapo = $request->file('diapo');
-
-            // $file_name = $diapo->getClientOriginalName();
-            // $folder = uniqid('post', 'true');
-            // $diapo->storeAs('diapo/tmp/' . $folder,$file_name);
+           
                 Media::create( 
                 [
-                    'produit_id' => $article -> id,
+                    'produit_id' => $article->id,
                     'diapo' => $tmp_file->folder . '/' . $tmp_file->file,
                     ],
                 );
@@ -119,7 +128,7 @@ class ProduitController extends Controller
 
             
         return back()->with('success', 'Image Upload successfully');
-
+          
     }
     $article->save();
 
@@ -143,22 +152,56 @@ public function destroyProduit(Request $request, $id){
 }
     
 
+public function fileUploadProduit(Request $request){
+   
+    if($request->hasfile('image')){
+     
+     $image = $request->file('image');
+     $file = $image->getClientOriginalName();
+     $folder = uniqid('post', 'true');
+     $image->storeAs('image/tmp/' . $folder,$file);
+       
+
+       TemporaryFile::create([
+         'folder' => $folder,
+         'file'=> $file           
+         ]);
+   return  $folder;   
+        
+       
+    }
+ return '';
+
+     
+}
+
+public function fileDeleteProduit(){
+
+$tmp_file = TemporaryFile::where('folder',request()->getContent())->first();
+if($tmp_file){
+ Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+ $tmp_file->delete();
+ return response('');
+}
+}
+
 public function fileUpload(Request $request){
    
-           if($request->hasFile('diapo')){
-          
+           if($request->hasfile('diapo')){
+            
             $diapo = $request->file('diapo');
-            $fileName = $diapo->getClientOriginalName();
+            $file = $diapo->getClientOriginalName();
             $folder = uniqid('post', 'true');
-            $diapo->storeAs('diapo/tmp/' . $folder,$fileName);
+            $diapo->storeAs('diapo/tmp/' . $folder,$file);
               
 
               TemporaryFile::create([
                 'folder' => $folder,
-                'file'=> $fileName              
-            ]);
-            return  $folder;
-
+                'file'=> $file           
+                ]);
+          return  $folder;   
+               
+              
            }
         return '';
 
@@ -173,5 +216,92 @@ public function deleteUpload(){
         $tmp_file->delete();
         return response('');
     }
+}
+public function changeStatus(Request $request)
+{
+    $article = Produit::find($request->Id);
+    $article->etat = $request->etat;
+    $article->save();
+
+    return response()->json(['success'=>'Status change successfully.']);
+}
+
+
+
+//doc
+
+public function editDoc($id) {
+    $article = Produit::find($id);
+    return view('backend.produit.extension.document',['article'=>$article]);
+} 
+
+public function updateDoc(Request $request, $id) {
+
+        
+
+    
+
+    $tmp_file = temporaryFile::where('folder',$request->document)->first();
+
+
+$article = Produit::find($id);
+
+    if($tmp_file){
+     Storage::copy('document/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'document/'.$tmp_file->folder.'/'.$tmp_file->file);
+   
+         $article->update([
+        
+            "document" => $tmp_file->folder . '/' . $tmp_file->file
+          ]);
+          Storage::deleteDirectory('document/tmp/'.$tmp_file->folder);
+              $tmp_file->delete();
+              
+    }
+  
+    $article->save();
+   
+     return back()->with('success', 'document Upload successfully');
+
+ }
+
+public function docUpload(Request $request){
+   
+    if($request->hasfile('document')){
+     
+     $document = $request->file('document');
+     $file = $document->getClientOriginalName();
+     $folder = uniqid('post', 'true');
+     $document->storeAs('document/tmp/' . $folder,$file);
+       
+
+       TemporaryFile::create([
+         'folder' => $folder,
+         'file'=> $file           
+         ]);
+   return  $folder;   
+        
+       
+    }
+ return '';
+
+     
+}
+
+public function docUploadDelete(){
+
+$tmp_file = TemporaryFile::where('folder',request()->getContent())->first();
+if($tmp_file){
+ Storage::deleteDirectory('document/tmp/'.$tmp_file->folder);
+ $tmp_file->delete();
+ return response('');
+}
+}
+public function downloadDoc($id)
+{   
+    
+    $article = Produit::where('document', $id)->firstOrFail();
+    return Storage::download('document/. $article->document');
+  
+    
 }
 }

app/Http/Controllers/backend/SlideController.php

@@ -5,6 +5,8 @@ use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use App\Models\Slide;
 use Illuminate\Support\Facades\Storage;
+use App\Models\temporaryFile;
+
 
 
 class SlideController extends Controller
@@ -25,12 +27,23 @@ class SlideController extends Controller
     //         'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg',
     //    ]);
         $article= new Slide();
-        $article->titre = $request->input('titre');
-        if($request->hasFile('image')){
-            $article->image = $request->image->store('image');
-           }
+        
+        $tmp_file = temporaryFile::where('folder',$request->image)->first();
+
+        if($tmp_file){
+         Storage::copy('image/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'image/'.$tmp_file->folder.'/'.$tmp_file->file);
+            
+        Slide::create( 
+            [
+                'titre' => $request->titre,
+                'image' => $tmp_file->folder . '/' . $tmp_file->file,
+                ],
+            );
+            Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+            $tmp_file->delete();
+        }
            
-           $article->save();
+        
            return redirect('slides');
    
     }
@@ -50,16 +63,18 @@ class SlideController extends Controller
        
         $article = Slide::find($id);
         $article->titre = $request->input('titre');
+        $tmp_file = temporaryFile::where('folder',$request->image)->first();
 
-        if($request->hasFile('image')){
-            $article->image = $request->image->store('image');
-              if ($request->image) {
-           Storage::delete('public/' . $request->image);
-                }
-                  else {
-           $article->image = $request->image->store('image');
+        if($tmp_file){
+            Storage::copy('image/tmp/'.$tmp_file->folder.'/'.$tmp_file->file,'image/'.$tmp_file->folder.'/'.$tmp_file->file);
+               
+            $article->update([
+           
+                "image" => $tmp_file->folder . '/' . $tmp_file->file
+            ]);
+            Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+            $tmp_file->delete();
            }
-          } 
           
 
           $article->created_at = \Carbon\Carbon::now();
@@ -82,4 +97,38 @@ class SlideController extends Controller
   
         return response()->json(['success'=>'Status change successfully.']);
     }
+
+    
+    public function fileUpload(Request $request){
+   
+        if($request->hasfile('image')){
+         
+         $image = $request->file('image');
+         $file = $image->getClientOriginalName();
+         $folder = uniqid('post', 'true');
+         $image->storeAs('image/tmp/' . $folder,$file);
+           
+
+           TemporaryFile::create([
+             'folder' => $folder,
+             'file'=> $file           
+             ]);
+       return  $folder;   
+            
+           
+        }
+     return '';
+
+         
+}
+
+public function deleteUpload(){
+
+ $tmp_file = TemporaryFile::where('folder',request()->getContent())->first();
+ if($tmp_file){
+     Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+     $tmp_file->delete();
+     return response('');
+ }
+}
 }

app/Http/Traits/EditorTrait.php

@@ -0,0 +1,43 @@
+<?php
+namespace App\Http\Traits;
+use App\Models\temporaryFile;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+
+
+
+
+trait EditorTrait {
+    public function fileUpload(Request $request){
+   
+        if($request->hasfile('image')){
+         
+         $diapo = $request->file('image');
+         $file = $diapo->getClientOriginalName();
+         $folder = uniqid('post', 'true');
+         $diapo->storeAs('image/tmp/' . $folder,$file);
+           
+
+           TemporaryFile::create([
+             'folder' => $folder,
+             'file'=> $file           
+             ]);
+       return  $folder;   
+            
+           
+        }
+     return '';
+
+         
+}
+
+public function deleteUpload(){
+
+ $tmp_file = TemporaryFile::where('folder',request()->getContent())->first();
+ if($tmp_file){
+     Storage::deleteDirectory('image/tmp/'.$tmp_file->folder);
+     $tmp_file->delete();
+     return response('');
+ }
+}
+}

app/Models/Categorie.php

@@ -11,5 +11,7 @@ class Categorie extends Model
     use HasFactory, SoftDeletes;
     protected $dates = ['deleted_at'];
 
+    protected $fillable = ['nom', 'image'];
+
    
 }

app/Models/Presentation.php

@@ -10,6 +10,9 @@ class Presentation extends Model
 {
      use HasFactory, SoftDeletes;
     protected $dates = ['deleted_at'];
+    protected $fillable = ['image'];
+
+
      public function defaultImage()
     {
         return null;

app/Models/Produit.php

@@ -10,6 +10,7 @@ class Produit extends Model
 {
     use HasFactory, SoftDeletes;
     protected $dates = ['deleted_at'];
+    protected $fillable = ['nom','document', 'category_id','description','image'];
 
     public function categorie()
     {
@@ -24,5 +25,7 @@ class Produit extends Model
         return $this->hasMany(Media::class,'produit_id','id');
     }
    
-    
+    public function remove_categorie($category_id){
+        $this->categorie()->detach($category_id);         
+    }
 }

app/Models/Slide.php

@@ -10,5 +10,6 @@ class Slide extends Model
 {
     use HasFactory, SoftDeletes;
     protected $dates = ['deleted_at'];
-
+    
+    protected $fillable = ['titre', 'image'];
 }

resources/views/backend/category/add.blade.php

@@ -2,6 +2,15 @@
 
 
 @section('content')
+
+
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
+
+<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
+
+<!-- Custom css -->
+<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
 @include('backend.partials.import')
 
 @include('backend.partials.features')
@@ -36,18 +45,15 @@
                     
 
                     @csrf
-                    <div class="row">
+                 <div class="row">
                       
                     <div class="form-group mt-4">
                         <input type="text" class="form-control" id="" name="nom" placeholder="Nom" required>
                     </div>
-                        <div class="form-group mt-4">
-
-                            <input type="file" name="image" id="profile_image" onchange="loadPreview(this);" class="form-control" >
-
-                            <label for="profile_image"></label>
-                            <img id="preview_img" src="https://w3adda.com/wp-content/uploads/2019/09/No_Image-128.png" class="" width="200" height="150" />
-
+                            <div class="input-group mt-4 control-group increment" >
+                                 <input type="file" name="image" class="my-pond form-control "  multiple/>
+                    
+                            </div>
 
                         </div>
                     </div>
@@ -64,8 +70,131 @@
 
 </div>
 
-@include('backend.partials.upload')
 
 
 
+
+<script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
+
+<script  type="module">
+    var  img_width = 1080 ;
+    var img_height = {{ env('IMG_HEIGHT') }};
+    var img_quality = {{ env('IMG_QUALITY') }};
+    var  img_ratio = {{ env('IMG_RATIO') }};
+    var  max_files  = {{ env('MAX_FILES') }};
+    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
+    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
+    var   pond_selector = '.my-pond';
+import {
+        FilePondPluginImageEditor,
+    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
+	
+// import Pintura Image Editor modules
+import {
+    // Image editor
+
+    
+    openEditor,
+    processImage,
+    createDefaultImageReader,
+    createDefaultImageWriter,
+    createDefaultImageOrienter,
+
+    // Only needed if loading legacy image editor data
+    legacyDataToImageState,
+
+    // Import the editor default configuration
+    getEditorDefaults,
+} from '/pintura/pintura.js';
+
+// French
+import fr_FR from '/filepond/locale/fr-fr.js';
+
+  
+
+    
+FilePond.setOptions(fr_FR);
+
+// Register plugins
+FilePond.registerPlugin(
+    FilePondPluginImageEditor,
+    FilePondPluginFilePoster,
+    FilePondPluginImageExifOrientation,
+    FilePondPluginFileValidateType,
+    FilePondPluginFileValidateSize,
+);
+
+
+
+FilePond.create(document.querySelector(pond_selector), {
+    // Attributes
+    name: 'image',
+    maxFiles: max_files,
+    allowFileSizeValidation: true,
+    maxFileSize: max_file_size,
+    allowBrowse: true,
+    acceptedFileTypes: ['image/*'],
+    dropOnPage: true,
+    dropOnElement: true,
+    instantUpload: instant_upload,
+    
+    // FilePond Image Editor plugin properties
+    imageEditor: {
+        // Maps legacy data objects to new imageState objects (optional)
+        legacyDataToImageState: legacyDataToImageState,
+
+        // Used to create the editor (required)
+        createEditor: openEditor,
+
+        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
+        imageReader: [
+            createDefaultImageReader,
+            {
+                // createDefaultImageReader options here
+            },
+        ],
+
+        // Required when generating a preview thumbnail and/or output image
+        imageWriter: [
+            createDefaultImageWriter,
+            {
+                // We'll resize images to fit a 512 × 512 square
+                targetSize: {
+                    width: img_width,
+                    height: img_height,
+                },
+                quality: img_quality,
+            },
+        ],
+
+        // Used to create poster and output images, runs an invisible "headless" editor instance
+        imageProcessor: processImage,
+
+        // Pintura Image Editor options
+        editorOptions: {
+            // Pass the editor default configuration options
+            ...getEditorDefaults(),
+
+            // This will set a square crop aspect ratio
+            imageCropAspectRatio: img_ratio,
+        }
+    }
+});
+            FilePond.setOptions({
+            server: {
+                    process: '/file-upload-category',
+                    revert: '/file-delete-category',
+                
+                    headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+                    
+                },
+            });
+
+</script>
+
 @endsection

resources/views/backend/category/edit.blade.php

@@ -2,6 +2,14 @@
 
 
 @section('content')
+
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
+
+<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
+
+<!-- Custom css -->
+<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 @include('backend.partials.features')
 
@@ -18,10 +26,10 @@
                 </div>
                 <div class="form-group">
                 <label for="exampleFormControlInput1">image</label>
-                
-        
-                <input type="file" name="image" class="form-control" accept="image/*" placeholder="image">
-                <img src="{{ asset('storage/'.$article->image) }}" class="mt-4" width="300px">
+                <div class="input-group mt-4 control-group increment" >
+                                 <input type="file" name="image" class="my-pond form-control "  multiple/>
+                    
+                            </div>
             </div>
 
                 <div class="form-group add">
@@ -33,4 +41,127 @@
     </div>
 </div>
 
+<script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
+
+<script  type="module">
+    var  img_width = 1080 ;
+    var img_height = {{ env('IMG_HEIGHT') }};
+    var img_quality = {{ env('IMG_QUALITY') }};
+    var  img_ratio = {{ env('IMG_RATIO') }};
+    var  max_files  = {{ env('MAX_FILES') }};
+    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
+    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
+    var   pond_selector = '.my-pond';
+import {
+        FilePondPluginImageEditor,
+    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
+	
+// import Pintura Image Editor modules
+import {
+    // Image editor
+
+    
+    openEditor,
+    processImage,
+    createDefaultImageReader,
+    createDefaultImageWriter,
+    createDefaultImageOrienter,
+
+    // Only needed if loading legacy image editor data
+    legacyDataToImageState,
+
+    // Import the editor default configuration
+    getEditorDefaults,
+} from '/pintura/pintura.js';
+
+// French
+import fr_FR from '/filepond/locale/fr-fr.js';
+
+  
+
+    
+FilePond.setOptions(fr_FR);
+
+// Register plugins
+FilePond.registerPlugin(
+    FilePondPluginImageEditor,
+    FilePondPluginFilePoster,
+    FilePondPluginImageExifOrientation,
+    FilePondPluginFileValidateType,
+    FilePondPluginFileValidateSize,
+);
+
+
+
+FilePond.create(document.querySelector(pond_selector), {
+    // Attributes
+    name: 'image',
+    maxFiles: max_files,
+    allowFileSizeValidation: true,
+    maxFileSize: max_file_size,
+    allowBrowse: true,
+    acceptedFileTypes: ['image/*'],
+    dropOnPage: true,
+    dropOnElement: true,
+    instantUpload: instant_upload,
+    
+    // FilePond Image Editor plugin properties
+    imageEditor: {
+        // Maps legacy data objects to new imageState objects (optional)
+        legacyDataToImageState: legacyDataToImageState,
+
+        // Used to create the editor (required)
+        createEditor: openEditor,
+
+        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
+        imageReader: [
+            createDefaultImageReader,
+            {
+                // createDefaultImageReader options here
+            },
+        ],
+
+        // Required when generating a preview thumbnail and/or output image
+        imageWriter: [
+            createDefaultImageWriter,
+            {
+                // We'll resize images to fit a 512 × 512 square
+                targetSize: {
+                    width: img_width,
+                    height: img_height,
+                },
+                quality: img_quality,
+            },
+        ],
+
+        // Used to create poster and output images, runs an invisible "headless" editor instance
+        imageProcessor: processImage,
+
+        // Pintura Image Editor options
+        editorOptions: {
+            // Pass the editor default configuration options
+            ...getEditorDefaults(),
+
+            // This will set a square crop aspect ratio
+            imageCropAspectRatio: img_ratio,
+        }
+    }
+});
+            FilePond.setOptions({
+            server: {
+                    process: '/file-upload-slide',
+                    revert: '/file-delete-slide',
+                
+                    headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+                    
+                },
+            });
+
+</script>
+
 @endsection

resources/views/backend/category/index.blade.php

@@ -32,7 +32,9 @@
         </div>
     </section>
     
-
+    @if (Session::has('message'))
+   <div class="alert alert-info">{{ Session::get('message') }}</div>
+@endif
     <div class="card">
             <div class="card-header">
                Catégories
@@ -128,19 +130,7 @@
             });
     });
 
-    function myFunction() {
-        document.getElementById("demo").innerHTML = "Hello World";
-    }
-
-    var myModal = document.getElementById('myModal')
-    var myInput = document.getElementById('myInput')
-
-    myModal.addEventListener('shown.bs.modal', function() {
-        myInput.focus()
-    })
-    $('form input').on('change', function() {
-        $(this).closest('form').submit();
-    });
+  
 
 </script>
 <script>

resources/views/backend/category/show.blade.php

@@ -70,7 +70,7 @@
 
                     <div class="showImage">
 
-                        <img src="{{ asset('storage/'.$article->image) }}" alt="description of myimage">
+                        <img src="{{ asset('storage/image/'.$article->image) }}" alt="description of myimage">
                         
                     </div>
                 </div>

resources/views/backend/presentation/extensions/image.blade.php

@@ -3,12 +3,22 @@
 
 @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">
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
 
+<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
+
+<!-- Custom css -->
+<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
+<link
+    href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css"
+    rel="stylesheet"
+/>
 <div class="container">
     <section style="margin-bottom: 44px;">
         <div class="card">
             <div class="card-header">
-                Votre présentation
+                Vos images pour le {{$article->nom}}
             </div>
             <div class="card-body">
 
@@ -29,7 +39,7 @@
             Featured
         </div>
         <div class="card-body">
-            <h5 class="card-title">Vous pouvez ajouter une image ou la modifier</h5>
+            <h5 class="card-title">Vous pouvez ajouter</h5>
 
             <div class="container">
                 @if(session('success'))
@@ -48,24 +58,19 @@
                 </div>
                 @endif
 
-                <form method="post" action="{{url('presentationsImage/'.$article->id)}}" enctype="multipart/form-data">
-                    <input type="hidden" name="_method" value="PUT">
-
-                    @csrf
-                    <div class="row">
-                        <div class="col-md-4"></div>
-                        <div class="form-group col-md-4">
-                            <input type="file" name="image" id="profile_image" onchange="loadPreview(this);" class="form-control">
+                <form method="POST" action="{{url('presentationsImage/'.$article->id)}}" enctype="multipart/form-data">
+                <input type="hidden" name="_method" value="PUT">
+                @csrf
 
-                            <label for="profile_image"></label>
-                            <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>
+                    
+                    <div class="input-group control-group increment" >
+                    <input type="file" name="image" class="my-pond form-control "  multiple/>
+                    
                     </div>
+                  
                     <div class="row">
                         <div class="col-md-4"></div>
-                        <div class="form-group col-md-4">
+                         <div class="form-group col-md-4">
                             <button type="submit" class="btn btn-success" style="margin-top:10px">Upload Image</button>
                         </div>
                     </div>
@@ -78,26 +83,130 @@
 </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 src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
+
+<script  type="module">
+    var  img_width = 1080 ;
+    var img_height = {{ env('IMG_HEIGHT') }};
+    var img_quality = {{ env('IMG_QUALITY') }};
+    var  img_ratio = {{ env('IMG_RATIO') }};
+    var  max_files  = {{ env('MAX_FILES') }};
+    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
+    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
+    var   pond_selector = '.my-pond';
+import {
+        FilePondPluginImageEditor,
+    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
+	
+// import Pintura Image Editor modules
+import {
+    // Image editor
+
+    
+    openEditor,
+    processImage,
+    createDefaultImageReader,
+    createDefaultImageWriter,
+    createDefaultImageOrienter,
+
+    // Only needed if loading legacy image editor data
+    legacyDataToImageState,
+
+    // Import the editor default configuration
+    getEditorDefaults,
+} from '/pintura/pintura.js';
+
+// French
+import fr_FR from '/filepond/locale/fr-fr.js';
+
+  
+
+    
+FilePond.setOptions(fr_FR);
+
+// Register plugins
+FilePond.registerPlugin(
+    FilePondPluginImageEditor,
+    FilePondPluginFilePoster,
+    FilePondPluginImageExifOrientation,
+    FilePondPluginFileValidateType,
+    FilePondPluginFileValidateSize,
+);
+
+
+
+FilePond.create(document.querySelector(pond_selector), {
+    // Attributes
+    name: 'image',
+    maxFiles: max_files,
+    allowFileSizeValidation: true,
+    maxFileSize: max_file_size,
+    allowBrowse: true,
+    acceptedFileTypes: ['image/*'],
+    dropOnPage: true,
+    dropOnElement: true,
+    instantUpload: instant_upload,
+    
+    // FilePond Image Editor plugin properties
+    imageEditor: {
+        // Maps legacy data objects to new imageState objects (optional)
+        legacyDataToImageState: legacyDataToImageState,
+
+        // Used to create the editor (required)
+        createEditor: openEditor,
+
+        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
+        imageReader: [
+            createDefaultImageReader,
+            {
+                // createDefaultImageReader options here
+            },
+        ],
+
+        // Required when generating a preview thumbnail and/or output image
+        imageWriter: [
+            createDefaultImageWriter,
+            {
+                // We'll resize images to fit a 512 × 512 square
+                targetSize: {
+                    width: img_width,
+                    height: img_height,
+                },
+                quality: img_quality,
+            },
+        ],
+
+        // Used to create poster and output images, runs an invisible "headless" editor instance
+        imageProcessor: processImage,
+
+        // Pintura Image Editor options
+        editorOptions: {
+            // Pass the editor default configuration options
+            ...getEditorDefaults(),
+
+            // This will set a square crop aspect ratio
+            imageCropAspectRatio: img_ratio,
         }
     }
+});
+            FilePond.setOptions({
+            server: {
+                    process: '/file-upload-presentation',
+                    revert: '/file-delete-presentation',
+                
+                    headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+                    
+                },
+            });
 
 </script>
 
+
+
+
 @endsection

resources/views/backend/presentation/show.blade.php

@@ -88,7 +88,7 @@
 
                     <div class="showImage">
 
-                        <img src="{{ asset('storage/'.$article->image) }}" alt="description of myimage">
+                        <img src="{{ asset('storage/image/'.$article->image) }}" alt="description of myimage">
                         <Tooltip title="suprrimer">
 
                             <form action="{{url('deleteImageP/'.$article->id)}}" method="post">

resources/views/backend/produit/add.blade.php

@@ -2,6 +2,15 @@
 
 
 @section('content')
+
+
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
+
+<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
+
+<!-- Custom css -->
+<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
 @include('backend.partials.import')
 
 @include('backend.partials.features')
@@ -74,15 +83,10 @@
                         <textarea class="form-control" id="presentation" name="description" rows="6"></textarea>
                     </div>
 
-                        <div class="form-group mt-4">
-
-                            <input type="file" name="image" id="profile_image" onchange="loadPreview(this);" class="form-control" >
-
-                            <label for="profile_image"></label>
-                            <img id="preview_img" src="https://w3adda.com/wp-content/uploads/2019/09/No_Image-128.png" class="" width="200" height="150" />
-
-
-                        </div>
+                    <div class="input-group mt-4 control-group increment" >
+                                 <input type="file" name="image" class="my-pond form-control"  />
+                    
+                            </div>
                     </div>
                     
                         <div class="form-group col-md-4 mt-4">
@@ -98,8 +102,6 @@
 </div>
 
 @include('backend.partials.upload')
-
-
 <style>
     .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
         border-color: var(--ck-color-base-border);
@@ -107,6 +109,15 @@
     }
 
 </style>
+
+<script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
+
+
+
 <script src="https://cdn.ckeditor.com/ckeditor5/36.0.0/classic/ckeditor.js"></script>
 <script>
     ClassicEditor
@@ -120,4 +131,122 @@
 
 </script>
 
+
+<script  type="module">
+    var  img_width = 1080 ;
+    var img_height = {{ env('IMG_HEIGHT') }};
+    var img_quality = {{ env('IMG_QUALITY') }};
+    var  img_ratio = {{ env('IMG_RATIO') }};
+    var  max_files  = {{ env('MAX_FILES') }};
+    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
+    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
+    var   pond_selector = '.my-pond';
+import {
+        FilePondPluginImageEditor,
+    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
+	
+// import Pintura Image Editor modules
+import {
+    // Image editor
+
+    
+    openEditor,
+    processImage,
+    createDefaultImageReader,
+    createDefaultImageWriter,
+    createDefaultImageOrienter,
+
+    // Only needed if loading legacy image editor data
+    legacyDataToImageState,
+
+    // Import the editor default configuration
+    getEditorDefaults,
+} from '/pintura/pintura.js';
+
+// French
+import fr_FR from '/filepond/locale/fr-fr.js';
+
+  
+
+    
+FilePond.setOptions(fr_FR);
+
+// Register plugins
+FilePond.registerPlugin(
+    FilePondPluginImageEditor,
+    FilePondPluginFilePoster,
+    FilePondPluginImageExifOrientation,
+    FilePondPluginFileValidateType,
+    FilePondPluginFileValidateSize,
+);
+
+
+
+FilePond.create(document.querySelector(pond_selector), {
+    // Attributes
+    name: 'image',
+    maxFiles: max_files,
+    allowFileSizeValidation: true,
+    maxFileSize: max_file_size,
+    allowBrowse: true,
+    acceptedFileTypes: ['image/*'],
+    dropOnPage: true,
+    dropOnElement: true,
+    instantUpload: instant_upload,
+    
+    // FilePond Image Editor plugin properties
+    imageEditor: {
+        // Maps legacy data objects to new imageState objects (optional)
+        legacyDataToImageState: legacyDataToImageState,
+
+        // Used to create the editor (required)
+        createEditor: openEditor,
+
+        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
+        imageReader: [
+            createDefaultImageReader,
+            {
+                // createDefaultImageReader options here
+            },
+        ],
+
+        // Required when generating a preview thumbnail and/or output image
+        imageWriter: [
+            createDefaultImageWriter,
+            {
+                // We'll resize images to fit a 512 × 512 square
+                targetSize: {
+                    width: img_width,
+                    height: img_height,
+                },
+                quality: img_quality,
+            },
+        ],
+
+        // Used to create poster and output images, runs an invisible "headless" editor instance
+        imageProcessor: processImage,
+
+        // Pintura Image Editor options
+        editorOptions: {
+            // Pass the editor default configuration options
+            ...getEditorDefaults(),
+
+            // This will set a square crop aspect ratio
+            imageCropAspectRatio: img_ratio,
+        }
+    }
+});
+            FilePond.setOptions({
+            server: {
+                    process: '/file-upload-produit',
+                    revert: '/file-delete-produit',
+                
+                    headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+                    
+                },
+            });
+
+</script>
+
 @endsection

resources/views/backend/produit/edit.blade.php

@@ -2,6 +2,13 @@
 
 
 @section('content')
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
+
+<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
+
+<!-- Custom css -->
+<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 @include('backend.partials.features')
 
@@ -48,9 +55,10 @@
                 <div class="form-group">
                 <label for="exampleFormControlInput1">image</label>
                 
-        
-                <input type="file" name="image" class="form-control" accept="image/*" placeholder="image">
-                <img src="{{ asset('storage/'.$article->image) }}" class="mt-4" width="300px">
+                <div class="input-group mt-4 control-group increment" >
+                                 <input type="file" name="image" class="my-pond form-control "  multiple/>
+                    
+                            </div>
             </div>
 
                 <div class="form-group add">
@@ -81,4 +89,132 @@
         });
 
 </script>
+
+
+</div>
+</div>
+
+<script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
+
+<script  type="module">
+    var  img_width = 1080 ;
+    var img_height = {{ env('IMG_HEIGHT') }};
+    var img_quality = {{ env('IMG_QUALITY') }};
+    var  img_ratio = {{ env('IMG_RATIO') }};
+    var  max_files  = {{ env('MAX_FILES') }};
+    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
+    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
+    var   pond_selector = '.my-pond';
+import {
+        FilePondPluginImageEditor,
+    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
+	
+// import Pintura Image Editor modules
+import {
+    // Image editor
+
+    
+    openEditor,
+    processImage,
+    createDefaultImageReader,
+    createDefaultImageWriter,
+    createDefaultImageOrienter,
+
+    // Only needed if loading legacy image editor data
+    legacyDataToImageState,
+
+    // Import the editor default configuration
+    getEditorDefaults,
+} from '/pintura/pintura.js';
+
+// French
+import fr_FR from '/filepond/locale/fr-fr.js';
+
+  
+
+    
+FilePond.setOptions(fr_FR);
+
+// Register plugins
+FilePond.registerPlugin(
+    FilePondPluginImageEditor,
+    FilePondPluginFilePoster,
+    FilePondPluginImageExifOrientation,
+    FilePondPluginFileValidateType,
+    FilePondPluginFileValidateSize,
+);
+
+
+
+FilePond.create(document.querySelector(pond_selector), {
+    // Attributes
+    name: 'image',
+    maxFiles: max_files,
+    allowFileSizeValidation: true,
+    maxFileSize: max_file_size,
+    allowBrowse: true,
+    acceptedFileTypes: ['image/*'],
+    dropOnPage: true,
+    dropOnElement: true,
+    instantUpload: instant_upload,
+    
+    // FilePond Image Editor plugin properties
+    imageEditor: {
+        // Maps legacy data objects to new imageState objects (optional)
+        legacyDataToImageState: legacyDataToImageState,
+
+        // Used to create the editor (required)
+        createEditor: openEditor,
+
+        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
+        imageReader: [
+            createDefaultImageReader,
+            {
+                // createDefaultImageReader options here
+            },
+        ],
+
+        // Required when generating a preview thumbnail and/or output image
+        imageWriter: [
+            createDefaultImageWriter,
+            {
+                // We'll resize images to fit a 512 × 512 square
+                targetSize: {
+                    width: img_width,
+                    height: img_height,
+                },
+                quality: img_quality,
+            },
+        ],
+
+        // Used to create poster and output images, runs an invisible "headless" editor instance
+        imageProcessor: processImage,
+
+        // Pintura Image Editor options
+        editorOptions: {
+            // Pass the editor default configuration options
+            ...getEditorDefaults(),
+
+            // This will set a square crop aspect ratio
+            imageCropAspectRatio: img_ratio,
+        }
+    }
+});
+            FilePond.setOptions({
+            server: {
+                    process: '/file-upload-slide',
+                    revert: '/file-delete-slide',
+                
+                    headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+                    
+                },
+            });
+
+</script>
+
 @endsection

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

@@ -64,7 +64,7 @@
 
                     
                     <div class="input-group control-group increment" >
-                    <input type="file" name="diapo" class="my-pond form-control" multiple />
+                    <input type="file" name="diapo" class="my-pond form-control "  multiple/>
                     
                     </div>
                   

resources/views/backend/produit/extension/document.blade.php

@@ -0,0 +1,101 @@
+@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">
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+
+<link
+    href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css"
+    rel="stylesheet"
+/>
+<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('/produitDoc/'.$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="document" class="form-control "  multiple/>
+                    
+                    </div>
+                  
+                    <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="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script>
+    // Get a reference to the file input element
+    const inputElement = document.querySelector('input[type="file"]');
+
+    // Create a FilePond instance
+    const pond = FilePond.create(inputElement);
+    FilePond.setOptions({
+    server: {
+        process: '/doc-upload',
+        revert: '/doc-delete',
+        headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+       
+    },
+});
+</script>
+
+
+
+@endsection

resources/views/backend/produit/index.blade.php

@@ -159,7 +159,7 @@
             $.ajax({
                 type: "GET"
                 , dataType: "json"
-                , url: '/changeStatusCategory'
+                , url: '/changeStatusProduit'
                 , data: {
                     'etat': etat
                     , 'Id': Id

resources/views/backend/produit/show.blade.php

@@ -40,7 +40,7 @@
                                 <i class="fa fa-puzzle-piece"></i> Extensions
                             </button>
                             <ul class="dropdown-menu">
-                                <a>
+                                <a href="{{url('produit/'.$article->id.'/editDoc')}}">
                                     <li><button class="dropdown-item" type="button"><i class="fa-solid fa-pen"></i> Ducument</button></li>
                                 </a>
                                
@@ -62,12 +62,12 @@
                     <div><i class="fa-solid fa-calendar-days"></i> <strong>Date de mise à jour : </strong> {{$article->created_at}}</div>
 
                     <div class="mt-3"><i class="fa-solid fa-list-ul"></i> <strong>Categorie : </strong> {{ $article->categorie->nom}}</div>
-                    
+                    <a href="{{ route('doc.download', $article->id) }}">{{ $article->document }}</a> 
                     <div class="mt-3"><i class="fa-solid fa-circle-info"></i> <strong>Descritpion : </strong> {!! html_entity_decode ($article->description)!!}</div>
 
                     <div class=" mt-3 showImage">
 
-                        <img src="{{ asset('storage/'.$article->image) }}" alt="description of myimage">
+                        <img src="{{ asset('storage/image/'.$article->image) }}" alt="description of myimage">
                         
                     </div>
 

resources/views/backend/slide/add.blade.php

@@ -6,7 +6,13 @@
 
 @include('backend.partials.features')
 
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
 
+<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
+
+<!-- Custom css -->
+<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
 
     <div class="card mt-4">
         <div class="card-header">
@@ -41,15 +47,13 @@
                     <div class="form-group mt-4">
                         <input type="text" class="form-control" id="titre" name="titre" placeholder="Titre" required>
                     </div>
-                        <div class="form-group mt-4">
-
-                            <input type="file" name="image" id="profile_image" onchange="loadPreview(this);" class="form-control" >
-
-                            <label for="profile_image"></label>
-                            <img id="preview_img" src="https://w3adda.com/wp-content/uploads/2019/09/No_Image-128.png" class="" width="200" height="150" />
+                        
 
-
-                        </div>
+                        <div class="input-group mt-4 control-group increment" >
+                        <input type="file" name="image" class="my-pond form-control "  multiple/>
+                    
+                            </div>
+                       
                     </div>
                     
                         <div class="form-group col-md-4 mt-4">
@@ -65,4 +69,129 @@
 </div>
 @include('backend.partials.upload')
 
+<script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
+
+<script  type="module">
+    var  img_width = 1080 ;
+    var img_height = {{ env('IMG_HEIGHT') }};
+    var img_quality = {{ env('IMG_QUALITY') }};
+    var  img_ratio = {{ env('IMG_RATIO') }};
+    var  max_files  = {{ env('MAX_FILES') }};
+    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
+    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
+    var   pond_selector = '.my-pond';
+import {
+        FilePondPluginImageEditor,
+    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
+	
+// import Pintura Image Editor modules
+import {
+    // Image editor
+
+    
+    openEditor,
+    processImage,
+    createDefaultImageReader,
+    createDefaultImageWriter,
+    createDefaultImageOrienter,
+
+    // Only needed if loading legacy image editor data
+    legacyDataToImageState,
+
+    // Import the editor default configuration
+    getEditorDefaults,
+} from '/pintura/pintura.js';
+
+// French
+import fr_FR from '/filepond/locale/fr-fr.js';
+
+  
+
+    
+FilePond.setOptions(fr_FR);
+
+// Register plugins
+FilePond.registerPlugin(
+    FilePondPluginImageEditor,
+    FilePondPluginFilePoster,
+    FilePondPluginImageExifOrientation,
+    FilePondPluginFileValidateType,
+    FilePondPluginFileValidateSize,
+);
+
+
+
+FilePond.create(document.querySelector(pond_selector), {
+    // Attributes
+    name: 'image',
+    maxFiles: max_files,
+    allowFileSizeValidation: true,
+    maxFileSize: max_file_size,
+    allowBrowse: true,
+    acceptedFileTypes: ['image/*'],
+    dropOnPage: true,
+    dropOnElement: true,
+    instantUpload: instant_upload,
+    
+    // FilePond Image Editor plugin properties
+    imageEditor: {
+        // Maps legacy data objects to new imageState objects (optional)
+        legacyDataToImageState: legacyDataToImageState,
+
+        // Used to create the editor (required)
+        createEditor: openEditor,
+
+        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
+        imageReader: [
+            createDefaultImageReader,
+            {
+                // createDefaultImageReader options here
+            },
+        ],
+
+        // Required when generating a preview thumbnail and/or output image
+        imageWriter: [
+            createDefaultImageWriter,
+            {
+                // We'll resize images to fit a 512 × 512 square
+                targetSize: {
+                    width: img_width,
+                    height: img_height,
+                },
+                quality: img_quality,
+            },
+        ],
+
+        // Used to create poster and output images, runs an invisible "headless" editor instance
+        imageProcessor: processImage,
+
+        // Pintura Image Editor options
+        editorOptions: {
+            // Pass the editor default configuration options
+            ...getEditorDefaults(),
+
+            // This will set a square crop aspect ratio
+            imageCropAspectRatio: img_ratio,
+        }
+    }
+});
+            FilePond.setOptions({
+            server: {
+                    process: '/file-upload-slide',
+                    revert: '/file-delete-slide',
+                
+                    headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+                    
+                },
+            });
+
+</script>
+
+
+
 @endsection

resources/views/backend/slide/edit.blade.php

@@ -2,6 +2,15 @@
 
 
 @section('content')
+
+
+<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
+
+<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
+
+<!-- Custom css -->
+<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 @include('backend.partials.features')
 
@@ -18,10 +27,10 @@
                 </div>
                 <div class="form-group">
                 <label for="exampleFormControlInput1">image</label>
-                
-        
-                <input type="file" name="image" class="form-control" accept="image/*" placeholder="image">
-                <img class="mt-4" src="{{ asset('storage/'.$article->image) }}" width="300px">
+                <div class="input-group mt-4 control-group increment" >
+                        <input type="file" name="image" class="my-pond form-control "  multiple/>
+                    
+                            </div>
             </div>
 
                 <div class="form-group add">
@@ -33,4 +42,130 @@
     </div>
 </div>
 
+@include('backend.partials.upload')
+
+<script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
+<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
+
+<script  type="module">
+    var  img_width = 1080 ;
+    var img_height = {{ env('IMG_HEIGHT') }};
+    var img_quality = {{ env('IMG_QUALITY') }};
+    var  img_ratio = {{ env('IMG_RATIO') }};
+    var  max_files  = {{ env('MAX_FILES') }};
+    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
+    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
+    var   pond_selector = '.my-pond';
+import {
+        FilePondPluginImageEditor,
+    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
+	
+// import Pintura Image Editor modules
+import {
+    // Image editor
+
+    
+    openEditor,
+    processImage,
+    createDefaultImageReader,
+    createDefaultImageWriter,
+    createDefaultImageOrienter,
+
+    // Only needed if loading legacy image editor data
+    legacyDataToImageState,
+
+    // Import the editor default configuration
+    getEditorDefaults,
+} from '/pintura/pintura.js';
+
+// French
+import fr_FR from '/filepond/locale/fr-fr.js';
+
+  
+
+    
+FilePond.setOptions(fr_FR);
+
+// Register plugins
+FilePond.registerPlugin(
+    FilePondPluginImageEditor,
+    FilePondPluginFilePoster,
+    FilePondPluginImageExifOrientation,
+    FilePondPluginFileValidateType,
+    FilePondPluginFileValidateSize,
+);
+
+
+
+FilePond.create(document.querySelector(pond_selector), {
+    // Attributes
+    name: 'image',
+    maxFiles: max_files,
+    allowFileSizeValidation: true,
+    maxFileSize: max_file_size,
+    allowBrowse: true,
+    acceptedFileTypes: ['image/*'],
+    dropOnPage: true,
+    dropOnElement: true,
+    instantUpload: instant_upload,
+    
+    // FilePond Image Editor plugin properties
+    imageEditor: {
+        // Maps legacy data objects to new imageState objects (optional)
+        legacyDataToImageState: legacyDataToImageState,
+
+        // Used to create the editor (required)
+        createEditor: openEditor,
+
+        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
+        imageReader: [
+            createDefaultImageReader,
+            {
+                // createDefaultImageReader options here
+            },
+        ],
+
+        // Required when generating a preview thumbnail and/or output image
+        imageWriter: [
+            createDefaultImageWriter,
+            {
+                // We'll resize images to fit a 512 × 512 square
+                targetSize: {
+                    width: img_width,
+                    height: img_height,
+                },
+                quality: img_quality,
+            },
+        ],
+
+        // Used to create poster and output images, runs an invisible "headless" editor instance
+        imageProcessor: processImage,
+
+        // Pintura Image Editor options
+        editorOptions: {
+            // Pass the editor default configuration options
+            ...getEditorDefaults(),
+
+            // This will set a square crop aspect ratio
+            imageCropAspectRatio: img_ratio,
+        }
+    }
+});
+            FilePond.setOptions({
+            server: {
+                    process: '/file-upload-slide',
+                    revert: '/file-delete-slide',
+                
+                    headers:{
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
+                    
+                },
+            });
+
+</script>
+
+
 @endsection

resources/views/backend/slide/show.blade.php

@@ -70,7 +70,7 @@
 
                     <div class="showImage">
 
-                        <img src="{{ asset('storage/'.$article->image) }}" alt="description of myimage">
+                        <img src="{{ asset('storage/image/'.$article->image) }}" alt="description of myimage">
                         
                     </div>
                 </div>

routes/web.php

@@ -50,7 +50,8 @@ Route::get('presentations/{id}/editVideo', [App\Http\Controllers\backend\Present
 Route::put('presentationsVideo/{id}', [App\Http\Controllers\backend\PresentationController::class, 'uploadVideo']);
 Route::delete("deleteVideo/{id}", [App\Http\Controllers\backend\PresentationController::class, "deleteVideo"])->name("delete");
 
-
+Route::POST('/file-upload-presentation', [App\Http\Controllers\backend\PresentationController::class, 'fileUpload']);
+Route::delete("/file-delete-presentation", [App\Http\Controllers\backend\PresentationController::class, "deleteUpload"]);
 // Route::resource('/test', PresentationController::class);
 
 //Slide backend
@@ -63,7 +64,8 @@ Route::get('slide/{id}/edit', [App\Http\Controllers\backend\SlideController::cla
 Route::put('slide/{id}', [App\Http\Controllers\backend\SlideController::class, 'update']);
 Route::delete("slide/{id}", [App\Http\Controllers\backend\SlideController::class, "destroy"]);
 Route::get('changeStatusSlide',  [App\Http\Controllers\backend\SlideController::class, 'changeStatus']);
-
+Route::POST('/file-upload-slide', [App\Http\Controllers\backend\SlideController::class, 'fileUpload']);
+Route::delete("/file-delete-slide", [App\Http\Controllers\backend\SlideController::class, "deleteUpload"]);
 
 //category backend
 Route::get('/categories', [App\Http\Controllers\backend\CategorieController::class, 'Index'])->name('categories');
@@ -77,7 +79,8 @@ Route::get('categorie/{id}/edit', [App\Http\Controllers\backend\CategorieControl
 Route::put('categorie/{id}', [App\Http\Controllers\backend\CategorieController::class, 'update']);
 Route::delete("categorie/{id}", [App\Http\Controllers\backend\CategorieController::class, "destroy"]);
 Route::get('changeStatusCategory',  [App\Http\Controllers\backend\CategorieController::class, 'changeStatus']);
-
+Route::POST('/file-upload-category', [App\Http\Controllers\backend\CategorieController::class, 'fileUpload']);
+Route::delete("/file-delete-category", [App\Http\Controllers\backend\CategorieController::class, "deleteUpload"]);
 //produit categorie
 
 
@@ -93,11 +96,20 @@ Route::get('produit/{id}/diapo', [App\Http\Controllers\backend\ProduitController
 Route::put('produitDiapo/{id}', [App\Http\Controllers\backend\ProduitController::class, 'updateDiapo']);
 Route::delete("deleteMedia/{id}", [App\Http\Controllers\backend\ProduitController::class, "destroyMedia"])->name("delete");
 Route::delete("produit/{id}", [App\Http\Controllers\backend\ProduitController::class, "destroyProduit"]);
-
+Route::POST('/file-upload-produit', [App\Http\Controllers\backend\ProduitController::class, 'fileUploadProduit']);
+Route::delete("/file-delete-produit", [App\Http\Controllers\backend\ProduitController::class, "fileDeleteProduit"]);
 
 Route::POST('/file-upload', [App\Http\Controllers\backend\ProduitController::class, 'fileUpload']);
 Route::delete("/file-delete", [App\Http\Controllers\backend\ProduitController::class, "deleteUpload"]);
+Route::get('changeStatusProduit',  [App\Http\Controllers\backend\ProduitController::class, 'changeStatus']);
+
+Route::get('produit/{id}/editDoc', [App\Http\Controllers\backend\ProduitController::class, 'editDoc']);
+Route::get('Doc/{id}/download', [App\Http\Controllers\backend\ProduitController::class, 'downloadDoc'])->name('doc.download');
+
+Route::put('produitDoc/{id}', [App\Http\Controllers\backend\ProduitController::class, 'updateDoc']);
 
+Route::POST('/doc-upload', [App\Http\Controllers\backend\ProduitController::class, 'docUpload']);
+Route::delete("/doc-delete", [App\Http\Controllers\backend\ProduitController::class, "docUploadDelete"]);
 
 // Route::get('changeStatusProduit',  [App\Http\Controllers\backend\ProduitController::class, 'changeStatus']);