Styling bouton de téléchargement de fichier pour simple_form_for avec Bootstrap dans Rails 3

À l'aide de 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 je ferais ce style de sorte que la "choisissez un fichier" bouton peut avoir une classe différente ('btn btn-primary').

En outre, lors de l'utilisation de Bootstrap au moins, son sévèrement mal alignées par défaut. Voir image jointe.

Enfin, comment puis-je redéfinir le texte de "Aucun fichier choisi" à "a Choisi le fichier" quand il n'y a pas encore ajouté, et de montrer le nom du fichier quand il y en a un.

source d'informationauteur tibbon

C'est comment je le fais:

Dans la vue d'ajouter votre fichier de formulaire de champ et de le cacher
Ajouter un style de champs supplémentaires pour afficher le nom de fichier

Ajouter un bouton pour déclencher le fichier de la boîte de dialogue parcourir

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

Dans votre JS (Café w/jQuery), passer le clic du bouton d'affichage sur le fichier d'entrée et lorsqu'ils sélectionnent un fichier de déposer le nom de fichier dans l'écran de champ de texte (je baisse le chemin de sorte que je ne vois pas 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()

Cela a très bien fonctionné pour moi et ne nécessite 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>

6

J'ai couru à travers et je suis en utilisant Jasny de l'extension de Bootstrap 3. Il semble bien fonctionner jusqu'à présent.

Pas de JS nécessaire, du pur 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 l'utilisation de la boussole pour la compatibilité du navigateur

2

@Rafaelfranca dit que vous ne pouvez pas le style file d'entrée, mais vous pouvez ajouter votre propre touche qui sera en cliquant sur votre cachée bouton d'origine. Voir l'exemple ici http://jsfiddle.net/rUdf2/6/
2

Chaque Navigateur a un autre type de fichier d'entrée bouton de champ et cela en fait une douleur. Vous pouvez jouer un peu avec les css. Cela m'a donné une base de style avec JS, sans le désagrément "Aucun fichier choisi" texte en chrome et Safary:
```
$(document).ready(function() {
  $(".your_button").css("width", "80px");
});
```
Sinon, la meilleure solution est de le cacher et de montrer un faux qui intercepte le cliquez:

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

À l'égard de la question de savoir comment montrer qu'un fichier a été téléchargé, une solution de base avec jquery file upload est de détecter le téléchargement complet de l'événement et de remplacer une partie de votre texte avec un message de succès (Le nom exact du fichier, je crois qu'il n'est pas 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 du javascript dans vos biens:
1. Masquer l'ennuyeux "Aucun fichier de texte choisie" avec les css.
2. Place de votre "a Choisi le fichier" texte à côté du bouton et de lui donner une classe, vous pouvez référencer.
3. Remplacer le texte par "Fichier téléchargé"

Pas de fantaisie, shiz 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 DOIT être frères et sœurs les uns des autres (.fichier-image choisie .fichier-image-bouton .fichier-image)

0

Si vous êtes en utilisant Bootstrap, des Formes Simples, Jasny, et de Nouveau, ce poste peut vous intéresser refile simple_form méthode non attachment_field

Vous devez vous connecter pour publier un commentaire.