Multiple Images Upload In Vuejs and Inertia(Jetstream & Laravel8)

I have Simple Form in VueJs for creating User's Post ,the post consists of title, keyword ,description and Photos The Backend Logic for storing the post to the database works well,but the problem is I don't know exactly how to get multiple images from the file input

Here is vuejs codes for selecting photos and preview

        <jet-label for="photo" />


        <div class="mt-2" v-show="photoPreview">
            <span class="block rounded w-20 h-20"
                  :style="'background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photoPreview + '\');'">
            </span>
        </div>
        <jet-secondary-button class="mt-2 mr-2" type="button" @click.native.prevent="selectNewPhoto">
            Choose Photos
        
        </jet-secondary-button>
        


        <jet-input-error :message="form.error('photo_path')" class="mt-2" />
    </div>

My method:

  createPost() {
           
               if (this.$refs.photo) {
                   for (let index = 0; index < this.$refs.photo.files.length; index++) {
                       let file = this.$refs.photo.files[index]
                  this.form.photo_path = file
                       
                   }
                       
            }
        
            
    
            this.form.post('/post/store', {
                preserveScroll: true
            });
        },

When user click submit button, only one photo is stored in database....How can i fix above codes to allow multiple images upload?

alexleo

5 years ago

Level 1

anyone?

issamTK

4 years ago

Level 1

@alexleo Hello there I've been looking at your problem then I see that you have been sending just one file you should instead of this.form.photo_path = file // here will always replace the old file inside the loop so you should instead do something like photo_path.push(file)

if (this.$refs.photo) { for (let index = 0; index < this.$refs.photo.files.length; index++) { let file = this.$refs.photo.files[index] this.form.photo_path.push(file); } } I hope it helps

Please or to participate in this conversation.