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

  

A universal, modern upload input package that supports both Vue2 and Vue3. It features Drag'n'Drop functionality and is based on the Fetch API, supporting both POST and DELETE methods. This package is simple, lightweight, and easy to use.

Demo

Installation

NPM

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

CDN

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

Usage

1import single_file_upload_for_vue from '@beaubus/single-file-upload-for-vue';
2
3components: {
4    'single-file-upload-for-vue': single_file_upload_for_vue
5}

Wrap component with <div> as it takes all the space:

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

Backend

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

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

Laravel example:

1// routes/web.php
2
3Route::post('/upload', 'PrintableInvoicesController@uploadCustomInvoice');
4Route::delete('/destroy/{file_name}', 'PrintableInvoicesController@destroyCustomInvoice');
5
6
7// PrintableInvoicesController.php
8
9public function uploadCustomInvoice(Request $request): array
10{
11    $path = $request->custom_invoice_file->store('folder');
12    $url = asset('storage/' . $path);
13
14    return [
15        'url' => $url,
16        'size' => \Storage::size($path),
17    ];
18}
19
20
21public function destroyCustomInvoice(string $file_name): array
22{
23    return [
24        'result' => \Storage::delete('folder/' . $file_name)
25    ];
26}

Styling

Increase specificity and style it as you need:

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

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.