{"_id":"@dallin.b.johnson/vue-filepond","_rev":"1-9dc30194799d85d315886bd1ab8fb34a","name":"@dallin.b.johnson/vue-filepond","dist-tags":{"latest":"7.0.4"},"versions":{"7.0.3":{"name":"@dallin.b.johnson/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":"a2c21ac600b7b257b948ab15e6f6a61a8d220b4b","bugs":{"url":"https://github.com/pqina/vue-filepond/issues"},"_id":"@dallin.b.johnson/vue-filepond@7.0.3","_nodeVersion":"19.9.0","_npmVersion":"9.6.3","dist":{"integrity":"sha512-Uuv7Gbi1PDW8UB0Dlf9Rd/OfCG0hOjbMr1EABHsUzQuc124RpBGVgQPw9DqLXtuO1ggOZJZR5GUe2uPb8yHMuw==","shasum":"5f9775595c95dc515ef11e9f0265b5500265587d","tarball":"https://registry.npmjs.org/@dallin.b.johnson/vue-filepond/-/vue-filepond-7.0.3.tgz","fileCount":7,"unpackedSize":28140,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZF3DQIxNCq/OzcdGDlyE1P1V1RuDlZCyq1HI1Bt1QagIhAMuT3OkK0E7lsTHE11vfS3zU6oeOEozzrL4DzlmnY12Q"}]},"_npmUser":{"name":"dallin.b.johnson","email":"dallin.b.johnson@gmail.com"},"directories":{},"maintainers":[{"name":"dallin.b.johnson","email":"dallin.b.johnson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-filepond_7.0.3_1694651550571_0.03758142499210848"},"_hasShrinkwrap":false},"7.0.4":{"name":"@dallin.b.johnson/vue-filepond","version":"7.0.4","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":"25a42e448bdb0d135c77cb56db14556b7667a45a","bugs":{"url":"https://github.com/pqina/vue-filepond/issues"},"_id":"@dallin.b.johnson/vue-filepond@7.0.4","_nodeVersion":"19.9.0","_npmVersion":"9.6.3","dist":{"integrity":"sha512-I5hL8DupZcPNqevzwddYcweRE1l1ZOdCMQg+fxyknYzqzEJy6I6LIthZ4AfjkOq03eAT/XfoDrSQtXa5MIxAGw==","shasum":"b14ded4cd9fe4f4e21d7ef0515b9e1917236603f","tarball":"https://registry.npmjs.org/@dallin.b.johnson/vue-filepond/-/vue-filepond-7.0.4.tgz","fileCount":7,"unpackedSize":28140,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAe9yml+Lwizc4r9roXs9As9iCcOoNG4LsfMVvccNfk4AiEAxaLzILlq/+kl62fGTZuIQRImQyBfjmZSiaoLvyet/k8="}]},"_npmUser":{"name":"dallin.b.johnson","email":"dallin.b.johnson@gmail.com"},"directories":{},"maintainers":[{"name":"dallin.b.johnson","email":"dallin.b.johnson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-filepond_7.0.4_1694651955476_0.6521873554891191"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-14T00:32:30.462Z","7.0.3":"2023-09-14T00:32:30.737Z","modified":"2023-09-14T00:39:16.011Z","7.0.4":"2023-09-14T00:39:15.835Z"},"maintainers":[{"name":"dallin.b.johnson","email":"dallin.b.johnson@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"}