Skip to content

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

License

Notifications You must be signed in to change notification settings

beaubus/single-file-upload-for-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

npm downnloads count MIT    Twitter Follow

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

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

CDN

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

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 <div> 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 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:

// routes/web.php

Route::post('/upload', 'PrintableInvoicesController@uploadCustomInvoice');
Route::delete('/destroy/{file_name}', 'PrintableInvoicesController@destroyCustomInvoice');


// 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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published