Vue File upload component is created to help you upload files using vuejs and ajax

Overview

npm npm

Supporting Upload file component

Introduction

laravel-vue-datatable intro image

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

Demo

File Upload Demo

Requirements

Installation

To install and setup the component we will follow a few steps:

step 1

npm i @yazan.alnughnugh/file-upload

step 2

// app/resources/js/app.js

 Vue.component('file-upload', require('@yazan.alnughnugh/file-upload').default);

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.

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

"9", // if you added id "file" => File , // this is our file ] ; ">
// 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
You might also like...
The most beautiful and full featured file upload component for Vue JS
The most beautiful and full featured file upload component for Vue JS

High performant Vue file upload component with elegant and distinguishable previews for every file type and support for drag and drop, validations, default uploader with progress support and externally customizable in the "vue way"

Simple File upload component for Vue.js

vue-simple-upload An simple file upload component for vue.js. Checkout Demo on JSFiddle Installation npm install vue-simple-upload Usage vue-simple-up

A dead simple Vue.js component to upload file to Firebase Storage
A dead simple Vue.js component to upload file to Firebase Storage

vuetify-vuejs-firebaseUploader A dead simple VueJS component to upload file in Firebase Storage Installation npm install vuetify-vuejs-firebaseuploade

A SSR compatible vue component which can handle file upload / deleting directly to / from a AWS S3 Bucket

Vue Bucket Loader This Project provides a SSR compatible vue component which can handle file upload / deleting directly to / from a AWS S3 Bucket.

🗄️ File upload component for Vue 2
🗄️ File upload component for Vue 2

vue-easy-multi-file-uploader File uploading made easy for vueJs. Custom validators, custom styling, file preview support for image & videos... Please

File upload component for vue.js

File upload component for vue.js

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

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

Multiple Images Upload With Preview – Media-Upload

🖼️ Media-Upload-Demo This project is a demo for Media-Upload package: 💻 Installation guide As always you need to: composer install Then npm install

Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).
Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

Comments
  • Failing to install this great package

    Failing to install this great package

    I have tried to install this package, but I can't, here is the error :

    npm i @yazan.alnughnugh/file-upload

     At line:1 char:7
    + npm i @yazan.alnughnugh/file-upload
    +       ~~~~~~
    The splatting operator '@' cannot be used to reference variables in an expression. '@yazan' can be used only as an argument to a command. To reference variables in an expression use '$yazan'.
        + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
        + FullyQualifiedErrorId : SplattingNotPermitted
    ```
    `
    opened by maronkoders 1
Owner
yazan alnughnugh
Fullstack developer
yazan alnughnugh
Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

null 0 May 16, 2020
A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop

v-uploader A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop Examples and D

Terry Zeng 231 Nov 21, 2022
A Vue plugin for the simple Ajax file uploading (single or multiple files selection)

A Vue plugin for the simple Ajax file uploading (single or multiple files selection). This plugin works well with any Laravel backend 5.5+.

Antony H 2 Dec 20, 2021
v-file-upload: File upload component for Vue.js

v-file-upload File upload component for Vue.js Installation Using yarn yarn add v-file-upload Using npm npm i --save v-file-upload Demo DEMO Usage As

Daniel Fernando Lourusso 59 Nov 14, 2022
A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars.

vue-file-upload-component A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars. I came up with the o

James Doyle 232 Feb 24, 2022
A Vuetify multi file upload with deletions and file previews

Vuetify Upload A Vuetify multi file upload with deletions and file previews. Install the app in your main.js import VuetifyUpload from '@kingscode/vue

Kings Code 5 Jul 24, 2022
Contains all of the example components to upload files with VueJS and Axios.

Hi! We're Dan and Jay. We're a two person team with a passion for open source products. We created Server Side Up to help share what we learn. Find us

Server Side Up 40 Dec 24, 2022
Vue Component for upload a file with drag and drop, and out data will be json with data in base64 formate

Vue Component for upload a file with drag and drop, and out data will be json with data in base64 formate

Egor 1 Feb 5, 2020
Vue.js file upload component The component is just a button

Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter. fork from lianyue's vue-upload-component

Lan 0 Dec 13, 2018
The most beautiful and full featured file upload component for Vue JS

?? V2 is in the making...! Vue File Agent Every file deserves to be treated equally High performant Vue file upload component with elegant and disting

Safraz Razik 704 Dec 22, 2022