npm:tb-vue3-laravel-inertiajs-file-upload

README

Multiple Files Can Be Uploaded With Optional Additional Fields If Required

Without Additional Fields screenshot

With Additional Fields screenshot

To Install:

npm i tb-vue3-laravel-inertiajs-file-upload

Options:

:text default: 'Select File'
:buttonText default: 'Upload'
:accept default: ['image/*']
:url 'path/to/upload.php' Required
:btnClass default: String 'button' edit with your classes
:autoProcess default: true Boolean
:multiple default false Boolean
:additionalFields object, only if you need more form fields, see example
:inputClass: String style additional input fields edit with your classes
:labelClass: String style the form label edit with your classes
:progressBar Boolean default true (clears when completed)
:headerText String default: 'Drag Files Into The File Uploader Below'
:progressBar: Boolean default: true
:showProgressMessage: Boolean default: true

Example:

<template>

     <FileUploader :url="'/upload'"
                          :text="'select an image'"
                          :buttonText="'Upload'"
                          :autoProcess="false"
                          :multiple="true"
                          :btnClass="'btn btn-primary'"
                          :additionalFields="[
                                { 
                                    'type': 'text',
                                    'name': 'test',
                                    'value': 'test',
                                    'id': 'test1',
                                    'labelText': 'test1'
                                 },
                                 
                                { 
                                   'type': 'text',
                                   'name': 'test2',
                                   'value': 'test2',
                                   'id': 'test1',
                                   'labelText': 'test2' 
                                },
                                
                                { 
                                   'type': 'textarea',
                                   'name': 'test3',
                                   'value': 'test3',
                                   'id': 'test3',
                                   'labelText': 'test3',
                                   'cols': '50',
                                   'rows': '3'
                                  }
                           ]"
                          @file-uploader="fileUploader">
     </FileUploader>
      
</template>

<script>
    
    import FileUploader from 'tb-vue3-laravel-inertiajs-file-upload'

    export default {
        components: {
            FileUploader
        },
        setup() {

            //call back from the server
            function fileUploader(response) {
                console.log(response)
            }

            return  { fileUploader }


        }
    }
    
</script>

PHP

when processing serverside images are in array
when looping through the image

$file['file']['tmp_name'][X] where X is the incremented value eg: 0

Usage no npm install needed!

README