🎯 Intention

Pour des besoins métier il est possible de télécharger des fichiers volumineux. Afin de limiter la charge du serveur, la configuration du **DirectUpload** est nécessaire.

Le principe du direct upload est d’envoyer les fichiers vers un service de stockage (Google storage, Amazon S3…) directement depuis le navigateur de l’utilisateur, sans passer par le serveur.

<aside> ✅ Pré-requis

• Avoir vu le standard : ‣ </aside>

✅ Points clés

<aside> ⌛ Temps indicatif : ~ 2h

</aside>

Etape

Visuel / Exemple

🔗 Configurer le direct_upload

• Inclure ActiveStorage dans le fichier assets/javascripts/active_admin.js

• Ajouter le direct_upload dans le formulaire

  Via active admin, nous utilisons Formtastic pour les formulaires. Ce qui nous pousse à utiliser l’élément data-direct-upload-url et non le direct_upload: true de la documentation

//= require activestorage

# views/admin/orders/_form.html.arb

input :picture,
      as: :file,
      input_html: {
        accept: "image/png, image/jpeg, image/webp",
        "data-direct-upload-url": rails_direct_uploads_url,
      },
      required: true

🔗 Vérifier son implémentation.

• Inspecter la page web

  Lors de la soumission du formulaire, on constate dans la partie Network la prise en charge du direct upload.

• Inspecter les logs

  On observe dans les logs le début et la fin du processus d’upload de notre image. Il se fait avant l’édition de notre resource.

Exemple de reponse dans le Network lors d’un upload d’image sur Iris staging. On voit ici que le direct_upload s’execute et nous renvoit une 200.

Exemple de logs sur Iris. Dans l’encadré on observe le début de la requête POST vers l'URL "/rails/active_storage/direct_uploads” et nous renvoit un statut 200 OK. Le controller ActiveStorage::DirectUploadsController prend le relais pour interagir avec notre service de stockage en lui envoyant notre blob au format json.

❌ Erreurs type à éviter

• <%=** f.input :picture, **direct_upload: true** **%> ❌ Utiliser l’argument direct_upload avec formtastic Cela ne fonctionne pas ! car dans la documentation il précise de le faire avec input_filed et non f.input (de formtastic/simple_form) Il faut l’écrire comme en passant directement l’argument html :

  input :picture,
        as: :file,
        input_html: {
          "data-direct-upload-url": rails_direct_uploads_url,
        }
  

🎓Aller plus loin