Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Guardando imágenes en Cloud Storage

8/28
Recursos

Aportes 24

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Gente para nuevas versiones de vue este seria el template.

<template>
  <v-app>
    <v-app-bar color="indigo" dark fixed app>
      <v-toolbar-title>Fabrica de memes</v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container fluid>
        <v-layout>
          <router-view />
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>```

Si quisiera un curso de desarrollo Web lo hubiera tomado… las instrucciones del profesor no funcionan…

Como 5 horas despues…

Si el server corre ok pero tu localhost esta en blanco intenta esto:

import la libreria vuetify en main.js :

import vuetify from '@/plugins/vuetify'

y mandarla llamar en new Vue ({}):

new Vue({
  vuetify,
  render: h => h(App),
  router,
  components: {App}
}).$mount('#app')

Thats all, con eso jalo mi codigo

fuente:
https://vuetifyjs.com/en/getting-started/quick-start#bootstrapping-the-vuetify-object

Espero que les sirva! 😉
Saludos!!

Un poco compleja esta clase, pero muy interesante

Perdi 5 horas de mi tiempo intentando configurar el vue ( y tiempo no es lo que tengo de sobra), creo que porque ya tenia instalado el npm y otras herramientas para angular, pero coincido con comentarios anteriores, esto no es un curso de front-end y eso que conozco varios lenguajes de frontend como angular, angularjs, knockout y ahora este, vue no me convence, mas arribita les comparto el codigo sencillo en javascript sin tanto rollo

Hola compañeros, me parece que es muy bueno que se tenga la práctica de generar el código y no solo copiarlo.
Sin embargo también entiendo que es frustrante estar buscando error por error. Les comparto mi código, con leer un poco la documentación de la actualización de Vu,js bastó.
Home.vue

App.vue

Muy dura esta clase, me llevo mucho tiempo acondicionar el código para que funcionara, tal vez con una plantilla generada por el docente hubiese sido una mejor alternativa.

Perdí demasiado tiempo en algo que a mi parecer no aporta nada al curso.

En realidad el curso es interesante pero la verdad se sale del contexto de la línea en la que se viene en la escuela. La verdad hace perder tiempo encontrando errores de un Framework en el que muchos no estamos interesados en aprender. Además hasta la clase nro. 6 todo viene bien y de pronto se cambia el panorama y se torna aburrido el curso, espero que mejore de aquí (clase 8) en adelante

Sería más sencillo si el código fuera compartido para descarga.
Adicionalmente, este tipo de cursos requiere un comentario fijado por parte de Platzi con los cambios que deban realizarse por las actualizaciones de los servicios de Google.

hola quería saber no me marca ningún error pero la app aparece en blanco.

para la gente que le esta tirando este error de property ‘install’ of undefined

en consola y se queda en blanco es porque se actualizo el vuefire ahora tienes que usarlo asi :

import { firestorePlugin } from ‘vuefire’

Vue.use(firestorePlugin)

Basicamente solo escribi el siguiente codigo:

<code>
<div class=“container”>
<div class=“row”>
<input type=“file” ref=“fileInput” id=“file” onchange=“processFile(this);”>
<input type=“button” onclick=“uploadFile()” value=“Enviar”>
</div>
</div>
</code>

Y el codigo javascript fue casi lo mismo, con algunas modificaciones de sintaxis.
pueden ver el codigo completo en solo html en el siguiente enlace, no olviden cambiar el firebaseConfig por el suyo.

A octubre del 2021, yo tuve muchos problemas debido a que sdk de firebase en vue, se modificó. Ya me estaba rindiendo, pero al final pude resolverlo así:
Archivo main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
//import firebase from 'firebase/app'
import {firestorePlugin} from 'vuefire'
import router from './routes/index'

// Import the functions you need from the SDKs you need
import {initializeApp} from "firebase/app";
//import { getAnalytics } from "firebase/analytics";
import { getFirestore } from 'firebase/firestore'
import { getStorage, ref } from 'firebase/storage'

Vue.config.productionTip = false

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxx",
  authDomain: "memes-factory-1750c.firebaseapp.com",
  projectId: "memes-factory-1750c",
  storageBucket: "memes-factory-1750c.appspot.com",
  messagingSenderId: "114124756871",
  appId: "xxxxxxxxxxxxxxx",
  measurementId: "xxxxxxxx"
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const storage = getStorage()
export const firestore = getFirestore(firebaseApp)
export const storage_img = ref(storage)

Vue.use(firestorePlugin) 

new Vue({
  vuetify,
  render: h => h(App),
  router,
  components: {App}
}).$mount('#app')

Y en el script del archivo Home.vue:

<script>
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import {storage_img} from "@/main"

  export default {
    name: 'Home',

    data: () => ({
      file: ''
    }),
    methods: {
      processFile: function(event) {
        this.file = event.target.files[0]
      },
      uploadFile: function() {
        let name = (+new Date()) + '_' + this.file.name
        let metadata = { contentType: this.file.type }
        const imageRef = ref(storage_img, "images/" + name)
        
        console.log({name})
        console.log({metadata})

        uploadBytesResumable(imageRef, this.file, metadata)
          .then((snapshot) => {
            console.log('Uploaded',snapshot.totalBytes,'bytes')
            console.log('file metadata',snapshot.metadata)
            getDownloadURL(snapshot.ref).then((url) => {
              console.log('File available at',url)
            })
          })
      }
    }
  }
  
</script>

El problema de esta parte es que está desactualizada y es un gran problema para la conexión

No he podido llegar a este punto!!!. Las indicaciones recibidas me generan error.

  • Lo que hicimos: usamos la librería de firebase para acceder al API de Storage, usando una aplicación web enviamos la imagen al Storage de firebase. Es correcto?

Con todo el dolor de mi corazón y con una actitud reacia a aprender un lenguaje que detesto, decidí darle una oportunidad a vue.js, no me lo van a creer, me salió a la primera. No caigan si no les sale a la primera, solo hay que poner atención a los detalles.
Saludos!!

Gracias

Muy bien gracias

Estoy más perdida que hijo de Limber

Solucione el problema borrando la linea
import { firebase } from ‘@/main’

la linea
<input type=“file” ref=“fileInput” id=“file” @change=“processFile($event)”>

la puse en una sola linea

asi por fin me funciono… 3 horas en esta clase jeje. Pero se ve interesante. Menos mal tome primero fundamentos de la programacion

Se pierde mucho tiempo tratando de hacer funcionar esta página de carga. El profesor se podría ahorrar toda esta explicación de frontend simplemente pasando un repositorio de github con toda esta parte y así centrarnos en lo que trata el curso.

Me salía en blanco con el error “export ‘default’ (imported as ‘VueFire’) was not found in ‘vuefire’.”

Se corrigió cambiando en el main.js

import VueFire from ‘vuefire’

por

import * as VueFire from ‘vuefire’

Se que hay muchos comentarios llenos de criticas y esta bien.
Pero quiero compartirles lo que a mi me ayudo para que el código me corriera bien:
1. Omitir las criticas.
2.Borrar el código y empezar de nuevo
3.El evento si se dispara vaya a “Storage” de Firebase y allí estará la imagen subida