{"_id":"vue-clip","_rev":"325485","name":"vue-clip","description":"file uploader for vuejs with magical powers","dist-tags":{"latest":"1.0.0"},"maintainers":[{"name":"virk","email":"virk@adonisjs.com"}],"time":{"modified":"2021-06-07T02:44:30.000Z","created":"2017-01-03T18:21:14.028Z","1.0.0":"2017-01-03T18:21:14.028Z"},"users":{"keoh77":true},"author":{"name":"amanvirk"},"versions":{"1.0.0":{"name":"vue-clip","version":"1.0.0","description":"file uploader for vuejs with magical powers","main":"dist/vue-clip.js","scripts":{"test":"karma start karma.conf.js","build":"webpack -p --optimize-minimize --optimize-occurrence-order"},"keywords":["vuejs","vue","file-uploader","file-upload","vue-upload","dropzone"],"author":{"name":"amanvirk"},"license":"MIT","devDependencies":{"babel-core":"^6.21.0","babel-eslint":"^7.1.1","babel-loader":"^6.2.10","babel-preset-latest":"^6.16.0","chai":"^3.5.0","css-loader":"^0.26.1","eslint":"^3.12.2","eslint-config-standard":"^6.2.1","eslint-loader":"^1.6.1","eslint-plugin-html":"^1.7.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","karma":"^1.3.0","karma-chrome-launcher":"^2.0.0","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.2","karma-webpack":"^1.8.1","mocha":"^3.2.0","phantomjs":"^2.1.7","unminified-webpack-plugin":"^1.2.0","vue":"^2.1.8","webpack":"^1.14.0"},"dependencies":{"dropzone":"^4.3.0","lodash.clone":"^4.5.0"},"gitHead":"083c1faa09feb6dbfbbb7f59c4c7c949a0b9dcb7","_id":"vue-clip@1.0.0","_shasum":"c28399ea4ca4957a391086584d50548a74340980","_from":".","_npmVersion":"3.10.9","_nodeVersion":"7.2.0","_npmUser":{"name":"adonisjs","email":"virk@adonisjs.com"},"dist":{"shasum":"c28399ea4ca4957a391086584d50548a74340980","size":64205,"noattachment":false,"key":"/vue-clip/-/vue-clip-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/vue-clip/download/vue-clip-1.0.0.tgz"},"maintainers":[{"name":"virk","email":"virk@adonisjs.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue-clip-1.0.0.tgz_1483467673233_0.41883293888531625"},"directories":{},"publish_time":1483467674028,"_cnpm_publish_time":1483467674028,"_hasShrinkwrap":false}},"readme":"## Introduction\n\nVue clip is a minimalistic and hackable file uploader for VueJs. I wrote this plugin due to the absence of well written file uploaders with fine-grained controls.\n\n<p>\n  <a href=\"https://www.npmjs.com/package/vue-clip\"><img src=\"https://img.shields.io/npm/v/vue-clip.svg?style=flat-square\" alt=\"Version\"></a>\n  <a href=\"https://travis-ci.org/thetutlage/vue-clip\"><img src=\"https://img.shields.io/travis/thetutlage/vue-clip/master.svg?style=flat-square\" alt=\"Build Status\"></a>\n  <a href=\"https://www.npmjs.com/package/vue-clip\"><img src=\"https://img.shields.io/npm/dt/vue-clip.svg?style=flat-square\" alt=\"Downloads\"></a>\n  <a href=\"https://opensource.org/licenses/MIT\"><img src=\"https://img.shields.io/npm/l/vue-clip.svg?style=flat-square\" alt=\"License\"></a>\n</p>\n\n#### Features\n1. Written in vanilla Javascript.\n2. Weighs **17.9KB ( Minified and Gzip )**, **57KB ( Minified )**.\n3. Hackable to the core with custom events.\n\n## Setup\nYou can make use of module by installing it from `npm` or directly using it from CDN.\n\n#### Npm\n\n```bash\nnpm i --save vue-clip\n```\n\n```javascript\nimport Vue from 'vue'\nimport VueClip from 'vue-clip'\n\nVue.use(VueClip)\n```\n\n#### Globally\n\nAlso, you can reference the script file via [CDN]() which will add a global component called `vue-clip` to the Vue instance.\n\n## Basic Usage\n\n```html\n<template>\n  <vue-clip :options=\"options\">\n    <template slot=\"clip-uploader-action\">\n      <div>\n        <div class=\"dz-message\"><h2> Click or Drag and Drop files here upload </h2></div>\n      </div>\n    </template>\n\n    <template slot=\"clip-uploader-body\" scope=\"props\">\n      <div v-for=\"file in file.props\">\n        <img v-bind:src=\"file.dataUrl\" />\n        {{ file.name }} {{ file.status }}\n      </div>\n    </template>\n\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    data () {\n      return {\n        options: {\n          url: '/upload',\n          paramName: 'file'\n        }\n      }\n    }\n\n  }\n</script>\n```\n\n## Configuration Options\n\n| Option | Possible Values | Description |\n|--------|-----------------|-------------|\n| url | String, Function | Url to be used for uploading files. This can be a string or a function ( in case your URL is dynamic ) |\n| method | String, Function | Http method to be used. Defaults to `post`.\n| parallelUploads | Number | Number of files to be uploaded in parallel.\n| maxFilesize | Number, Object | The file size **in MB** to be allowed. Also, you can pass an object with `limit` and `error message`.|\n| paramName | String | Param name to be used for uploading file(s). Defaults to `file`.|\n| uploadMultiple | Boolean | Whether or not to upload multiple files.|\n| headers | Object | Http headers to be sent along each request.|\n| maxFiles | Number, Object | a maximum number of files to be uploaded. You can also pass an object with `limit` and `error message`.|\n| acceptedFiles | Array, Object | File types to be accepted. `['image/*', 'application/pdf']`.\n| accept | Function | A custom function to be used for validating each file upload. This method receives a `done` callback. In the case of any errors, you must call done with a single error argument.\n\n#### maxFilesize\nThe `maxFilesize` option defines the size of the file to be checked for when uploading files.\n\n```js\n{\n  maxFilesize: 1 // 1mb\n}\n\n// or\n\n{\n  maxFilesize: {\n    limit: 1,\n    message: '{{ filesize }} is greater than the {{ maxFilesize }}'\n  }\n}\n```\n\n#### maxFiles\n\nThe `maxFiles` option defines the maximum number of files to be uploaded.\n\n```js\n{\n  maxFiles: 5\n}\n\n// or\n\n{\n  maxFiles: {\n    limit: 5,\n    message: 'You can only upload a max of 5 files'\n  }\n}\n```\n\n#### acceptedFiles\n\nThe mime types of files to be accepted.\n\n```js\n{\n  acceptedFiles: ['image/*', 'application/pdf']\n}\n\n// or\n\n{\n  acceptedFiles: {\n    extensions: ['image/*'],\n    message: 'You are uploading an invalid file'\n  }\n}\n```\n\n#### accept\n\nThe `accept` is a low-level method to run manual validations and return a formatted error string ( in the case of error).\n\n```js\n{\n  accept: function (file, done) {\n    if (file.size > (1024 * 1024)) {\n      done('File must be smaller than 1MB')\n      return\n    }\n\n    done()\n  }\n}\n```\n\n## Dragging\n\nThe most common requirement is to know when a user `starts` and `stops` dragging a file so that you can add some visual feedback to the UI. The easiest way is to make use of [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).\n\n```html\n<template>\n  <vue-clip :options=\"options\">\n\n    <template slot=\"clip-uploader-action\" scope=\"params\">\n      <div v-bind:class=\"{'is-dragging': params.dragging}\" class=\"upload-action\">\n        <h2> Click or Drag and Drop files here upload </h2>\n      </div>\n    </template>\n\n  </vue-clip>\n</template>\n\n<style>\n  .upload-action.is-dragging {\n    background: green;\n  }\n</style>\n```\n\n## Events\n\nYou can make use of `vue-clip` without writing any javascript code, but if you want low-level control over the upload behavior, consider listening to special events.\n\n#### onInit(uploader)\nCalled every time the `vue-clip` is initiated and binds to DOM.\n\n```html\n<template>\n  <vue-clip :on-init=\"init\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      init (uploader) {\n        // javascript uploader instance\n      }\n    }\n\n  }\n</script>\n```\n\n#### onAddedFile(file)\nThis event is invoked every time a new file gets uploaded. You can listen for this event, you want to have access to each file object within your own parent component.\n\n```html\n<template>\n  <vue-clip :on-added-file=\"addedFile\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    data: function () {\n      return {\n        files: []\n      }\n    }\n\n    methods: {\n      addedFile (file) {\n        this.files.push(file)\n      }\n    }\n\n  }\n</script>\n```\n\n#### onRemovedFile(file)\nThis event is invoked every time the file has been removed. This is the nice place to make a request to your server for deleting the file.\n\n```html\n<template>\n  <vue-clip :on-removed-file=\"removedFile\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      removedFile (file) {\n        this\n        .$http\n        .post(`delete/${file.customAttributes.id}`)\n        .then(console.log)\n        .catch(console.error)\n      }\n    }\n\n  }\n</script>\n```\n\n#### onSending(file, XHR, formData)\nThis event is emitted before making the upload HTTP request. So this is the time to modify the HTTP request and send some custom attributes.\n\n```html\n<template>\n  <vue-clip :on-sending=\"sending\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      sending (file, xhr, formData) {\n        formData.append('_csrf', '<token>')\n      }\n    }\n\n  }\n</script>\n```\n\n#### onComplete(file, status, xhr)\nThis event is called when a file has been processed. It includes **error, success** both. `3rd argument` will be the xhr response, if the error is returned from the server when uploading the file.\n\n```html\n<template>\n  <vue-clip :on-complete=\"complete\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      complete (file, status, xhr) {\n        // Adding server id to be used for deleting\n        // the file.\n        file.addAttribute('id', xhr.response.id)\n      }\n    }\n\n  }\n</script>\n```\n\n#### onDragEnter\nThis event is invoked as soon as the user starts dragging the file.\n\n```html\n<template>\n  <vue-clip :on-drag-enter=\"dragging\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      dragging () {\n        // user started dragging the file.\n      }\n    }\n\n  }\n</script>\n```\n\n#### onDragLeave\nThis event is invoked when the user stops dragging the file.\n\n```html\n<template>\n  <vue-clip :on-drag-leave=\"stoppedDragging\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      stoppedDragging () {\n        // user stopped dragging the file.\n      }\n    }\n\n  }\n</script>\n```\n\n#### onDrop\nThis event is invoked when the user drops a file on the vue-clip area.\n\n```html\n<template>\n  <vue-clip :on-drop=\"drop\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      drop () {\n        // user stopped dragging the file.\n      }\n    }\n\n  }\n</script>\n```\n\n#### onTotalProgress(progress, totalBytes, bytesSent)\nThis event returns the total upload progress for all the files. Think of it as the global progress indicator for multiple files uploaded together.\n\n```html\n<template>\n  <vue-clip :on-total-progress=\"totalProgress\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      totalProgress (progress, totalBytes, bytesSent) {\n      }\n    }\n\n  }\n</script>\n```\n\n#### onQueueComplete\nThe event is called when all files in the queue have been uploaded to the server.\n\n```html\n<template>\n  <vue-clip :on-queue-complete=\"queueCompleted\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      queueCompleted () {\n      }\n    }\n\n  }\n</script>\n```\n\n#### onMaxFiles\nThe event is called when maxFiles upload limit has been reached. This event will be fired `n times`for each file exceeding the limit. For example\n\n- **maxFiles** - 3\n- **filesUploaded** - 5\n- **eventCalled** - 2 times with file instance\n\n```html\n<template>\n  <vue-clip :on-max-files=\"maxFilesReached\">\n  </vue-clip>\n</template>\n\n<script>\n  export default {\n\n    methods: {\n      maxFilesReached (file) {\n      }\n    }\n\n  }\n</script>\n```\n\n## File Attributes\nThe file instance sent along events has following attributes.\n\n| Attribute | Type | Description |\n|-----------|------|-------------|\n| name | String | The client name of the file |\n| status String | String | The file status, which can be `success`, `error`, `queued`, `added`. |\n| width | Number | The file width. Only for images. |\n| height | Number | The file height. Only for images. |\n| bytesSent | Number | The total bytes sent to the server so far. |\n| progress | Number | Total upload progress. |\n| total | Number | The total number of bytes to be sent to the server. |\n| type | String | The file mime-type. |\n| size | Number | The file size on user disk. |\n| dataUrl | String | File base64 data URL to be used for displaying images preview. |\n| xhrResponse | Object | Server xhrResponse. Only contains `response`, `responseText` and `statusCode` |\n| errorMessage | String | Error message when processing a file. If the error is returned from the server, it will be the value of XHR error. Also can be client errors for `maxSize` etc.|\n| customAttributes | Object | Each file needs some custom attributes, for example `server id` to  be used for deleting the files.|\n\n#### Adding/Accessing Custom Attributes\n```javascript\nfile.addAttribute('id', xhr.response.id)\n\n// access id\nfile.customAttributes.id\n```\n\n## Browser Support\n\n- Chrome 7+\n- Firefox 4+\n- IE 10+\n- Opera 12+\n- Safari 6+\n\n\n#### Things to consider\nMake sure you add class `dz-message` to the uploader action wrapped inside `clip-uploader-action` slot. This makes your entire action body clickable. There are ways to get around it, but I wanted to keep the API transparent, instead of adding a bunch of DOM elements behind the scenes.\n\n```html\n<template slot=\"clip-uploader-action\">\n  <div>\n    <div class=\"dz-message\"><h2> Click or Drag and Drop files here upload </h2></div>\n  </div>\n</template>\n```\n\n## Recipes\n\n#### Tutorial\n\n#### Displaying Files Out Of Vue Clip Area\n\n#### Uploading Files Using A Custom File Input\n","_attachments":{},"license":"MIT"}