Pz-upload-file-vue NPM

PZ Upload File Vue

npm npm bundle size npm

This Vue-based component allows you to use a series of icons from font awesome easily.

Pre-requirements

To use pz-upload-file-vue it is necessary to have Vue installed (version 3 is recommended) in the project to deploy this component.

To use pz-upload-file-vue it is necessary to have Tailwind installed in the project to implement this component.

Enabling JIT mode

To enable just-in-time mode, set the mode option to 'jit' in your tailwind.config.js file:

// tailwind.config.js
module.exports = {

mode: 'jit',
purge: [
    // ...
],
theme: {
    // ...
}
// ...
}

Purge CSS

To get started, provide an array of paths to all of your template files using the purge option:

// tailwind.config.js
module.exports = {
  purge: [
    './node_modules/pz-upload-file-vue/**/*.vue',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

NPM Cache (optional)

This command should only be executed if the component is not compiling properly.

npm cache clean --force

Installation

This is the way to install using npm pz-upload-file-vue in our project.

npm i pz-upload-file-vue@latest

Importing

This is the way to import pz-upload-file-vue into our project.

import PZUploadFile from 'pz-upload-file-vue'

Animations

This is the way to use animations in the component.

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      animation: ['motion-safe'],
    }
  },
}

Support

This component supports the following files:

image (png, jpeg, jpg, webp, etc.)

Using another type of file is not recommended at this time.

Usage

Simple example

This is a simple example where two parameters are sent to the component for use.

{'input-text'} - used to assign the input text.
{'inputTextError'} - used to assign the error text of the input.
{'inputTextColor'} - used to assign the text color of the input.
{'inputIconColor'} - used to assign the color of the input icon.
{'fileIconColor'} - used to map the file icon color.
{'allowedFilesText'} - used to map the text of allowed files.
{'allowedFilesTextColor'} - used to assign the text color of allowed files.
{'allowedFile'} - used to assign the allowed file.
{'inputTitleColor'} - used to assign the color of the input title.
{'themeColorTo'} - used to assign the start of a gradient color to the theme.
{'themeColorFrom'} - used to assign the end of a gradient color to the theme.
{'fileProgressColor'} - used to assign the file progress color.
{'fileGet.url'} - used to assign the file path.
{'fileGet.name'} - used to assign the file name.

<template>
    <PZUploadFile v-on:pz-upload-file="onUploadFile($event)" :inputText="{'input-text'}" :inputTextError="{'inputTextError'}" :inputTextColor="{'inputTextColor'}" :inputIconColor="{'inputIconColor'}" :fileIconColor="{'fileIconColor'}" :allowedFilesText="{'allowedFilesText'}" :allowedFilesTextColor="{'allowedFilesTextColor'}" :allowedFiles="[{'allowedFile'}, {'allowedFile'}]" :inputTitleColor="{'inputTitleColor'}" :themeColorTo="{'themeColorTo'}" :themeColorFrom="{'themeColorFrom'}" :fileProgressColor="{'fileProgressColor'}" :fileGet="{url: {'url'}, name:{'name'}}"/>
</template>

Example:

<template>
    <div class="relative flex justify-center min-h-screen bg-gray-100 items-center pt-0">
        <PZUploadFile v-on:pz-upload-file="onUploadFile($event)" :inputText="'Select file...'" :inputTextError="'Format not allowed.'" :inputTextColor="'text-test5'" :inputIconColor="'text-white'" :fileIconColor="'text-gray-600'" :allowedFilesText="'Allowed files'" :allowedFilesTextColor="'text-gray-600'" :allowedFiles="['png', 'jpg', 'jpeg']" :inputTitleColor="'text-test5'" :themeColorTo="'to-test1'" :themeColorFrom="'from-test2'" :fileProgressColor="'bg-test2'" :fileGet="{url:'https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260', name:'test.png'}" />
    </div>
</template>

<style>
</style>

<script>
    import PZUploadFile from 'pz-upload-file-vue'

    export default {
        emits: ['pz-upload-file'],
        components: {
            PZUploadFile
        },
        data() {
            return {
                form: {
                    file: '',
                },
            }
        },
        methods: {
            onUploadFile(file) {
                this.form.file = file;
            },
        }
    }
</script>

Example with Laravel

Vue component:

<template>
    <div class="relative flex justify-center min-h-screen bg-gray-100 items-center pt-0">
        <div class="grid">
            <PZUploadFile v-on:pz-upload-file="onUploadFile($event)" :inputText="'Select file...'" :inputTextError="'Format not allowed.'" :inputTextColor="'text-test5'" :inputIconColor="'text-white'" :fileIconColor="'text-gray-600'" :allowedFilesText="'Allowed files'" :allowedFilesTextColor="'text-gray-600'" :allowedFiles="['png', 'jpg', 'jpeg']" :inputTitleColor="'text-test5'" :themeColorTo="'to-test1'" :themeColorFrom="'from-test2'" :fileProgressColor="'bg-test2'" :fileGet="{url:'https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260', name:'test.png'}" />
            <form @submit.prevent="onSubmit" class="p-8 grid justify-center">
                <input class="w-40 bg-white text-test5 font-bold hover:bg-gradient-to-br hover:to-test2 hover:from-test1 hover:text-white rounded-lg p-1 shadow-xl cursor-pointer transform motion-safe:hover:scale-110 transition duration-300 ease-in-out" type="submit" value="Submit">
            </form>
        </div>
    </div>
</template>

<style>
</style>

<script>
    import PZUploadFile from 'pz-upload-file-vue'

    export default {
        emits: ['pz-upload-file'],
        components: {
            PZUploadFile
        },
        data() {
            return {
                form: {
                    file: '',
                },
            }
        },
        methods: {
            onUploadFile(file) {
                this.form.file = file;
            },
            onSubmit() {
                axios.post('http://127.0.0.1:8000/api/test', {data: this.form})
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
        }
    }
</script>

PHP routes:

// api.php
use App\Http\Controllers\TestController;
// ...
Route::post('/test', [TestController::class,'post']);

PHP controller:

It is recommended to use the Carbon library for dates and the Image library (Intervention Image) to reduce image files.

// api.php
use Carbon\Carbon;
use Image;
// ...
class TestController extends Controller {
    public function post(Request $request) {
        $fileName = Carbon::now()->timestamp . '_' . uniqid().'.webp';
        $img = Image::make($request->get('data')["file"]);
        $img->resize(500, null, function ($constraint) {
            $constraint->aspectRatio();
        });
        $img->save('img/'.$fileName);
        $img->destroy();
    }
}