Comment puis-je télécharger automatiquement des images sur la sélection de fichier plutôt que d'appuyer sur le bouton de téléchargement?

J'ai un type de contenu personnalisé pour permettre aux utilisateurs de télécharger des images. J'essaie de garder l'interface aussi simple que possible.

Le type de contenu contient un seul champ d'image. Cela fonctionne, mais certains utilisateurs ne comprennent pas que l'image a été téléchargée car ils ne la voient pas après la sélection (pour prévisualiser le téléchargement, vous devez appuyer sur le bouton de téléchargement). Existe-t-il un moyen de sauter / appuyer automatiquement sur le bouton de téléchargement pour afficher une image immédiatement après la sélection du fichier?

En d'autres termes, immédiatement après la sélection d'un fichier, au lieu de l'image suivante (où le chemin est affiché mais difficile à lire dans Firefox):

J'aimerais que l'aperçu s'affiche comme ceci:

Vous feriez mieux de faire cela au niveau du module, plutôt qu'au niveau du thème, car le JS ne prendra pas effet pour les pages d’administration (à moins que vous utilisiez bien sûr le même thème pour les deux).

Voici un petit module pour fournir cette fonctionnalité à l’ensemble du système:

Fichier: auto_upload.info

name = Auto Upload
description = Removes the need for users to press the 'Upload' button for AJAX file uploads.
core = 7.x
dependencies[] = file

Fichier: auto_upload.js:

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).delegate('input.form-file', 'change', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

Fichier: auto_upload.module

function auto_upload_init() {
  drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js');
}

Une fois que vous avez installé le module, toutes les entrées de fichier AJAX (c'est-à-dire celles qui possèdent un bouton «Mise à jour») seront affectées… vous n'aurez plus besoin d'appuyer sur le bouton «Télécharger» après avoir sélectionné le fichier. .

En utilisant cette delegate()méthode, cela fonctionnera également parfaitement pour les champs de fichier autorisant plusieurs téléchargements, ainsi que pour les champs chargés dans la page à la suite d'une demande AJAX.

J'ai testé ça sous Chrome, Safari et Firefox et ça marche un plaisir :)

Note de bas de page : Dans le cas (probablement très peu probable) que votre site utilise jQuery 1.7, vous devez utiliser la on()méthode, qui a été remplacée delegate().

UPDATE J'ai créé un projet de sandbox pour ce module.

Si vous êtes dans cette situation, essayez d’utiliser le module AutoUpload .

AutoUpload est une amélioration de l'interface utilisateur qui initie le téléchargement automatique de fichiers en réduisant le nombre de clics requis par un utilisateur.

Actuellement, les utilisateurs doivent sélectionner des fichiers, puis appuyer sur le bouton "Télécharger". Nous avons constaté que les utilisateurs ne réalisent souvent pas qu’une touche est nécessaire et pensent à tort que leur image est téléchargée alors que ce n’est pas le cas.

Il est actuellement disponible pour D6 et D7

Drupal 6

Essayez quelque chose comme ceci dans votre document jQuery prêt

jQuery('.form-file').change( function() {   
  jQuery(this).next('.ahah-processed').click();
}); 

Collez le texte suivant dans page.tpl ou node.tpl

drupal_add_js("jQuery(document).ready(function() {
  jQuery('.form-file').change( function() { 
    jQuery(this).next('.ahah-processed').click();
  });   
});", 'inline');

Je ne connais aucune méthode Drupal pour y parvenir.

violon

Vous pouvez y arriver en utilisant on(). delegate()a été déconseillé.

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).on('change', 'input.form-file', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

Jetez un coup d'œil au module d' intégration Plupload .

Fournit une intégration entre le widget Plupload pour télécharger plusieurs fichiers et Drupal. Plupload est un outil de téléchargement de fichiers multiples sous licence GPL pouvant présenter des widgets dans Flash, Gears, HTML 5, Silverlight, BrowserPlus et HTML4, en fonction des capacités de l'ordinateur client.

Si vous utilisez le champ de téléchargement de fichier sur le formulaire AJAX - après sa soumission, vous risquez de perdre la fonctionnalité de téléchargement automatique (voir https://drupal.stackexchange.com/a/31453/7313 ).

Pour réparer - utilisez ce script

(function($) {

Drupal.behaviors.autoUpload = {
  attach: function (context, settings) {
    $('input.form-file', context).once(function() {
      $(this).change(function() {
        $(this).parent().find('input[type="submit"]').mousedown();
      });
    });
  }
};

})(jQuery);