web-dev-qa-db-fra.com

Bouton de téléchargement de fichier de style pour simple_form_for avec Bootstrap dans Rails 3

Using simple_form_for, Bootstrap et Rails 3. Dans un formulaire: 

<%= f.input :upload, label: 'PDF file:' , input_html: {accept: ('application/pdf') } %>

Je ne sais pas comment j'appellerais cela pour que le bouton "choisir un fichier" puisse avoir une classe différente ("btn btn-primary").

De plus, lors de l’utilisation avec Bootstrap au moins, il est très mal aligné par défaut. Voir l'image ci-jointe.

Enfin, comment puis-je redéfinir le texte de "Aucun fichier choisi" à "Choisir un fichier" quand aucun fichier n'a encore été ajouté et afficher le nom du fichier lorsqu'il en existe un? 

enter image description here

ruby-on-railsfile-uploadtwitter-bootstrapsimple-form
13
tibbon

Voici comment je le fais:

  1. Dans la vue, ajoutez votre champ de fichier de formulaire et masquez-le.
  2. Ajouter un champ supplémentaire stylé juste pour afficher le nom du fichier

  3. Ajouter un bouton pour déclencher la boîte de dialogue de recherche de fichier

    <div class="control-group">
  <div class="attach-set">
    <%= f.input :real_file, input_html: { hidden: true }, label: 'Upload Attachment' %>
    <div class="input-append">
      <input id="file-display" class="input-large uneditable-input" type="text">
      <a id="upload-btn" class="btn"><i class="icon-upload-alt"></i> Browse</a>
    </div>
  </div> <!-- /attach-set -->
</div> <!-- /control-group -->

  4. Dans votre JS (Café avec jQuery affiché), passez le clic du bouton d’affichage sur l’entrée de fichier réelle et quand ils sélectionnent un fichier, déposez le nom du fichier dans le champ de texte à afficher C:\FakePath ....)

    $(document).ready ->

  # ------------------------------------------------------
  # pretty-fy the upload field
  # ------------------------------------------------------
  $realInputField = $('#real_file')

  # drop just the filename in the display field
  $realInputField.change ->
    $('#file-display').val $(@).val().replace(/^.*[\\\/]/, '')

  # trigger the real input field click to bring up the file selection dialog
  $('#upload-btn').click ->
    $realInputField.click()
24
BSB

Cela a fonctionné très bien pour moi et ne nécessite que du code HTML

<label class="btn btn-primary">
  Add a file!
  <span style="display:none;">
    <%= f.file_field :image, required: true, multiple: true, name: 'picture' %>
  </span>
</label>
10
Yoko

Je suis tombé sur et utilise l'extension de Jasny à Bootstrap 3 . Cela semble bien fonctionner jusqu'à présent.

6
kross

Pas de JS requis, rien que du css

scss

.fileinput-button {
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 4px;
  width: 110px;
  height: 32px;
  input{
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(-300px, 0) scale(4);
    direction: ltr;
    cursor: pointer;
  } 
}

html/slim

span class="btn btn-success fileinput-button"
  i.fa.fa-pencil
  span
   |  Select File
  = f.file_field :cover_ar

Je recommande d'utiliser la boussole pour la compatibilité entre navigateurs

5
Max

Chaque navigateur a un type différent de bouton de champ de saisie de fichier, ce qui en fait un problème. Vous pouvez jouer un peu avec css. Cela m'a donné un style de base avec JS sans le texte ennuyeux "Aucun fichier choisi" en chrome et Safary:

$(document).ready(function() {
  $(".your_button").css("width", "80px");
});

Sinon, la meilleure solution consiste à le masquer et à en afficher un faux qui intercepte le clic:

http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/

En ce qui concerne la question de savoir comment montrer qu'un fichier a été téléchargé, une solution de base avec le téléchargement de fichier jquery consiste à détecter l'événement de fin de téléchargement et à remplacer une partie de votre texte par un message de réussite possible d'obtenir avec les navigateurs modernes):

$(".your_button").fileupload({
    dataType: "json",
    done: function(e, data) {
        $(".place_for_your_text").text("File uploaded.");
    }
});

En résumé, une solution de base consiste à utiliser JavaScript dans vos actifs pour:

  1. Cachez le "Pas de fichier texte choisi" avec css.
  2. Placez votre texte "Choisir un fichier" à côté du bouton et donnez-lui une classe que vous pouvez référencer.
  3. Remplacer le texte par "Fichier téléchargé"
2
joscas

Comme @rafaelfranca a dit que vous ne pouvez pas styler une entrée file mais vous pouvez ajouter votre propre bouton qui cliquera sur votre bouton d'origine masqué. Voir exemple ici http://jsfiddle.net/rUdf2/6/

2
Vasiliy Ermolovich

Pas de fantaisie requis:

HTML:

<form method="post" action="/api/admin/image" enctype="multipart/form-data">
    <input type="hidden" name="url" value="<%= boxes[i].url %>" />
    <input class="image-file-chosen" type="text" />
    <br />
    <input class="btn image-file-button" value="Choose Image" />
    <input class="image-file hide" type="file" name="image"/> <!-- Hidden -->
    <br />
    <br />
    <input class="btn" type="submit" name="image" value="Upload" />
    <br />
</form>

JS:

$('.image-file-button').each(function() {
      $(this).off('click').on('click', function() {
           $(this).siblings('.image-file').trigger('click');
      });
});
$('.image-file').each(function() {
      $(this).change(function () {
           $(this).siblings('.image-file-chosen').val(this.files[0].name);
      });
});

ATTENTION: Les trois éléments de formulaire en question DOIVENT être des frères et soeurs distincts (.image-fichier-choisi, .image-fichier-bouton, fichier .image)

0
mattdlockyer

Si vous utilisez Bootstrap, Simple Forms, Jasny et ReFile, ce message peut vous intéresser refile, méthode simple_form undefined, attachment_field

0
Chris Hough