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

Overview

vuetify-vuejs-firebaseUploader

npm version

A dead simple VueJS component to upload file in Firebase Storage

Sample

Installation

npm install vuetify-vuejs-firebaseuploader --save

Todo

  • Remove confirmation.
  • Support drag and drop.

Usage

">
<template>
  <v-container grid-list-md>
    <v-layout row wrap>
      <firebaseUploader
        path="YOUR/FOLDER/"
        :storage="getStorage()"
        targetFileName="image.png"
        uploadFileLabel="Upload a file"
        deleteFileLabel="Delete the file"
        unsuportedMediaTypeLabel="Invalide file format"
        :limitToType="['image/png']"
        :previewMediaContain="false"
        responsiveGrid="sm12"
        @onFileUpload="onUpload"
        @onFileDelete="onDelete"
        @onFileUploadError="onUploadError"
      />
    v-layout>
  v-container>
template>

<script>
  import Vue from 'vue';
  import firebaseUploader from 'vuetify-vuejs-firebaseuploader';
  Vue.use(firebaseUploader);

  export default {
    name: 'event',
    getStorage: function(){
      return firebase.storage();
    },
    onUpload: function(path){
      console.log(path);
    },
    onDelete: function(path){
      console.log(path);
    }
  }
script>
You might also like...
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.

The most beautiful and full featured file upload component for Vue JS
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

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

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.

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"

🗄️ 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

vue-file-upload,vue上传文件组件

vue-file-upload,vue上传文件组件

S3Client - A Javascript Library for AWS S3 File Upload

S3FileUpload is libray for upload any type of files to Amazon AWS S3

Comments
  • Bump loader-utils from 1.1.0 to 1.4.1

    Bump loader-utils from 1.1.0 to 1.4.1

    Bumps loader-utils from 1.1.0 to 1.4.1.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    v1.2.1

    1.2.1 (2018-12-25)

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    1.2.1 (2018-12-25)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 1.1.0 to 1.4.2

    Bump loader-utils from 1.1.0 to 1.4.2

    Bumps loader-utils from 1.1.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Brosseau Valentin
Dev Web, créateur de framework et de librairies en tous genres. Réutilisation et simplification sont mes moteurs!
Brosseau Valentin
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

Brosseau Valentin 6 Oct 20, 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
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
Vue File upload component is created to help you upload files using vuejs and ajax

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

yazan alnughnugh 41 Nov 17, 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
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

Varun Kruthiventi 146 Dec 14, 2022
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

Mohamed Hafidi 8 Aug 17, 2022
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
A simple upload file of vue

vue-uploader-files 安装 npm install vue-uploader-files main.js引入 import upfile from 'vue-uploader-files'; import 'vue-uploader-files/lib/vue-uploader-f

Magic Academy 1 Dec 19, 2021