GPT

File Storage Component

import { ref } from 'vue'; import { storage } from '../firebase'; import { ref as storageRef, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage'; import { useCurrentUser } from 'vuefire'; const user = u

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref } from 'vue';
import { storage } from '../firebase';
import { ref as storageRef, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
import { useCurrentUser } from 'vuefire';

const user = useCurrentUser();
const files = ref<{ name: string; url: string }[]>([]);
const uploading = ref(false);
const error = ref<string | null>(null);

// Upload file
const handleFileUpload = async (event: Event) => {
 const fileInput = event.target as HTMLInputElement;
 if (!fileInput.files?.length) return;
 
 const file = fileInput.files[0];
 const fileRef = storageRef(storage, `uploads/${user.value?.uid}/${file.name}`);
 
 uploading.value = true;
 error.value = null;
 
 try {
 await uploadBytes(fileRef, file);
 const url = await getDownloadURL(fileRef);
 files.value.push({ name: file.name, url });
 } catch (err: any) {
 error.value = err.message;
 } finally {
 uploading.value = false;
 fileInput.value = ''; // Reset input
 }
};

// Delete file
const deleteFile = async (fileName: string) => {
 const fileRef = storageRef(storage, `uploads/${user.value?.uid}/${fileName}`);
 
 try {
 await deleteObject(fileRef);
 files.value = files.value.filter(f => f.name !== fileName);
 } catch (err: any) {
 console.error('Failed to delete file:', err);
 }
};
</script>

<template>
 <div>
 <input
 type="file"
 @change="handleFileUpload"
 :disabled="uploading"
 />
 
 <p v-if="error" class="error">{{ error }}</p>
 
 <div v-if="uploading" class="loading">
 Uploading...
 </div>
 
 <ul>
 <li v-for="file in files" :key="file.name">
 <a :href="file.url" target="_blank">{{ file.name }}</a>
 <button @click="deleteFile(file.name)">Delete</button>
 </li>
 </ul>
 </div>
</template>

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →