Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

laravelde ajax ile resim yüklemiyor yardım

Betmen35

selamlar laravelde şu aşağıda yazdığım kod ile formu sayfa yenilenmeden post edicem ama post etmiyor çalışmıyor yani

@extends('backend.dashboard')
@section('title','Anasayfa')
@section('sidebar')
@endsection

@section('content')

<form action="{{ route('product.store') }}" method="post" id="dataform" enctype="multipart/form-data">

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Resim</label>
  <input type="file" class="form-control" id="picture"
   placeholder="resim yükle" name="picture" >
</div>



<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Konu ismi</label>
  <input type="text" class="form-control" id="exampleFormControlInput1"
   placeholder="sayfa ismi" name="product">
</div>


  <textarea name="editor1" id="editor"></textarea>
                <script>
                        CKEDITOR.replace('editor1');
                </script>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Hangi Sayfaya ait?</label>

<select class="form-select" name="sayfa" multiple aria-label="Multiple select example">
  
@foreach($page as $pag)

<option value="{{ $pag->id }}">{{$pag->page_name}}</option>

@endforeach
</select>
</div>
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Fiyat</label>
  <input type="text" class="form-control" id="exampleFormControlInput1"
   placeholder="fiyatı" name="price">
</div>

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Stok</label>
  <input type="text" class="form-control" id="exampleFormControlInput1"
   placeholder="stok" name="stok">
</div>
<button class="btn btn-primary" type="submit" id="Tikla">Konu aç</button>
@csrf
</form>

<div id="loader"></div>

<script>
$(document).ready(function() {
  

  $("#Tikla").click(function(event) {
    event.preventDefault();
    var form = this;
var picture= $('#picture').val();


    $.ajax({
            type:'post',
            url:"{{route('product.store')}}",
            data:$('#dataform').serialize(),
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          
            success:function (service){
            alert("Başarı ile kaydedildi..");
            },
            error:function (XMLHttpRequest){
                console.log(XMLHttpRequest);

                alert('Hata..!!');
            }

        })
        
  });
});
</script>
@endsection

umutcankarce

``Betmen35 @csrf i button altında yazmışsınız <form> etiketi sonrasına yazabilirsiniz ve var picture = $("#picture").val(); olarak resmi alamazsınız bunun için FormData props u deneyin. File input a FormData(); props dan erişim oluyor.

class ImageService {
    public function singleUpload(UploadedFile $file , string $fileName,string $path) : string
    {
        $filePath = "public/". $path;
        $extension = $file->getClientOriginalExtension();
        $name = (Str::slug($fileName). '-' . uniqid()) . '.' . $extension;
        Storage::putFileAs($filePath,$file,$name);

        return 'storage/' . $path . '/' . $name;
    }

    public function deleteImage(string $path)
    {
        if(File::exists($path))
        {
            File::delete($path);
        }
    }
}

Kodu Service olarak kullanmak istemiyorsaniz Controller da Yapabilirsiniz.