Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yazan-alnugnugh/file-upload
File upload component is created to help you upload files using vuejs and ajax
https://github.com/yazan-alnugnugh/file-upload
ajax cancel chunk component delete drag drag-and-drop file javascript multiple preview tailwindcss upload uploader vue vue-component vue-upload-component vuejs
Last synced: about 1 month ago
JSON representation
File upload component is created to help you upload files using vuejs and ajax
- Host: GitHub
- URL: https://github.com/yazan-alnugnugh/file-upload
- Owner: yazan-alnugnugh
- Created: 2022-01-27T17:13:48.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T08:56:28.000Z (about 1 year ago)
- Last Synced: 2024-04-25T21:22:31.384Z (8 months ago)
- Topics: ajax, cancel, chunk, component, delete, drag, drag-and-drop, file, javascript, multiple, preview, tailwindcss, upload, uploader, vue, vue-component, vue-upload-component, vuejs
- Language: Vue
- Homepage:
- Size: 156 KB
- Stars: 54
- Watchers: 1
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.styleci.io/repos/452773969?branch=master)
Supporting Upload file component
- [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
**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
```
#### 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 |