Création d’un téléchargeur de fichiers avec l’API Nuxt et Appwrite Storage

Autorisez les utilisateurs finaux à télécharger des fichiers sur votre application Nuxt.js avec l’API Appwrite Storage. Apprenez à intégrer le programme de téléchargement frontal à un bucket Appwrite Storage.

La fonctionnalité de téléchargement de fichiers joue un rôle crucial dans de nombreuses applications Web. Cela s’applique à toute application que nous construisons qui nécessite le téléchargement d’un fichier, comme un système de gestion de contenu, une galerie d’images ou une plate-forme permettant aux utilisateurs de télécharger ou de partager des fichiers de manière transparente. Avec le service API Appwrite Storage, nous pouvons créer et télécharger des fichiers en toute transparence sur notre application.

Cet article couvrira les étapes nécessaires pour créer un outil de téléchargement de fichiers robuste avec l’API Nuxt et Appwrite Storage. Nous commencerons par la création de notre application Nuxt jusqu’à la création de notre téléchargeur de fichiers.

Conditions préalables

Avant d’aborder ce sujet, il y a quelques choses que nous devons mettre en place ou connaître afin de bien comprendre chaque étape :

• Docker installé et opérationnel sur notre machine
• Une instance Appwrite lancée et opérationnelle (Docker doit être installé sur notre machine avant que nous puissions construire une nouvelle instance Appwrite ; pour créer une nouvelle instance Appwrite, suivez ce guide : Instance d’écriture d’application)
• Un compte Appwrite créé

Introduction à l’API de stockage Appwrite

Le service de stockage d’Appwrite nous fournit une API de stockage étendue pour télécharger, afficher, télécharger et interroger nos fichiers de projet.

Le service Appwrite Storage utilise des compartiments de stockage pour gérer nos fichiers. Ces compartiments de stockage sont similaires aux collections que nous avons dans notre service de base de données. La différence unique entre le stockage et la collecte est que le bucket nous offre plus de contrôle sur les types de fichiers que nous pouvons y stocker et leur taille, si nous voulons les chiffrer, les analyser avec un logiciel antivirus, etc.

Créer un projet Nuxt

La première étape de la création d’un projet Nuxt consiste à installer npm. Une fois npm installé sur votre ordinateur, vérifiez la version de npm pour confirmer que la dépendance de notre projet fonctionnera avec notre version de npm.

Pour créer un projet Nuxt, utilisez la commande ci-dessous :

npx create-nuxt-app
  or 
yarn create-nuxt-app

Nuxt prend en charge une variété de gestionnaires de packages, notamment npx et yarn. Vous pouvez utiliser ces deux commandes pour démarrer un nouveau projet Nuxt. Quel que soit le gestionnaire de packages que vous souhaitez utiliser dans notre projet, vous devez l’installer globalement sur votre ordinateur avant de l’utiliser pour créer un nouveau projet. Dans cet exemple, nous devrons installer npx et Yarn.

Une fois que vous aurez exécuté la commande ci-dessus, quelques questions vous seront posées :

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in file-uploader
? Project name: file-uploader
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Template engine: HTML
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert 
selection)
? What is your GitHub username? emilsone
? Version control system: Git
⠹ Installing packages with npm

Après avoir exécuté la commande, vous verrez ces questions ; sélectionnez les options souhaitées. Toutes les dépendances dont nous avons besoin seront installées une fois que nous aurons répondu à toutes les questions.

La prochaine étape est de cd <project-name> et exécutez la commande ci-dessous :

npm run dev

Création du téléchargeur de fichiers

Nous avons terminé la création d’un nouveau projet Nuxt. La prochaine étape consiste à développer notre téléchargeur de fichiers. Pour ce faire, copiez et collez le code ci-dessous dans notre dossier de composants.

<template>
    <main class="min-w-screen min-h-screen flex items-center p-5 lg:p-10 overflow-hidden relative hero-section">
      <div class="border-8 border-yellow-20 rounded-lg border-dashed  absolute top-20 bottom-20 left-20 right-20 z-0">
      </div>
      <div
        class="w-full max-w-4xl rounded-lg bg-white shadow-xl p-10 lg:p-20 mx-auto text-gray-800 relative md:text-left">
        <div class="text-center">
          <div class="text-center px-10">
            <div class="mb-10">
              <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-black  mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 my-6 " fill="none" viewBox="0 0 24 24"
                  stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                </svg>
              </div>
              <h2 class="text-2xl leading-7 font-semibold">
                Drop like it's hot
              </h2>
              <p class="mt-3 text-gray-600">
                No limit</p>
              <p class="mt-4 text-gray-500 tracking-wide border-t border-dashed ">Upload or drag & drop your file SVG,
                PNG, JPG or GIF. </p>
            </div>
            <div class="flex flex-col items-center justify-center">
              <label>File
                <input type="file" id="file" />
              </label>
              <button
                class="flex mx-auto mt-16 text-white  border-0 py-2 px-8 focus:outline-none  rounded text-lg btn-style">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </main>
</template>

Voici à quoi devrait ressembler notre application après avoir copié et collé le code ci-dessous

Installer Appwrite dans notre projet Nuxt

Pour ajouter Appwrite à notre projet Nuxt, utilisez la commande suivante :

npm install appwrite

Ensuite, importez le module Appwrite dans notre projet :

import { Client } from 'appwrite';

Création d’un nouveau projet Appwrite

