Level 51
Have you tried followingvthd package documentation? There is a simple example
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>',
})
}
},
}
}
Please or to participate in this conversation.