https://github.com/dhhb/vue-base64-file-upload
Upload files as base64 data-uris
https://github.com/dhhb/vue-base64-file-upload
base64 blob component data-uri file-upload vue-components vuejs vuejs2
Last synced: 11 months ago
JSON representation
Upload files as base64 data-uris
- Host: GitHub
- URL: https://github.com/dhhb/vue-base64-file-upload
- Owner: dhhb
- Created: 2017-02-17T16:29:53.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-19T10:37:15.000Z (over 9 years ago)
- Last Synced: 2025-08-10T19:43:18.888Z (11 months ago)
- Topics: base64, blob, component, data-uri, file-upload, vue-components, vuejs, vuejs2
- Language: JavaScript
- Homepage: https://dhhb.github.io/vue-base64-file-upload/example
- Size: 1.68 MB
- Stars: 79
- Watchers: 2
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-base64-file-upload
> Upload files as base64 data-uris (URL representing the file's data as a base64 encoded string).
## Install
```bash
npm i vue-base64-file-upload --save
```
## Example
```js
import Vue from 'vue';
import VueBase64FileUpload from 'vue-base64-file-upload';
const app = new Vue({
components: {
VueBase64FileUpload
},
data() {
return {
customImageMaxSize: 3 // megabytes
};
},
methods: {
onFile(file) {
console.log(file); // file object
},
onLoad(dataUri) {
console.log(dataUri); // data-uri string
},
onSizeExceeded(size) {
alert(`Image ${size}Mb size exceeds limits of ${this.customImageMaxSize}Mb!`);
}
},
template: `
Upload file
`
});
app.$mount('#app');
```
## API
## Props
- `image-class` - pass additional classes for preview `img` tag
- `input-class` - pass additional classes for text `input` tag
- `accept` - mimetypes allowed for upload, _defaults to `'image/png,image/gif,image/jpeg'`_
- `max-size` - number of megabytes allowed for upload, _defaults to `10`_
- `disable-preview` - not show preview image, _defaults to `false`_
- `default-preview` - pass url or data-uri to be displayed as default image
- `file-name` - pass custom filename to be displayed in text `input` tag
- `placeholder` - pass placeholder text for text `input` tag
## Events
- `file` - fired when file object is ready
- `load` - fired when data-uri is ready
- `size-exceeded` - fired if uploaded image size exceeds limits
## References
- [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader)
- [`readAsDataURL`](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)
---
**MIT Licensed**