Nous avons installé et importé notre module Appwrite dans notre projet. Pour utiliser l’API Appwrite Storage, nous devons créer un nouveau projet Appwrite. Nous devons avoir créé un compte avec Appwrite et une nouvelle instance Appwrite pour suivre ces étapes. Vérifiez les prérequis pour savoir comment créer une nouvelle instance Appwrite.

Après cela, nous serons redirigés vers un port hôte local que nous avons spécifié lors de la création de notre instance Appwrite. Nous serons envoyés à la console Appwrite après avoir collé le port localhost dans le navigateur, où nous créerons un nouveau projet. Voir un exemple ci-dessous :

La prochaine étape consiste à donner un nom à notre projet. Dans cet exemple, nous nommerons notre projet file-uploader:

Nous avons créé avec succès un nouveau projet et la prochaine étape consiste à ajouter une plate-forme. Le SDK Appwrite nous permet de créer très facilement pour n’importe quelle plate-forme de notre choix.

Nous choisirons le Web, car c’est la plateforme pour laquelle nous construisons. Cliquez sur l’option Web App et vous serez redirigé pour enregistrer notre application Web. La première étape consiste à créer une application Web et un nom d’hôte. Nous allons créer un nom uniquement pour notre application Web et ignorer l’option de nom d’hôte :

L’étape suivante consiste à installer notre SDK et à importer les modules que nous avons complétés dans la partie précédente. La dernière étape consiste à lancer notre SDK. Pour ce faire, nous utiliserons notre identifiant de projet, qui se trouve sur notre page de paramètres de projet.

Nous avons créé avec succès un nouveau projet Appwrite et importé notre SDK. L’étape suivante consiste à créer notre bucket de stockage.

Pour créer un bucket de stockage, nous allons naviguer vers notre tableau de bord où se trouve notre nouveau projet, cliquer sur le menu stockage dans la barre de menu de gauche de notre tableau de bord.

La prochaine étape consiste à créer notre bucket de stockage. Cliquer sur create bucket et créez un nom pour le compartiment de stockage. Nous nommerons notre seau de stockage file-uploader.

Après avoir créé notre bucket de stockage, nous serons redirigés pour créer un fichier. Nous sauterons la section car nous voulons apprendre comment télécharger et créer un fichier à partir de notre code, pas sur le tableau de bord.

Téléchargement de nos fichiers sur le stockage Appwrite

Nous avons créé notre bucket et notre fichier projet. Nous allons maintenant voir comment télécharger nos fichiers sur notre stockage Appwrite.

La première étape consiste à ajouter une fonction à notre bouton de saisie et de téléchargement de fichiers. Voir l’exemple de code suivant :

 <div class="flex flex-col items-center justify-center">
            <form onSubmit="window.location.reload();">
              <label>File
                <input type="file" id="file" ref="file" value="Reset" @change="handleFileUpload" />
              </label>
              <button @click="submitFile"
                class="flex mx-auto mt-16 text-white  border-0 py-2 px-8 focus:outline-none  rounded text-lg btn-style">Upload</button>
            </form>
          </div>

Après avoir importé nos fonctions Appwrite, nous créons une fonction de données qui renvoie un objet avec une seule propriété appelée fileet nous l’initialisons comme null, car il sera utilisé pour stocker le fichier sélectionné pour le téléchargement.

<script>
import { Client, Storage, ID } from "appwrite";
const client = new Client();
const storage = new Storage(client);
export { client, storage, };
client
  .setEndpoint('Your API Endpoint') 
  .setProject('Your project ID') 
  ;
export default {
  name: 'FileUploader',
  data() {
    return {
      file: null,
    };
  },
 }
</script>

Ensuite, nous créons une fonction méthode handleFileUpload. Cette méthode est appelée lorsque l’utilisateur sélectionne un fichier. Cette méthode attribue le fichier que l’utilisateur sélectionne à la propriété de fichier à l’aide de la cible des objets d’événement.

La dernière étape consiste à télécharger notre fichier sur le stockage Appwrite. Pour ce faire, nous écrirons la fonction submitFilequi nécessitera trois paramètres : une identification de stockage, un identifiant unique et le fichier à envoyer.

Pour nous assurer que notre fichier a été téléchargé avec succès, nous enregistrerons notre erreur sur la console. Si le téléchargement du fichier échoue, nous remarquerons une erreur sur notre console ; si cela réussit, notre fichier sera téléchargé dans notre bucket de stockage.

<script>
 methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async submitFile() {
      try {
        const response = await storage.createFile('Bucket ID', ID.unique(),document.getElementById('file').files[0]);
        console.log(response); // Success
      } catch (error) {
        console.log(error); // Failure
      }
    }

  }
</script>

Voyons comment fonctionnent les exemples de code, nous allons télécharger un fichier et le soumettre au bucket de stockage. Voir l’exemple ci-dessous :

Conclusion

L’un des avantages distincts de l’utilisation de l’API Appwrite Storage est qu’elle dispose d’un service de sécurité intégré pour nos fichiers. Il donne des autorisations de base de données telles que des techniques de lecture, de création et d’écriture, permettant aux utilisateurs de choisir si tous les utilisateurs, certains utilisateurs ou une équipe d’utilisateurs peuvent accéder à leurs fichiers. Cet article a montré comment créer un site Web de téléchargement de fichiers avec l’API Appwrite Storage et Nuxt.js.