Vue GCS resume signed

Overview

Vue GCS resume signed

This is not a 'visual' component, but a upload manager to build upload interface on top of it (its more like a data-table, where each row its a upload)

Example:

{{ upload }}
">
<template>
	<div>
		<input  id="myfile"  type="file">
		<input  id="mysigneduri"  type="text">
		<Uploader  :files="files">
			<div  slot-scope="{upload, $pause, $resume}">
				{{ upload }}
				<div  @click="$pause()"  style="width: 50px; height: 50px; background-color: red;">div>
				<div  @click="$resume()"  style="width: 50px; height: 50px; background-color: green;">div>
			div>
		Uploader>
	div>
template>

<script>

import  Uploader  from  'vue-gcs-signed-uploader'
export  default {
	data () {
		return {
			files: []
		}
	},
	name:  'MyComponent',
	mounted () {
		let  self  =  this
		document.getElementById('myfile').onchange  =  function (e) {
			self.addFile(this.files[0])
		}
	},
	components: {
		Uploader
	},
	methods: {
		addFile (file) {
			let  id  =  Math.ceil(Math.random() *  100)
			this.files.push({
				'file':  file,
				'id':  id,
				'autostart':  true,
				'signedURI': document.getElementById('mysigneduri').value
			})
		}
	}
}

script>

  

<style  scoped>
style>

To start a upload just push to the files array and given a id to identify what file was added/removed

Events:

onUploadPaused onUploadFinished onUploadError onConnectionError

Status:

NOT_STARTED STARTED PAUSED ERROR

Error types:

URI_EXPIRED DISCONNECTED

Mocking

Use the :mock to send a list of uploads for design purpose

... ">
<template>
	<Uploader :mock="mock">
		...
	Uploader>
template>
<script>
...
data() {
	return {
		mock: [
			{
				'id': 1,
				'status': 'STARTED',
				'progress': 0.5,
				'autostarted': true,
				'errorType': null
			}
		]
	}
}
script>
You might also like...
🖼️ Vue component that provides drag and drop images upload with preview.
🖼️ Vue component that provides drag and drop images upload with preview.

🖼️ Vue component that provides drag and drop images upload with preview.

A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars.

vue-file-upload-component A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars. I came up with the o

Photo upload Vue.js component, good starting point for further customization.
Photo upload Vue.js component, good starting point for further customization.

Photo upload component, not trying to be "reusable component". It works on its own or you can use it as a starting point. Example Vue.component('photo

Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).
Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

ClipplyCloud - A tool for share files quickly, build on top of Vue 3.
ClipplyCloud - A tool for share files quickly, build on top of Vue 3.

With ClipplyCloud you can upload any file and share it with anyone. All files expire after 30 minutes, so you don't need to delete them. You do not need to login to use this service, as long as it is in the same browser, the list of your uploads will be available.

Vue component to upload images to rokka.io

A little image uploader component for Vue.

A beautiful vue component for image cropping and uploading. (vue图片剪裁上传组件)
A beautiful vue component for image cropping and uploading. (vue图片剪裁上传组件)

vue-image-crop-upload 中文文档. A beautiful vue component for image crop and upload. Notice: This component is designed for pc, not recommended for use on

A simple vue-component for client-side image upload with resizing

Vue Image Upload and Resize A Vue.js Plugin Component for client-side image upload with optional resizing and exif-based autorotate. This plugin was c

A simple upload file of vue

vue-uploader-files 安装 npm install vue-uploader-files main.js引入 import upfile from 'vue-uploader-files'; import 'vue-uploader-files/lib/vue-uploader-f

Owner
Thomas Anderson
Computer Science student at UFPE
Thomas Anderson
Simple File upload component for Vue.js

vue-simple-upload An simple file upload component for vue.js. Checkout Demo on JSFiddle Installation npm install vue-simple-upload Usage vue-simple-up

Varun Kruthiventi 146 Dec 14, 2022
Drag and drop multiple file uploader with Vue.js v2 and Axios

vue2-multi-uploader A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of

UPDIVISION 47 Sep 29, 2022
A Vue.js component for Dropzone.js - a drag’n’drop file uploads utility with image previews

vue-dropzone CO-MAINTAINERS WANTED This component has far outgrown my initial expectations and I'm not able to provide the amount of support that user

Rowan Winsemius 2k Dec 31, 2022
Vue.js drag & drop uploader based on Dropzone.js

Vue-Transmit STATUS: Unmaintained I am currently unable to give this project much attention. I won't be addressing issues or creating new versions for

Alex Regan 212 Aug 4, 2021
Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

vue-upload-component Vue.js file upload component The component is just a button Multi-file upload Upload directory Drag upload Drag the directory Upl

LianYue 2.6k Jan 3, 2023
A Vue.js upload component powered by simple-uploader.js

vue-simple-uploader A Vue.js upload component powered by simple-uploader.js 中文 Features Treat Folder and File as File Pause/Resume upload Recover uplo

null 1.7k Jan 4, 2023
Vue multipart file uploader

Vuejs Uploader Multipart uploader Vue component. This uploader will optionally upload files in multipart chunks. This get's around max upload sizes al

Charlie Kassel 61 Nov 24, 2022
🔌 A handy FilePond adapter component for Vue

Vue FilePond Vue FilePond is a handy adapter component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images f

pqina 1.7k Jan 9, 2023
The most beautiful and full featured file upload component for Vue JS

?? V2 is in the making...! Vue File Agent Every file deserves to be treated equally High performant Vue file upload component with elegant and disting

Safraz Razik 704 Dec 22, 2022
Creating a file explorer with vue 3 and electron

vue-electron Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn buil

Coding With Justin 42 Dec 13, 2022