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?

54

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):

entrez la description de l'image ici

J'aimerais que l'aperçu s'affiche comme ceci: entrez la description de l'image ici

Patrick Kenny
la source

Réponses:

95

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.

Clive
la source
1
Merci pour le peu de choses sur delegate (), une connaissance très utile!
Johnathan Elmore
@Clive vraiment cool! Voulez-vous envisager de le publier comme un bac à sable? Si non, ça vous dérange si je le fais?
Letharion
4
Je préviendrais de nouveau si je pouvais;) Pour éviter les doubles emplois inutiles, je tiens simplement à souligner qu’il existe également Ajax et que Ajax se soumet pour n’importe quel formulaire , qui sont tous deux liés.
Letharion
1
@Clive Le code fonctionne parfaitement si jQuery Update est installé (même avec la version jQuery définie sur 1.7 mais avec toujours 'delegate' au lieu de 'on'). Toutefois, si je désactive le module de mise à jour jQuery, le téléchargement automatisé commence mais ne se termine pas, il entre dans un processus de téléchargement sans fin. Pouvez-vous confirmer que jQuery Update est requis?
deinqwertz
1
@deinqwertz ne devrait pas l'être, a delegate()été ajouté à la version 1.4.2 et Drupal 7 est livré avec la version 1.4.4. Je suis sûr que tout va bien sur quelques vieux sites avec le stock jQuery installé
Clive
13

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

Cardo
la source
9

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

niksmac
la source
Malheureusement, je ne sais pas comment utiliser jQuery. Y a-t-il une autre façon de faire cela?
Patrick Kenny
@ PatrickKenny, voir mon édition. Je ne connais aucune méthode Drupal pour y parvenir.
niksmac
1
Vous devez remplacer le $ par jQuery ... voir la réponse de Clive ci-dessous, ou simplement modifier ce qui précède comme suit: drupal_add_js ("jQuery (document) .ready (function () {jQuery ('. Fichier_form' '). Change (fonction () {jQuery (this) .next ('. ahah-processing'). click ();});}); ")," inline ");
Johnathan Elmore
1
@JohnathanElmore, ouais ça ne marchera pas en D7. Édité
niksmac
1
@NikhilMohan Il y a quelques autres problèmes: .ahah-processedest un nom de classe Drupal 6, et la click()méthode n'appelle pas un clic sur ces boutons pour une raison quelconque; vous devez utiliser à la mousedown()place :)
Clive
5

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);
drupal_stuff_alter
la source
4

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.

uwe
la source
3

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);
Eugene Fidelin
la source
Dans mon cas, le formulaire envoyait des requêtes AJAX pour les champs de fichier constamment en arrière-plan. De plus, il affiche un throbber de chargement sur un champ vide.
Елин Й.