laravel-vue multiple image not storing in database

Question

i am trying to upload multiple images.after selecting images when i submit the form then i got this--

"{message: "The given data was invalid.", errors: {media: ["The media field is required."]}}"

it looks like the "media[]" field is not getting the value. But i got the data in media array(see the image)

how can i solve this

my productController code-

`public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|max:255',
            'price' => 'required|integer',
        
        'media'=>'required',

    ]);


    $product = Product::create([
        'title' => $request->title,
        'price' => $request->price,
        
    ]);

    if ($request->image) {
        $imageName = time() . '_' . uniqid() . '.' . $request->image->getClientOriginalExtension();
        $request->image->move(public_path('storage/product'), $imageName);
        $product->image = '/storage/product/' . $imageName;
        $product->save();
    }

    foreach($request->media as $image){
        $from = public_path('tmp/uploads/'.$image);
        $to = public_path('product_images/'.$image);

        File::move($from, $to);
        $product->images()->create([
          'name' => $image,
        ]);
      }
  

    return response()->json($product, 200);
}`

my imageController code is--

public function store(Request $request){

    $path = public_path('tmp/uploads');

    if (!file_exists($path)) {
      mkdir($path, 0777, true);
    }

    $file = $request->file('image');

    $name = uniqid() . '_' . trim($file->getClientOriginalName());

    $file->move($path, $name);

    return ['name'=>$name];
  }

  public function getImages(Product $product){
    $images = $product->images;
    return ['media'=>$images];
  }

api.php--

Route::resource('product','ProductController');
Route::post('/upload', [ImageController::class, 'store'])->name('upload');
Route::get('/media/{product}', [ImageController::class, 'getImages'])->name('product.images');

vue component---

import axios from 'axios'
export default {
    data(){
        return{
            media:[],
            loading:false,
        }
    },
    methods:{
        async fileChange(event){
            this.loading=true
            let files = event.target.files
            for(var i=0; i < files.length; i++){
                let formData = new FormData
                let url = URL.createObjectURL(files[i])
                formData.set('image', files[i])
                const {data} = await axios.post(this.server, formData)
                
            this.media.push({url:url, name:data.name, size:files[i].size, type:files[i].type});
                
                
        }
        this.loading=false
        this.media_emit()
    },
    remove(index){
        this.media.splice(index,1)
        this.media_emit()
    },
    media_emit(){
        this.$emit('media',this.media)
    }
},
mounted() {
    this.$emit('media',this.media)
},

You are appending image as the key in the FormData in the vue component while the validation rules is looking for a key media hence you are getting the validation error. Also you are newing up FormData within for loop - instead move let formData = new FormData out of the for loop — Donkarnash
– Donkarnash, Commented Jun 16, 2022 at 18:53

fluid undefined · Accepted Answer · 2022-06-16 16:30:01Z

1

You could try:

$this->validate($request, [
    'title' => 'required|max:255',
    'price' => 'required|integer',        
    'media.*' => 'required|mimes:jpg,jpeg,png|max:20000']);

It also validates it is a an image with those extensions.

answered Jun 16, 2022 at 16:30

fluid undefined

4193 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rahi bd Over a year ago

i am following this tutorial.dev.to/simodev/… he didn't use 'media.*'. i tried your solution. not working. thanks

fluid undefined Over a year ago

did you try the answer?

rahi bd Over a year ago

yes. it is showing---SQLSTATE[42S22]: Column not found: 1054 Unknown column 'media' in 'field list'

fluid undefined Over a year ago

Well, now the validation is passing, now you have to check your DB, maybe a migration is missing

rahi bd Over a year ago

now showing -- {message: "Invalid argument supplied for foreach()", exception: "ErrorException",…} . it cant recognize the "media"

Collectives™ on Stack Overflow

laravel-vue multiple image not storing in database

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related