Vue Simple Uploader Git

Posted on  by admin

Modified9 months ago. I tried uploading my files to Github, but GitHub says it's too big.

Features

  • I then uploaded the content of the dist folder after building for production.
  • This worked just fine, but it's not very useful.
  • What is the proper way to upload a Vue.js app to GitHub?
  • What you generate (binary files which can be big) should not be versioned/pushed to GitHub.
  • It is better to use a local plugin which will, on GitHub side, build, tag and publish a release associated to your project.
  • For instance: semantic-release/github.
  • You can combine that with a GitHub Action, which can take that release, and deploy it on a remote server of your choice (provided it is publicly accessible from GitHub): see for example "How to deploy your VueJS using Github Actions (on Firebase Hosting)" from John Kilonzi.
  • For your existing dist, you should delete it (from Git only, not your disk) and add it to your .gitignore:.
  • What happens if I add a node module( like if I decide to add an image cropper).
  • How can the other contributers deal with that?
  • You need to add the declaration of that module in your project, not version the module itself.
  • For instance, using Vue.use.

Install

Notes

Usage

init

App.vue

Components

Uploader

Also: I host the app on netlify.

Props

  • options {Object}

    It builds the site straight from github.

    But it wont be able to build the site if gihub doesnt have the dist folder..

    • parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}

      See "How to deploy your Vue app with Netlify in less than 2 min!" from Jean-Philippe Fong: Netlify itself will build the dist (from your GitHub project sources) and publish it.

      • 477477 gold badges40034003 silver badges47194719 bronze badges.

      • 47194719 bronze badges. You should add a .gitignore file to the root of your directory where you can ignore files and directories.

    • categoryMap {Object}

      Most typical ones to ignore are the following:.

  • autoStart {Boolean}

    11 gold badge1717 silver badges2828 bronze badges.

  • fileStatusText {Object}

    2828 bronze badges.

    An object map for file status text.

    After 0.6.0, fileStatusText can be a function with params (status, response = null), you can control the status text more flexible:

Events

See simple-uploader.js uploader/events

Note:

  • All events name will be transformed by lodash.kebabCase, eg: fileSuccess will be transformed to file-success

  • catchAll event will not be emited.

  • file-added(file), file added event, this event is used for file validation. To reject this file you should set file.ignored = true.

  • files-added(files, fileList), files added event, this event is used for files validation. To reject these files you should set files.ignored = true or fileList.ignored = true.

Scoped Slots

  • files {Array}

    An array of files (no folders).

  • fileList {Array}

    An array of files and folders.

  • started

    Started uploading or not.

Get Uploader instance

You can get it like this:

UploaderBtn

Select files button.

Props

  • directory {Boolean}

    Default false, Support selecting Folder

  • single {Boolean}

    Default false, To prevent multiple file uploads if it is true.

  • attrs {Object}

    Default {}, Pass object to set custom attributes on input element.

UploaderDrop

Droped files area.

UploaderList

An array of Uploader.File file(folder) objects added by the user, but it treated Folder as Uploader.File Object.

Scoped Slots

  • fileList {Array}

    An array of files and folders.

UploaderFiles

An array of Uploader.File file objects added by the user.

Scoped Slots

  • files {Array}

    An array of files (no folders).

UploaderUnsupport

It will be shown if the current browser do not support HTML5 File API.

UploaderFile

File item component.

Props

  • file {Uploader.File}

    Uploader.File instance.

  • list {Boolean}

    It should be true if it is puted in UploaderList

Scoped Slots

  • file {Uploader.File}

    Uploader.File instance.

  • list {Boolean}

    In UploaderList component or not.

  • status {String}

    Current status, the values is one of success, error, uploading, paused, waiting

  • paused {Boolean}

    Indicated if the file is paused.

  • error {Boolean}

    Indicated if the file has encountered an error.

  • averageSpeed {Number}

    Average upload speed, bytes per second.

  • formatedAverageSpeed {String}

    Formated average upload speed, eg: 3 KB / S

  • currentSpeed {Number}

    Current upload speed, bytes per second.

  • isComplete {Boolean}

    Indicated whether the file has completed uploading and received a server response.

  • isUploading {Boolean}

    Indicated whether file chunks is uploading.

  • size {Number}

    Size in bytes of the file.

  • formatedSize {Number}

    Formated file size, eg: 10 KB.

  • uploadedSize {Number}

    Size uploaded in bytes.

  • progress {Number}

    A number between 0 and 1 indicating the current upload progress of the file.

  • progressStyle {String}

    The file progress element's transform style, eg: {transform: '-50%'}.

  • progressingClass {String}

    The value will be uploader-file-progressing if the file is uploading.

  • timeRemaining {Number}

    Remaining time to finish upload file in seconds.

  • formatedTimeRemaining {String}

    Formated remaining time, eg: 3 miniutes.

  • type {String}

    File type.

  • extension {String}

    File extension in lowercase.

  • fileCategory {String}

    File category, one of folder, document, video, audio, image, unknown.

Development