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


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


  • 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";

The 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
 * 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
 * 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


Download Details:

Author: alexsasharegan

Live Demo:

Download Link:

Official Website:

Last Update: November 18, 2017

Views Total: 0


$ npm install vue-transmit--save

Source link

Tags :