Comment modifier le texte par défaut dans dropzone.js ?

Question

J'utilise dropzone.js pour télécharger des fichiers. Cependant, j'ai des difficultés à modifier le texte par défaut.

J'ai essayé d'instancier la classe dropzone :

$(document).ready(function(){
  $(".foo").dropzone({ dictDefaultMessage: "hello" });
});

Avec ce balisage :

    <div class="span4">
      <form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop3" class="foo" enctype="multipart/form-data"> </form>
    </div>
    <div class="span4">
      <form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop4" class="foo" enctype="multipart/form-data"> </form>
  </div>

Cela me permet certes de télécharger des fichiers, mais le texte par défaut est vide.

J'ai testé les éléments suivants :

 $(".foo").dropzone();

et j'obtiens le même résultat : pas de texte par défaut. Alors, comment modifier le texte par défaut ?

Answer 1

myDropzonePhotos = new Dropzone('#dropzone-test',
{
    url                : 'upload_usuario.php?id_usuario=' + id_usuario,
    maxFiles           : 1, 
    thumbnailWidth     : 1200,
    thumbnailHeight    : 300,
    dictDefaultMessage : 'Change the text here!',
    init: function()
    {
     ....

Answer 2

J'ai bricolé pendant des heures.

Pour une raison ou une autre, ces trois choses devaient être faites :

1. Mes balises dropzone ne pouvaient pas être sur la même page que celle sur laquelle j'utilisais dropzone. Je devais les référencer sur la page du modèle
2. L'élément que vous transformez en zone de saut doit avoir une classe "zone de saut
3. Vous devez ajouter ce qui suit au début du fichier js pour la page sur laquelle je travaillais.

Dropzone.autoDiscover = false;

Pour initialiser :

var myDropzone = new Dropzone("#id-upload-dropzone", {
    url: "/home/Upload",
    dictDefaultMessage: 'Drop image here (or click) to capture/upload'
});

Une fois les trois dans l'ordre, l'option dictDefaultMessage a fonctionné.

Answer 3

Pour localiser Dropzone dans les pages Asp.Net Razor, j'utilise la méthode suivante pour éviter les caractères décodés :

Créer un élément HTML pour tous les messages

<!-- localization elements -->

<div class="modal" aria-hidden="true">

    <span id="dictDefaultMessage">@_localizer["Drop files here or click to upload."]</span>

    <span id="dictFallbackMessage">@_localizer["Your browser does not support drag'n'drop file uploads."]</span>

    <span id="dictFallbackText">@_localizer["Please use the fallback form below to upload your files like in the olden days."]</span>

    <span id="dictFileTooBig">@_localizer["File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB."]</span>

    <span id="dictInvalidFileType">@_localizer["You can't upload files of this type."]</span>

    <span id="dictResponseError">@_localizer["Server responded with {{statusCode}} code."]</span>

    <span id="dictCancelUpload">@_localizer["Cancel upload"]</span>

    <span id="dictCancelUploadConfirmation">@_localizer["Are you sure you want to cancel this upload?"]</span>

    <span id="dictUploadCanceled">@_localizer["Upload canceled."]</span>

    <span id="dictRemoveFile">@_localizer["Delete"]</span>

    <span id="dictRemoveFileConfirmation">@_localizer["Are you sure you want to delete this file?"]</span>

    <span id="dictMaxFilesExceeded">@_localizer["You can not upload any more files."]</span>

    <span id="dictFileSizeUnits_TB">@_localizer["TB"]</span>

    <span id="dictFileSizeUnits_GB">@_localizer["GB"]</span>

    <span id="dictFileSizeUnits_MB">@_localizer["MB"]</span>

    <span id="dictFileSizeUnits_KB">@_localizer["KB"]</span>

    <span id="dictFileSizeUnits_b">@_localizer["b"]</span>

</div>

Puis lier les messages à l'élément Dropzone :

<script>
// get elements for localization

        with (Dropzone.prototype.defaultOptions) {

            dictDefaultMessage = document.getElementById("dictDefaultMessage").innerText;

            dictFallbackMessage = document.getElementById("dictFallbackMessage").innerText;

            dictFallbackText = document.getElementById("dictFallbackText").innerText;

            dictFileTooBig = document.getElementById("dictFileTooBig").innerText;

            dictInvalidFileType = document.getElementById("dictInvalidFileType").innerText;

            dictResponseError = document.getElementById("dictResponseError").innerText;

            dictCancelUpload = document.getElementById("dictCancelUpload").innerText;

            dictCancelUploadConfirmation = document.getElementById("dictCancelUploadConfirmation").innerText;

            dictUploadCanceled = document.getElementById("dictUploadCanceled").innerText;

            dictRemoveFile = document.getElementById("dictRemoveFile").innerText;

            dictRemoveFileConfirmation = document.getElementById("dictRemoveFileConfirmation").innerText; // if this is null, the user will not be prompted when deleting file.

            dictMaxFilesExceeded = document.getElementById("dictMaxFilesExceeded").innerText;

            dictFileSizeUnits = {

                tb: document.getElementById("dictFileSizeUnits_TB").innerText,

                gb: document.getElementById("dictFileSizeUnits_GB").innerText,

                mb: document.getElementById("dictFileSizeUnits_MB").innerText,

                kb: document.getElementById("dictFileSizeUnits_KB").innerText,

                b: document.getElementById("dictFileSizeUnits_b").innerText

            };

        };

</script>

Pour un exemple complet de téléchargement de fichier par glisser-déposer utilisant Dropzone, voir ce dépôt GitHub : https://github.com/LazZiya/FileUpload

Answer 4

Dans le css de dropzone chercher

.dropzone .dz-default.dz-message

dans cette classe supprimer

background-image: url("../images/spritemap.png");

la prochaine chose à faire est de rechercher cette classe

.dropzone .dz-default.dz-message span {
  display: none;
}

et le remplacer par display:block

Answer 5

Si vous n'êtes pas hostile à JQuery, cela cachera l'image par défaut :

$('form.dropzone').find('div.default.message').css('background-image','none');

et, cela affichera la portée par défaut que vous pouvez modifier à votre guise :

$('form.dropzone').find('div.default.message').find('span').show();
$('form.dropzone').find('div.default.message').find('span').empty();
$('form.dropzone').find('div.default.message').find('span').append('Drop files here or click here to upload an image.');