{"id":13536110,"url":"https://github.com/thetutlage/vue-clip","last_synced_at":"2025-10-24T12:31:22.485Z","repository":{"id":50372318,"uuid":"77749979","full_name":"thetutlage/vue-clip","owner":"thetutlage","description":"Simple and hackable file uploader for VueJs. Supports Vue \u003e= 2.1","archived":false,"fork":false,"pushed_at":"2019-10-29T18:16:34.000Z","size":87,"stargazers_count":219,"open_issues_count":52,"forks_count":40,"subscribers_count":10,"default_branch":"develop","last_synced_at":"2025-01-31T01:16:28.678Z","etag":null,"topics":["dropzonejs","file-uploader","vuejs2"],"latest_commit_sha":null,"homepage":"http://vueclip.adonisjs.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thetutlage.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-31T17:31:46.000Z","updated_at":"2025-01-18T12:28:37.000Z","dependencies_parsed_at":"2022-08-28T04:20:13.497Z","dependency_job_id":null,"html_url":"https://github.com/thetutlage/vue-clip","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetutlage%2Fvue-clip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetutlage%2Fvue-clip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetutlage%2Fvue-clip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetutlage%2Fvue-clip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thetutlage","download_url":"https://codeload.github.com/thetutlage/vue-clip/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237964664,"owners_count":19394439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dropzonejs","file-uploader","vuejs2"],"created_at":"2024-08-01T09:00:34.874Z","updated_at":"2025-10-24T12:31:22.048Z","avatar_url":"https://github.com/thetutlage.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","实用库","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["形成","UI Components","Form"],"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\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-clip\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-clip.svg?style=flat-square\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/thetutlage/vue-clip\"\u003e\u003cimg src=\"https://img.shields.io/travis/thetutlage/vue-clip/master.svg?style=flat-square\" alt=\"Build Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-clip\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-clip.svg?style=flat-square\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-clip.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\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.\n4. Does not pollute DOM by adding unnecessary markup. Infact the component will create a single div element.\n\n## Quick Intro\n\n\u003ciframe src=\"https://www.youtube.com/embed/84_SwbPWjKo\" type=\"text/html\" width=\"640\" height=\"360\" frameborder=\"0\"\u003e\u003c/iframe\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :options=\"options\"\u003e\n    \u003ctemplate slot=\"clip-uploader-action\"\u003e\n      \u003cdiv\u003e\n        \u003cdiv class=\"dz-message\"\u003e\u003ch2\u003e Click or Drag and Drop files here upload \u003c/h2\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate slot=\"clip-uploader-body\" scope=\"props\"\u003e\n      \u003cdiv v-for=\"file in props.files\"\u003e\n        \u003cimg v-bind:src=\"file.dataUrl\" /\u003e\n        {{ file.name }} {{ file.status }}\n      \u003c/div\u003e\n    \u003c/template\u003e\n\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    data () {\n      return {\n        options: {\n          url: '/upload',\n          paramName: 'file'\n        }\n      }\n    }\n\n  }\n\u003c/script\u003e\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 `acceptedFiles` option defines the mime types of files to be accepted.\n\n```js\n// as an array of mime types\n\n{\n  acceptedFiles: ['image/*', 'application/pdf']\n}\n\n// as an object with an array of mime types\n// and a custom error message\n\n{\n  acceptedFiles: {\n    extensions: ['image/*'],\n    message: 'You are uploading an invalid file'\n  }\n}\n\n// as a plain, comma-delimited string\n\n{\n  acceptedFiles: 'image/*,application/pdf'\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 \u003e (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\u003ctemplate\u003e\n  \u003cvue-clip :options=\"options\"\u003e\n\n    \u003ctemplate slot=\"clip-uploader-action\" scope=\"params\"\u003e\n      \u003cdiv v-bind:class=\"{'is-dragging': params.dragging}\" class=\"upload-action\"\u003e\n        \u003ch2\u003e Click or Drag and Drop files here upload \u003c/h2\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n  .upload-action.is-dragging {\n    background: green;\n  }\n\u003c/style\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :on-init=\"init\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      init (uploader) {\n        // javascript uploader instance\n      }\n    }\n\n  }\n\u003c/script\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :on-added-file=\"addedFile\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\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\u003c/script\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :on-removed-file=\"removedFile\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\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\u003c/script\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :on-sending=\"sending\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      sending (file, xhr, formData) {\n        formData.append('_csrf', '\u003ctoken\u003e')\n      }\n    }\n\n  }\n\u003c/script\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :on-complete=\"complete\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\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\u003c/script\u003e\n```\n\n#### onDragEnter\nThis event is invoked as soon as the user starts dragging the file.\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-clip :on-drag-enter=\"dragging\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      dragging () {\n        // user started dragging the file.\n      }\n    }\n\n  }\n\u003c/script\u003e\n```\n\n#### onDragLeave\nThis event is invoked when the user stops dragging the file.\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-clip :on-drag-leave=\"stoppedDragging\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      stoppedDragging () {\n        // user stopped dragging the file.\n      }\n    }\n\n  }\n\u003c/script\u003e\n```\n\n#### onDrop\nThis event is invoked when the user drops a file on the vue-clip area.\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-clip :on-drop=\"drop\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      drop () {\n        // user stopped dragging the file.\n      }\n    }\n\n  }\n\u003c/script\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :on-total-progress=\"totalProgress\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      totalProgress (progress, totalBytes, bytesSent) {\n      }\n    }\n\n  }\n\u003c/script\u003e\n```\n\n#### onQueueComplete\nThe event is called when all files in the queue have been uploaded to the server.\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-clip :on-queue-complete=\"queueCompleted\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      queueCompleted () {\n      }\n    }\n\n  }\n\u003c/script\u003e\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\u003ctemplate\u003e\n  \u003cvue-clip :on-max-files=\"maxFilesReached\"\u003e\n  \u003c/vue-clip\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n\n    methods: {\n      maxFilesReached (file) {\n      }\n    }\n\n  }\n\u003c/script\u003e\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\u003ctemplate slot=\"clip-uploader-action\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"dz-message\"\u003e\u003ch2\u003e Click or Drag and Drop files here upload \u003c/h2\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetutlage%2Fvue-clip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthetutlage%2Fvue-clip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetutlage%2Fvue-clip/lists"}