I am using this code to update an image and get the URL, but I can´t get the URL back.
It seems that return some because it can enter in the return of the promise.
I get this code from here:
The code work for another user so I this the problems would be in the dependence or in the database rules.
I am authenticated.
<template>
<div>
<input type="file" multiple accept="image/*" @change="detectFiles($event.target.files)">
<div class="progress-bar" :style="{ width: progressUpload + '%'}">{{ progressUpload }}%</div>
</div>
</template>
<script>
import { storage } from '../firebase'
export default {
data () {
return {
progressUpload: 0,
file: File,
uploadTask: '',
downloadURL: ''
}
},
methods: {
detectFiles (fileList) {
Array.from(Array(fileList.length).keys()).map( x => {
this.upload(fileList[x])
})
},
upload (file) {
this.uploadTask = storage.ref('imagenes/articulos').put(file);
this.uploadTask.then(snapshot => {
this.downloadURL = this.uploadTask.snapshot.downloadURL;
this.$emit('url', this.downloadURL)
})
}
},
watch: {
uploadTask: function() {
this.uploadTask.on('state_changed', sp => {
this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
})
}
}
}
</script>
<style>
.progress-bar {
margin: 10px 0;
}
</style>
this is my package.json:
{
"name": "vue-change-your-home",
"version": "1.0.0",
"description": "Single page make in vue",
"author": "enrikiko <[email protected]>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/vue-fontawesome": "0.0.22",
"bootstrap-vue": "^2.0.0-rc.9",
"firebase": "^5.0.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuefire": "^1.4.5"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-piler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
this are the storage rules:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
this is my firebase.js: import Firebase from 'firebase'
/**
* Pega aquí los datos de tu proyecto firebase
*/
const firebaseApp = Firebase.initializeApp({
apiKey: "++++******-sU0qfey9278aBIDP6zo",
authDomain: "*+****+.firebaseapp",
databaseURL: "https://*****.firebaseio",
projectId: "+++++",
storageBucket: "**.appspot",
messagingSenderId: "**"
});
export const db = firebaseApp.database()
export const storage = firebaseApp.storage()
export const auth = firebaseApp.auth()
// export const notif = firebase.messaging()
in the terminal this is what I get:
$route
downloadURL:"" --->here shoud get the URL
file:ƒ File()
progressUpload:100
uploadTask:Object
authWrapper_:Object
blob_:Object
chunkMultiplier_:1
errorHandler_:ƒ (error)
error_:null
location_:Object
mappings_:Array[15]
metadataErrorHandler_:ƒ (error)
metadata_:Object
Thank so much in advance
I am using this code to update an image and get the URL, but I can´t get the URL back.
It seems that return some because it can enter in the return of the promise.
I get this code from here: https://gist.github./CristalT/2651023cfa2f36cddd119fd979581893
The code work for another user so I this the problems would be in the dependence or in the database rules.
I am authenticated.
<template>
<div>
<input type="file" multiple accept="image/*" @change="detectFiles($event.target.files)">
<div class="progress-bar" :style="{ width: progressUpload + '%'}">{{ progressUpload }}%</div>
</div>
</template>
<script>
import { storage } from '../firebase'
export default {
data () {
return {
progressUpload: 0,
file: File,
uploadTask: '',
downloadURL: ''
}
},
methods: {
detectFiles (fileList) {
Array.from(Array(fileList.length).keys()).map( x => {
this.upload(fileList[x])
})
},
upload (file) {
this.uploadTask = storage.ref('imagenes/articulos').put(file);
this.uploadTask.then(snapshot => {
this.downloadURL = this.uploadTask.snapshot.downloadURL;
this.$emit('url', this.downloadURL)
})
}
},
watch: {
uploadTask: function() {
this.uploadTask.on('state_changed', sp => {
this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
})
}
}
}
</script>
<style>
.progress-bar {
margin: 10px 0;
}
</style>
this is my package.json:
{
"name": "vue-change-your-home",
"version": "1.0.0",
"description": "Single page make in vue",
"author": "enrikiko <[email protected]>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/vue-fontawesome": "0.0.22",
"bootstrap-vue": "^2.0.0-rc.9",
"firebase": "^5.0.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuefire": "^1.4.5"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-piler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
this are the storage rules:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
this is my firebase.js: import Firebase from 'firebase'
/**
* Pega aquí los datos de tu proyecto firebase
*/
const firebaseApp = Firebase.initializeApp({
apiKey: "++++******-sU0qfey9278aBIDP6zo",
authDomain: "*+****+.firebaseapp.",
databaseURL: "https://*****.firebaseio.",
projectId: "+++++",
storageBucket: "**.appspot.",
messagingSenderId: "**"
});
export const db = firebaseApp.database()
export const storage = firebaseApp.storage()
export const auth = firebaseApp.auth()
// export const notif = firebase.messaging()
in the terminal this is what I get:
$route
downloadURL:"" --->here shoud get the URL
file:ƒ File()
progressUpload:100
uploadTask:Object
authWrapper_:Object
blob_:Object
chunkMultiplier_:1
errorHandler_:ƒ (error)
error_:null
location_:Object
mappings_:Array[15]
metadataErrorHandler_:ƒ (error)
metadata_:Object
Thank so much in advance
Share Improve this question asked May 21, 2018 at 15:53 Enrique Ramos MuñozEnrique Ramos Muñoz 491 silver badge9 bronze badges3 Answers
Reset to default 5i had the same problem, i tried a lot of stuff, but the simply one solution i found was:
to change the Firebase versión in my package.json i switched to: "firebase": "^4.6.2".
I am not sure what's happening with the 5.0.2 version. Even when that solve the problem i am still looking for the docs of the change maybe we need to use the snapshot in a different way. will see. Good luck! ;)
-- BlisS
Update:
The issue is that the snapshop no longer own the downloadURL at version 5, now you have tu use the method getDownloadURL that belongs to the ref, just like pushups said, something like this:
const fileRef = firebase.storage()
.ref("carpeta")
.child(file.name);
const uploadTask = fileRef.put(file);
uploadTask
.then(snap=>{
return fileRef.getDownloadURL()
})
this also works: return snap.ref.getDownloadURL()
You can get this to work with Firebase 5.2.0 with the following code.
The UploadTaskPromise yields a snapshot. The snapshot has a ref property. The ref property has a getDownloadURL() function which returns a Promise. That Promise gives the downloadable url once it's available.
https://firebase.google./docs/reference/js/firebase.storage.Reference#getDownloadURL
uploadTask.then((snapshot) => {
snapshot.ref.getDownloadURL().then((url) => {
// do something with url here
});
});
Use this code:
import {launchImageLibrary} from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
launchImageLibrary({quality: 0.5}, response => {
let data = response.assets[0];
const uploadTask = storage()
.ref()
.child(`/uploadedphotos/${Cid}`)
.putFile(data.uri);
uploadTask.on(
'state_changed',
snapshot => {
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
if (progress == 100) Alert.alert('File Upload Complete');
},
error => {
Alert.alert(error);
},
() => {
uploadTask.snapshot.ref
.getDownloadURL()
.then(downloadURL => {
console.log('File available at', downloadURL);
})
},
);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742353250a4427933.html
评论列表（0条）