A Vue plugin for the simple Ajax file uploading (single or multiple files selection)

Overview

vue-ajax-uploader

A Vue plugin for the simple Ajax file uploading (single or multiple files selection). This plugin works well with any Laravel backend 5.5+.

1. Installation

npm install --save-dev @bkstar18/vue-ajax-uploader  

2. Requirement

  • This plugin requires Bootstrap 4.x and axios package
  • If you follow Laravel's standard setup for frontend, then all things are set out of the box. Otherwise, you may need to manually install axios and configure it to send X-CSRF-TOKEN for every request.

3. Integrate with Laravel backend

After installation, put the following code in resources/js/app.js:

import VueAjaxUploader from '@bkstar18/vue-ajax-uploader';  
Vue.use(VueAjaxUploader);  

Then, compile the frontend assets: npm run production or npm run dev.

In your upload view, for example: resources/views/upload.blade.php, you can use element to render a ajax file upload input, as follows:

<bks123-file-input>Upload Filesbks123-file-input>

If you do not specify any attributes, then the plugin will use the following defaults:

  • input-name: file => name of the file input
  • input-id: file => DOM Id of the file input
  • input-class: '' => class of the file input
  • multiple: false => allow multiple files selection
  • progress-bar-color: bg-primary => bootstrap bg color of the progress bar
  • allowed-extensions: ['png', 'jpg', 'jpeg', 'mp4', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'txt', 'pdf'] => acceptable file extensions
  • upload-url: /upload => the backend URL for upload
  • batch-size: 5 => maximum number of files can be uploaded
  • max-size: 5242880 => maximum file size in bytes (<=> 5 MB)

An example for customizing the default behavior:

Upload Files">
<bks123-file-input input-name="image" 
                   key="image"
                   input-class="form-control"
                   input-id="image-upload"
                   :multiple="true"
                   progress-bar-color="bg-success"
                   :allowed-extensions="['jpg', 'png', 'mp4']"
                   upload-url="/api/upload"
                   :batch-size="10"
                   :max-size="50*1024*1024">Upload Filesbks123-file-input>

Important Note:
The plugin expects to receive JSON response from the backend with success key in case of success or error key in case of error.

Sample structure of JSON responses are as follows:
a) Success response

{
    "success": "Successfully uploaded", // mandatory key
    ...  // other key that you may add
}

b) Error response

{
    "error": "Upload failed", // mandatory key
    ...  // other key that you may add
}

Example:

$data], 200); }">

...
public function upload(Request $request, FileUpload $fileupload)
{
	$data = $fileupload->handle($request, 'image', ['allowedExtensions' => ['jpg', 'png', 'jpeg']]);
	if (!$data) {
		return response()->json(['error' => $fileupload->uploadError], 422);
	}

	// Save data to database

	return response()->json(['success' => "{$data['filename']} has been uploaded", 'data' => $data], 200);
}
You might also like...
Simple and hackable file uploader for VueJs. Supports Vue = 2.1

Introduction Vue clip is a minimalistic and hackable file uploader for VueJs. I wrote this plugin due to the absence of well written file uploaders wi

Simple File upload component for Vue.js

vue-simple-upload An simple file upload component for vue.js. Checkout Demo on JSFiddle Installation npm install vue-simple-upload Usage vue-simple-up

A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars.

vue-file-upload-component A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars. I came up with the o

A simple upload file of vue

vue-uploader-files 安装 npm install vue-uploader-files main.js引入 import upfile from 'vue-uploader-files'; import 'vue-uploader-files/lib/vue-uploader-f

A dead simple Vue.js component to upload file to Firebase Storage
A dead simple Vue.js component to upload file to Firebase Storage

vuetify-vuejs-firebaseUploader A dead simple VueJS component to upload file in Firebase Storage Installation npm install vuetify-vuejs-firebaseuploade

Multiple Images Upload With Preview – Media-Upload

🖼️ Media-Upload-Demo This project is a demo for Media-Upload package: 💻 Installation guide As always you need to: composer install Then npm install

ClipplyCloud - A tool for share files quickly, build on top of Vue 3.
ClipplyCloud - A tool for share files quickly, build on top of Vue 3.

With ClipplyCloud you can upload any file and share it with anyone. All files expire after 30 minutes, so you don't need to delete them. You do not need to login to use this service, as long as it is in the same browser, the list of your uploads will be available.

Easily share text and files between devices. Local P2P.
Easily share text and files between devices. Local P2P.

Clip Beam lets you transfer your data easily between two devices on the same network. Just connect the devices by scanning a QR code and start sharing.

Turn any computer at home into a cloud for easy sharing of files across your devices.
Turn any computer at home into a cloud for easy sharing of files across your devices.

local-cloud This project is still under development ‼️ This program can turn your desktop into a local cloud server. This is a website which will run

Owner
Antony H
Antony H
Vue File upload component is created to help you upload files using vuejs and ajax

Vue File upload component is created to help you upload files using vuejs and ajax

yazan alnughnugh 41 Nov 17, 2022
Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

vue-upload-component Vue.js file upload component The component is just a button Multi-file upload Upload directory Drag upload Drag the directory Upl

LianYue 2.6k Jan 3, 2023
Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

null 0 May 16, 2020
A beautiful vue component for image cropping and uploading. (vue图片剪裁上传组件)

vue-image-crop-upload 中文文档. A beautiful vue component for image crop and upload. Notice: This component is designed for pc, not recommended for use on

dai-siki 2k Dec 29, 2022
Simple single file upload with Drag'n'Drop for Vue2 and Vue3

Modern upload input with Drag'n'Drop support, based on the Fetch Api (POST and DELETE methods). As simple and lightweight as possible.

Andrew 0 Dec 16, 2021
Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

ali jahanpak 63 Nov 24, 2022
Drag and drop multiple file uploader with Vue.js v2 and Axios

vue2-multi-uploader A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of

UPDIVISION 47 Sep 29, 2022
jj-uploader is designed for single file update usage in your Vue App.

jj-uploader is designed for single file update usage in your Vue App. Usage install jj-uploader via npm npm i jj-uploader import it into your view

null 0 Dec 23, 2018
v-file-upload: File upload component for Vue.js

v-file-upload File upload component for Vue.js Installation Using yarn yarn add v-file-upload Using npm npm i --save v-file-upload Demo DEMO Usage As

Daniel Fernando Lourusso 59 Nov 14, 2022
A Vuetify multi file upload with deletions and file previews

Vuetify Upload A Vuetify multi file upload with deletions and file previews. Install the app in your main.js import VuetifyUpload from '@kingscode/vue

Kings Code 5 Jul 24, 2022