AliTalib's avatar

how can i use lian-yue/vue-upload-component in laravel

hi there i need example for use this plugin in laravel and vue.js to uplooad one file and one image on two to two input files and three text input

this my form

<form @submit.prevent="upload" class="ui form card w-100" method="POST" enctype="multipart/form-data">

    <div class="content">
        <div class="header center aligned">Upload file</div>
    </div>
    <div class="content">
        <div class="two fields">
            <div class="field">
                <label>File</label>
                <input type="file" name="file" @change="upload_file">
            </div>
            <div class="field">
                <label>File Poster</label>
                <input type="file" name="poster" @change="upload_poster">
            </div>
        </div>
        <div class="field">
            <input type="text" v-model="form.title" placeholder="Title" autocomplete="off" required/>
        </div>
        <div class="two fields">
            <div class="field">
                <select v-model="form.category" class="ui fluid search dropdown" required>
                    <option value="">File Type</option>
                    <option value="programs">programs</option>
                    <option value="games">games</option>
                    <option value="applications">applications</option>
                    <option value="videos">videos</option>
                </select>
            </div>

            <div class="field">
                <select v-model="form.tag" class="ui fluid search dropdown" required>
                    <option value="">tag</option>
                    <option value="pc">windows</option>
                    <option value="mac">mac</option>
                    <option value="linux">linux</option>
                </select>
            </div>
        </div>
        <div class="field">
            <textarea rows="4" v-model="form.description" placeholder="description" required></textarea>
        </div>
    </div>
    <div class="extra content center aligned">
        <button type="submit" class="ui right labeled icon primary button"><i class="upload icon"></i>Upload file</button>
    </div>
</form>

and this my script

export default {
    name: "Upload",

    data() {
        return {
            form: new Form ({
                id: '',
                title: '',
                file: '',
                poster: '',
                category: '',
                tag: '',
                description: '',
            })
        }
    },

    methods: {

        upload() {
            this.$Progress.start();

            this.form.post('api/upload')
                .then(() => {

                    this.$Progress.finish();
                })
                .catch(() => {

                    this.$Progress.fail()
                })
        },
    // upload image if worked 
        upload_poster: function (images) {
            let file = images.target.files[0];
            console.log(file);
            let reader = new FileReader();
            if (file['size'] < 2111775 & file['type'] == ['image/jpeg'] || file['type'] == ['image/jpg'] || file['type'] == ['image/png'] || file['type'] == ['image/gif']) {
                reader.onloadend = (file) => {
                    this.form.poster = reader.result;
                };
                reader.readAsDataURL(file);
            }else {
                swal({
                    type: 'error',
                    title: 'something wrong',
                    html:
                        '<p>Image size must be less than 2 MB</p>' +
                        '<p>[jpg, jpeg, png, gif] and be extinction</p>',
                })
            }
        },
    // i need here to upload file using lian-yue/vue-upload-component
        upload_file: function (files) {

    }else {
                swal({
                    type: 'error',
                    title: 'something wrong',
                    html:
                        '<p>File size must be less than 200 GB</p>' +
                        '<p>[ zip , rar , apk , ipk ] and be extinction</p>',
                })
            }
        },
    }
}
0 likes
5 replies
AliTalib's avatar

@D9705996

Yes I tried it but it did not work, please apply it to my code if you can

D9705996's avatar

Please show the code you tried, what didn't work and any errors you received. Happy to help but I'm not going to write your code for you.

1 like
D9705996's avatar

@alitalib - you will need to go back, read the documentation again, review the samples and try to make them fit your requirements.

1 like

Please or to participate in this conversation.