Vue.js Drag & Drop Uploader - Vue-Transmit

Description: Vue-Transmit is a lightweight Vue.js drag & drop uploader based on Dropzone.js. Features: HTML 5 file uploads Emits upload lifecycle events (accepted, sending, progress, success, etc.) Image thumbnail previews Suppo


Description:

Vue-Transmit is a lightweight Vue.js drag & drop uploader based on Dropzone.js.

Features:

  • HTML 5 file uploads
  • Emits upload lifecycle events (accepted, sending, progress, success, etc.)
  • Image thumbnail previews
  • Support for concurrent uploads
  • Completely written in Vue.js—no wrapper components
  • Scoped slots allow for fully customizable styling
  • Written in modern TypeScript/ES6 with modules

Basic usage:

Import and install the Vue-Transmit component.

import VueTransmit from "vue-transmit";
Vue.use(VueTransmit)

The template.

<template>
  <component :is="tag">
    
<slot name="files" v-bind="fileSlotBindings"></slot> <input type="file" ref="hiddenFileInput" :multiple="multiple" :style="fileInputStyles" :class="[maxFilesReachedClass]" :accept="filesToAccept" :capture="capture" @change="onFileInputChange"> </component :is="tag"> </template>

Default props.

@Prop({ type: String, default: "div" })
tag: string
@Prop({ type: [Array, Object, String], default: null })
uploadAreaClasses: any[] | object | string
@Prop({ type: Object, default: objFactory })
uploadAreaAttrs: object
@Prop({ type: Object, default: objFactory })
uploadAreaListeners: object
@Prop({ type: String, default: null })
dragClass: string
@Prop({ type: String, required: true })
url: string
@Prop({ type: String, default: "post" })
method: string
@Prop({ type: Boolean, default: false })
withCredentials: boolean
// timeout in milliseconds
@Prop({ type: Number, default: 0 })
timeout: number
@Prop({ type: Number, default: 2 })
maxConcurrentUploads: number
// Whether to send multiple files in one request.
@Prop({ type: Boolean, default: false })
uploadMultiple: boolean
// in MB
@Prop({ type: Number, default: 256 })
maxFileSize: number
// The name of the file param that gets transferred.
@Prop({ type: String, default: "file" })
paramName: string
@Prop({ type: Boolean, default: true })
createImageThumbnails: boolean
// in MB. When the filename exceeds this limit, the thumbnail will not be generated.
@Prop({ type: Number, default: 10 })
maxThumbnailFileSize: number
@Prop({ type: Number, default: 120 })
thumbnailWidth: number
@Prop({ type: Number, default: 120 })
thumbnailHeight: number
/**
 * The base that is used to calculate the file size. You can change this to
 * 1024 if you would rather display kibibytes, mebibytes, etc...
 * 1024 is technically incorrect,
 * because `1024 bytes` are `1 kibibyte` not `1 kilobyte`.
 * You can change this to `1024` if you don't care about validity.
 */
@Prop({ type: Number, default: 1000 })
fileSizeBase: number
/**
 * Can be used to limit the maximum number of files that will be handled
 * by this Dropzone
 */
@Prop({ type: Number, default: null })
maxFiles: number
/**
 * Can be an object of additional parameters to transfer to the server.
 * This is the same as adding hidden input fields in the form element.
 */
@Prop({ type: Object, default: objFactory })
params: object
@Prop({ type: Object, default: objFactory })
headers: object
// If true, the dropzone will present a file selector when clicked.
@Prop({ type: Boolean, default: true })
clickable: boolean
// Whether hidden files in directories should be ignored.
@Prop({ type: Boolean, default: true })
ignoreHiddenFiles: boolean
/**
 * You can set accepted mime types here.
 *
 * The default implementation of the `accept()` function will check this
 * property, and if the Dropzone is clickable this will be used as
 * `accept` attribute.
 *
 * This is a comma separated list of mime types or extensions. E.g.:
 * - audio/*,video/*,image/png,.pdf
 *
 * See https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept
 * for a reference.
 */
@Prop({ type: Array, default: () => [] })
acceptedFileTypes: string[]
/**
 * If false, files will be added to the queue but the queue will not be
 * processed automatically.
 * This can be useful if you need some additional user input before sending
 * files (or if you want want all files sent at once).
 * If you're ready to send the file simply call myDropzone.processQueue()
 */
@Prop({ type: Boolean, default: true })
autoProcessQueue: boolean
/**
 * If false, files added to the dropzone will not be queued by default.
 * You'll have to call `enqueueFile(file)` manually.
 */
@Prop({ type: Boolean, default: true })
autoQueue: boolean
/**
 * If null, no capture type will be specified
 * If camera, mobile devices will skip the file selection and choose camera
 * If microphone, mobile devices will skip the file selection and choose the microphone
 * If camcorder, mobile devices will skip the file selection and choose the camera in video mode
 * On apple devices multiple must be set to false.  AcceptedFiles may need to
 * be set to an appropriate mime type (e.g. "image/*", "audio/*", or "video/*").
 */
@Prop({ type: String, default: null })
capture: string
/**
 * Before the file is appended to the formData, the function _renameFilename is performed for file.name, file
 * which executes the function defined in renameFilename
 */
@Prop({ type: Function, default: identity })
renameFile: (name: string) => string
// If the file size is too big.
@Prop({ type: String, default: "File is too big ({{ fileSize }}MiB). Max file size: {{ maxFileSize }}MB." })
dictFileTooBig: string
// If the file doesn't match the file type.
@Prop({ type: String, default: "You can't upload files of this type." })
dictInvalidFileType: string
// If the server response was invalid.
@Prop({ type: String, default: "Server responded with {{ statusCode }} code." })
dictResponseError: string
/**
 * Displayed when the maxFiles have been exceeded
 * You can use {{maxFiles}} here, which will be replaced by the option.
 */
@Prop({ type: String, default: "You can not upload any more files." })
dictMaxFilesExceeded: string
/**
 * If `done()` is called without argument the file is accepted
 * If you call it with an error message, the file is rejected
 * (This allows for asynchronous validation).
 */
@Prop({ type: Function, default: (_, done: Function) => done() })
accept: (file: VTransmitFile, done: Function) => void
@Prop({ type: Function, default: resizeImg })
resize: (file: VTransmitFile, dims: IDimensions) => IDrawImageArgs

Preview:

Download Details:

Author: alexsasharegan

Live Demo: https://github.com/alexsasharegan/vue-transmit

Download Link: https://github.com/alexsasharegan/vue-transmit/archive/master.zip

Official Website: https://github.com/alexsasharegan/vue-transmit

Last Update: November 18, 2017

Views Total: 0

Install:

# NPM
$ npm install vue-transmit--save


Source link

Tags :