Nullifying Precipitation Machine

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

    0.2.4 • Public • Published

    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). Simple and lightweight.

    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 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', '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.

    Install

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

    DownloadsWeekly Downloads

    10

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    105 kB

    Total Files

    12

    Last publish

    Collaborators

    • beaubus