@yazan.alnughnugh/file-upload
Version:
File upload component is created to help you upload files using vuejs and ajax
113 lines (71 loc) • 2.88 kB
Markdown
[](https://github.styleci.io/repos/452773969?branch=master)
<h2 align="center">Supporting Upload file component</h2>
- [Become sponsor on Patreon](https://www.patreon.com/yazan_alnughnugh).
- [One-time donation via crypto-currencies](https://github.com/yazan-alnugnugh/laravel-datatable/blob/master/_docs/Donations/crypto/index.md).
# Introduction
<p align="center">
<img src="art/intro-image.png" alt="laravel-vue-datatable intro image">
</p>
**Are you looking for an easy way to upload files, this is what are you looking for.**
This is a vue component for uploading files using ajax. It contain amazing features, you can use it easily without any complexity.
## Features
- Preview files before upload
- Multi-file upload
- Drag and Drop files
- Upload multiple files at the same time
- Delete/Delete all
- Cancel/Cancel all
- Chunk upload
## Official Documentation
Documentation for File Upload can be found here [here](https://packages.tourismcaravan.com/docs/1/file-upload)
## Demo
[File Upload Demo](https://packages.tourismcaravan.com/uploads)
## Requirements
* [Tailwind](https://tailwindcss.com/) => 3.*
* [Axios](https://github.com/axios/axios) => 2.2.17*
## Installation
To install and setup the component we will follow a few steps:
#### step 1
```bash
npm install `@yazan.alnughnugh/file-upload
```
#### step 2
Vue 2
```javascript
// app/resources/js/app.js
Vue.component('file-upload', require('@yazan.alnughnugh/file-upload').default);
```
Vue 3
```javascript
// app/resources/js/app.js
import FileUpload from '@yazan.alnughnugh/file-upload';
const app = createApp(options);
app.component('file-upload', FileUpload);
app.mount('#app');
```
## Usage
To start use the component we will add a component to your blade file with three props,
```url``` is the url where you want to send request to it,
```id``` if you want to send model id with request,
```label``` here you can add your description.
```html
// resources/posts/create.blade.php
<file-upload :url="url" :id="id" :label="label"></file-upload>
```
#### Request
The request will be the same as bellow, The files will be sent one By one , one request for each file.
```php
// resources/posts/create.blade.php
[
"id" => "9", // if you added id
"file" => File , // this is our file
] ;
```
## Configuration
| Name | Type | Default | Description
| --- | --- | --- | --- |
| `url ` | String | "/" | is the url where you want to send request to it |
| `id` | Number | null | if you want to send model id with request |
| `label` | String | 'PNG, JPG, GIF up to 10MB' | here you can add your description |