Simple single file upload with Drag'n'Drop for Vue2 and Vue3

Overview

Simple single file upload with Drag'n'Drop for Vue2 and Vue3

npm downnloads count MIT    Twitter Follow

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

Demo

Installation

NPM

npm i @beaubus/single-file-upload-for-vue

CDN

">
<script src="https://unpkg.com/@beaubus/single-file-upload-for-vue/dist/min.js">>

Usage

import single_file_upload_for_vue from '@beaubus/single-file-upload-for-vue';

components: {
    'single-file-upload-for-vue': single_file_upload_for_vue
}

Wrap component with

as it takes all the space:

">
<div style="width: 120px; height: 120px">
    <single-file-upload-for-vue
        name="name_of_the_file_input"
        store_url="/url-to-backend-store"
        destroy_url="/url-to-backend-destroy"
        :headers="{'Accept': 'application/json'}"
        :loaded="{url: 'https://full-url-to-your-file.pdf', size: 56}"
        @complete="uploadComplete"
    >single-file-upload-for-vue>
div>

Backend

On the server side you shoud handle POST and DELETE requests. DELETE url would have file name at the end.

Request Return
POST {url: 'full-url', size: 0}
DELETE {result: true}

Laravel example:

// routes/web.php

Route::post('/upload', '[email protected]');
Route::delete('/destroy/{file_name}', '[email protected]');


// PrintableInvoicesController.php

public function uploadCustomInvoice(Request $request): array
{
    $path = $request->custom_invoice_file->store('folder');
    $url = asset('storage/' . $path);

    return [
        'url' => $url,
        'size' => \Storage::size($path),
    ];
}


public function destroyCustomInvoice(string $file_name): array
{
    return [
        'result' => \Storage::delete('folder/' . $file_name)
    ];
}

Styling

Increase specificity and style it as you need:

div > .single-file-upload-for-vue {
    font-size: .75em;
    border: 2px dashed #dc5f00;
    background: #ffe484;
    border-radius: 20%;
}

Properties

Name Type Default Description
name String 'file_input' Name of the file input
store_url String '/store-url' url for the POST request
destroy_url String '/destroy-url' url for the DELETE request (file name would be appended to the end)
headers Object Request headers
loaded Object Absolute link to the loaded file (url) and size in bytes (size)
accept String A comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow

Emits

Name Description Payload
complete Upload complete event Absolute link to the uploaded file and size in bytes: {url: 'link', size: 7}

License

The MIT License (MIT). Please see License File for more information.

You might also like...
Vue Component for upload a file with drag and drop, and out data will be json with data in base64 formate

Vue Component for upload a file with drag and drop, and out data will be json with data in base64 formate

The most beautiful and full featured file upload component for Vue JS
The most beautiful and full featured file upload component for Vue JS

🔥 V2 is in the making...! Vue File Agent Every file deserves to be treated equally High performant Vue file upload component with elegant and disting

The most beautiful and full featured file upload component for Vue JS
The most beautiful and full featured file upload component for Vue JS

High performant Vue file upload component with elegant and distinguishable previews for every file type and support for drag and drop, validations, default uploader with progress support and externally customizable in the "vue way"

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

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

S3Client - A Javascript Library for AWS S3 File Upload

S3FileUpload is libray for upload any type of files to Amazon AWS S3

vue-file-upload,vue上传文件组件

vue-file-upload,vue上传文件组件

Vue.js file upload component The component is just a button

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. fork from lianyue's vue-upload-component

A SSR compatible vue component which can handle file upload / deleting directly to / from a AWS S3 Bucket

Vue Bucket Loader This Project provides a SSR compatible vue component which can handle file upload / deleting directly to / from a AWS S3 Bucket.

S3Client - A Javascript Library for AWS S3 File Upload

S3Client - A Javascript Library for AWS S3 File Upload

Owner
Andrew
Andrew
A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop

v-uploader A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop Examples and D

Terry Zeng 231 Nov 21, 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
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 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

James Doyle 232 Feb 24, 2022
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
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
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

Mohamed Hafidi 8 Aug 17, 2022
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

Varun Kruthiventi 143 Nov 17, 2022
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

Magic Academy 1 Dec 19, 2021
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

Brosseau Valentin 6 Oct 20, 2020