{"_id":"@artesa/vue-filepond","name":"@artesa/vue-filepond","dist-tags":{"latest":"7.0.3"},"versions":{"7.0.3":{"name":"@artesa/vue-filepond","version":"7.0.3","description":"A handy FilePond adapter component for Vue","homepage":"https://pqina.nl/filepond","license":"MIT","repository":{"type":"git","url":"git+https://github.com/pqina/vue-filepond.git"},"main":"dist/vue-filepond.js","browser":"dist/vue-filepond.js","module":"dist/vue-filepond.esm.js","unpkg":"dist/vue-filepond.min.js","types":"types/index.d.ts","peerDependencies":{"filepond":">=4.7.4 < 5.x","vue":">=3 < 4"},"keywords":["vue","vuejs","filepond","file","upload","drag","drop","browse","image","preview"],"author":{"name":"PQINA","url":"https://pqina.nl"},"scripts":{"build":"mkdirp dist && npm run build:browser && npm run build:module","build:browser":"babel lib | bannerjs -m > dist/vue-filepond.js","postbuild:browser":"uglifyjs dist/vue-filepond.js --compress --comments '/^!/' --output dist/vue-filepond.min.js","build:module":"cat lib/index.js | bannerjs -m > dist/vue-filepond.esm.js","build:watch":"nodemon --watch lib -x \"npm run build\"","prepare":"npm run build"},"devDependencies":{"@babel/cli":"^7.7.7","@babel/core":"^7.7.7","@babel/plugin-transform-modules-umd":"^7.7.4","@babel/preset-env":"^7.7.7","bannerjs":"^1.0.7","filepond":"4.9.3","minicat":"^1.0.0","mkdirp":"^0.5.1","nodemon":"^2.0.2","replace":"^1.2.0","typescript":"^3.7.4","uglify-js":"^3.7.3","vue":"2.6.11"},"gitHead":"ba64b30f5e7f49241365a0b4724609944fb10f64","bugs":{"url":"https://github.com/pqina/vue-filepond/issues"},"_id":"@artesa/vue-filepond@7.0.3","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-xhPRVPgEyVSurde6ARzyKmxKrNjypWWL82t4H1OqoVR2OIbWJwOCTAUqa4VKWADsiBv4B8+C5tEjhJayhA9Nkw==","shasum":"bc77fd907de469847cd48e658f0f8e66779d7b6e","tarball":"https://registry.npmjs.org/@artesa/vue-filepond/-/vue-filepond-7.0.3.tgz","fileCount":7,"unpackedSize":26636,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLBWoTh+WUrlSxwuXuuBSxJYsAUq2nfu8OkAhWs2CVqAiAaBMXIGsIgXfGKOuNVnLMdAnwplQBHFpm3lGrT9KrGNQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDjDTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ0hAAkKU0tfMNf+1EnejtonpvfozC/Ii9UmJ6/+VNCGeQr6tyWDnw\r\n1PElkJDMD9vCH7DMGBCIW36+FfNp6gLKAkNMS1BgnUbw6jGsIvm4thI3jchH\r\nzrHBa2CzOUyllHycQ/hvLbetBNV6/nGUa9iKpzbIinjVM4Uj/8AI2WJsJrHg\r\nR48RVGjX33XiFr48BXIUkCB0+YZ3vH089t1sepheYrcZoMWhV4BxXjNHiq5O\r\nF8czwrYYxGFan9fp8Eva0RzliBF6cM7QtS3Rd3tDy7KSKR8+cxzaX2zsK8Kv\r\nZoYOvacgL/lJMJM6N4C9jQUQaplS+fZqm/T512yO92aoGGipHJnLnPNXuwIR\r\ne8AoTy93rCzQLsocdt0B0Pp2LtazbhF8n6UAeraMMREi+pTWIHl3y90mTTRj\r\nEoqncFE4lMfoOekDC3kcdOY9xA7i0Y778WFqoX3Zhq7ozXjxUhvNALIhDtuv\r\nMMLMzcAKDS16NDng8oHJokbJEev1CmEraFWpsdJqz2zO/DVXxOcGEmqDlPnu\r\nxHeN65s2b90x+rS4LCSbvV4Z6HhPksMjUSlpnjbSasboqABpuutIBXx3kf34\r\nQFoPIVjgGKDgpdwUMVLfkqCdpdZnOxp6qai3XYE05bSLgsKwC8IFUmNC0KkF\r\nHDoyRk2yLgzhOUxpfEykTSMydv5jZVn8AbU=\r\n=T+kz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"thenoim","email":"nilsbergmann@noim.io"},"directories":{},"maintainers":[{"name":"thenoim","email":"nilsbergmann@noim.io"},{"name":"fratzinger","email":"f.ashidian@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-filepond_7.0.3_1661874387004_0.24948232745376964"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-30T15:46:26.932Z","7.0.3":"2022-08-30T15:46:27.208Z","modified":"2022-08-30T15:46:27.374Z"},"maintainers":[{"name":"thenoim","email":"nilsbergmann@noim.io"},{"name":"fratzinger","email":"f.ashidian@gmail.com"}],"description":"A handy FilePond adapter component for Vue","homepage":"https://pqina.nl/filepond","keywords":["vue","vuejs","filepond","file","upload","drag","drop","browse","image","preview"],"repository":{"type":"git","url":"git+https://github.com/pqina/vue-filepond.git"},"author":{"name":"PQINA","url":"https://pqina.nl"},"bugs":{"url":"https://github.com/pqina/vue-filepond/issues"},"license":"MIT","readme":"# Vue FilePond\n\nVue FilePond is a handy adapter component for [FilePond](https://github.com/pqina/filepond), a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.\n\n**If you want to use Vue FilePond with Vue 2, please use v6 of this plugin.**\n\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/vue-filepond/blob/master/LICENSE)\n[![npm version](https://badge.fury.io/js/vue-filepond.svg)](https://www.npmjs.com/package/vue-filepond)\n![npm](https://img.shields.io/npm/dt/vue-filepond)\n\n---\n\n[<img src=\"https://github.com/pqina/filepond-github-assets/blob/master/header.svg\" alt=\"FilePond\"/>](https://www.buymeacoffee.com/rikschennink/)\n\n[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Use FilePond with Pintura](https://pqina.nl/pintura/?ref=github-filepond) / [Dev updates on Twitter](https://twitter.com/rikschennink/)\n\n---\n\n\n### Core Features\n\n- Accepts **directories**, **files**, blobs, local URLs, **remote URLs** and Data URIs.\n- **Drop files**, select on filesystem, **copy and paste files**, or add files using the API.\n- **Async uploading** with AJAX, or encode files as base64 data and send along form post.\n- **Accessible**, tested with AT software like VoiceOver and JAWS, **navigable by Keyboard**.\n- **Image optimization**, automatic image resizing, **cropping**, and **fixes EXIF orientation**.\n- **Responsive**, automatically scales to available space, is functional on both **mobile and desktop devices**.\n\n[Learn more about FilePond](https://pqina.nl/filepond/)\n\n<img src=\"https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true\" width=\"370\" alt=\"\"/>\n\n---\n\n### Also need Image Editing?\n\n**Pintura the modern JavaScript Image Editor** is what you're looking for. Pintura supports setting **crop aspect ratios**, **resizing**, **rotating**, **cropping**, and **flipping** images. Above all, it integrates beautifully with FilePond.\n\n[Learn more about Pintura](https://pqina.nl/pintura/?ref=github-vue-filepond)\n\n<img src=\"https://github.com/pqina/filepond-github-assets/blob/master/filepond_pintura.gif?raw=true\" width=\"600\" alt=\"\"/>\n\n---\n\nInstallation:\n\n**If you're using Vue 2 please run `npm install vue-filepond@^6.0.0`**\n\n```bash\nnpm install vue-filepond filepond\n```\n\nUsage:\n\n```vue\n<template>\n  <div id=\"app\">\n    <file-pond\n      name=\"test\"\n      ref=\"pond\"\n      label-idle=\"Drop files here...\"\n      v-bind:allow-multiple=\"true\"\n      accepted-file-types=\"image/jpeg, image/png\"\n      server=\"/api\"\n      v-bind:files=\"myFiles\"\n      v-on:init=\"handleFilePondInit\"\n    />\n  </div>\n</template>\n\n<script>\n// Import Vue FilePond\nimport vueFilePond from \"vue-filepond\";\n\n// Import FilePond styles\nimport \"filepond/dist/filepond.min.css\";\n\n// Import FilePond plugins\n// Please note that you need to install these plugins separately\n\n// Import image preview plugin styles\nimport \"filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css\";\n\n// Import image preview and file type validation plugins\nimport FilePondPluginFileValidateType from \"filepond-plugin-file-validate-type\";\nimport FilePondPluginImagePreview from \"filepond-plugin-image-preview\";\n\n// Create component\nconst FilePond = vueFilePond(\n  FilePondPluginFileValidateType,\n  FilePondPluginImagePreview\n);\n\nexport default {\n  name: \"app\",\n  data: function () {\n    return { myFiles: [\"cat.jpeg\"] };\n  },\n  methods: {\n    handleFilePondInit: function () {\n      console.log(\"FilePond has initialized\");\n\n      // FilePond instance methods are available on `this.$refs.pond`\n    },\n  },\n  components: {\n    FilePond,\n  },\n};\n</script>\n```\n\nWhen using FilePond with an SSR configuration like Nuxt.js it's best to wrap it in `<no-ssr>` tags.\n\n```vue\n<template>\n  <no-ssr>\n    <file-pond />\n  </no-ssr>\n</template>\n```\n\nUsage in the browser:\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Vue in Browser</title>\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/filepond/dist/filepond.min.css\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css\"\n    />\n  </head>\n  <body>\n    <div id=\"app\">\n      <file-pond></file-pond>\n    </div>\n\n    <script src=\"https://unpkg.com/filepond-plugin-image-preview\"></script>\n    <script src=\"https://unpkg.com/filepond\"></script>\n    <script src=\"https://unpkg.com/vue\"></script>\n    <script src=\"https://unpkg.com/vue-filepond@6\"></script>\n\n    <script>\n      new Vue({\n        el: \"#app\",\n        components: {\n          FilePond: vueFilePond.default(FilePondPluginImagePreview),\n        },\n      });\n    </script>\n  </body>\n</html>\n```\n\n[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/vue/)\n\n[Live Demo with Code Sandbox](https://codesandbox.io/s/p3v8zoprp7)\n","readmeFilename":"README.md"}