Wie ändere ich den Standardtext in dropzone.js?

74

Ich verwende dropzone.js , um Dateien hochzuladen. Ich habe jedoch Schwierigkeiten, den Standardtext zu ändern.

Ich habe versucht, die Dropzone-Klasse zu instanziieren: 

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

Mit diesem Markup:

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

Dies gibt mir sicherlich die Möglichkeit, Dateien hochzuladen, aber der Standardtext ist leer.

Ich habe folgendes getestet:

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

und ich scheine das gleiche Ergebnis zu erhalten - kein Standardtext. Also .. wie ändere ich den Standardtext?

javascript jquery dropzone.js Sheldon
quelle

Antworten:

176

Fügen Sie Ihrem Dropzone-Formular wie folgt ein Element hinzu:

<div class="dz-message" data-dz-message><span>Your Custom Message</span></div>
spedley
quelle
5
Ich kann bestätigen, dass dies funktioniert, während das Ändern von "dictDefaultMessage" als Einstellung nichts zu tun scheint. Dies liegt hauptsächlich daran, dass der Text durch ein Bild ersetzt wird, auf dem sich Text befindet.
Florian Rachor
1
Diese Arbeit, aber was tun für alle anderen Arten von Nachrichten? Es gibt ein großes Loch in der Dokumentation
T-Moty
Dies ist Arbeit, ABER dies zwingt mich, nur auf den Text zu klicken, um den Dialog zum Hochladen von Dateien anzuzeigen. Das Klicken außerhalb des Textes zeigt jetzt den Datei-Upload
Hakan Fıstık
Ich verwende das HTML-Tag <dropzone> und habe keine andere Option, da ich mich in einem Winkelprojekt befinde. das oben genannte darin zu platzieren funktioniert nicht.
Tatsu
72

Sie können alle Standardnachrichten folgendermaßen ändern :

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
Dropzone.prototype.defaultOptions.dictFileTooBig = "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.";
Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";
Sergio Cabral
quelle
5
Siehe Liste aller Nachrichtenschlüssel hier: dropzonejs.com/#config-dictDefaultMessage
tuomassalo
42

Beim Erstellen der Dropzone können Sie die Standardnachricht wie folgt festlegen.

var dropzone = new Dropzone("form.dropzone", {
   dictDefaultMessage: "Put your custom message here"
});

Dann

$('div.dz-default.dz-message > span').show(); // Show message span
$('div.dz-default.dz-message').css({'opacity':1, 'background-image': 'none'});
Firze
quelle
10

Dieser Text befindet sich in der Standardkonfiguration von dropzone. Sie können Folgendes überschreiben:

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";
tientoantai
quelle
1
Vielen Dank! Ich musste die Nachricht wirklich nicht ändern, aber dies ist das einzige, was mir geholfen hat, die defaultOptions zu ändern Sil
Silvestre
9

mydzFügen Sie Ihrem Formular zuerst eine ID hinzu , und fügen Sie dann Folgendes hinzu:

Dropzone.options.mydz = {
    dictDefaultMessage: "your custom message"
};

Die ganze Seite (in diesem Fall index.php):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<script src="dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="./dropzone.css">
<title></title>

</head>

<body>

<form action="upload.php" class="dropzone" id="mydz"></form>
<script type="text/javascript">

Dropzone.options.mydz = {
    dictDefaultMessage: "Put your custom message here"
};


</script>

</body>
</html>
Ollicca Mindstorm
quelle
3
Dies ist, was Dokumentation sagt, aber leider funktioniert es nicht für mich
Victor Laerte
1
Haben Sie Ihrem Formular eine ID hinzugefügt? Wenn Sie das getan haben, kann es nicht nicht funktionieren. Fügen Sie die dropzone.js oben auf Ihrer Seite und die JS hinzu, die ich Ihnen unten auf der Seite gegeben habe, und es muss funktionieren.
Ollicca Mindstorm
Ich habe gerade meinen Beitrag mit der gesamten Seite aktualisiert, kopiere und füge diese ein, füge die relevanten Dateien hinzu und überprüfe, ob es funktioniert.
Ollicca Mindstorm
7 
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()
    {
     ....
Eduardo Paz
quelle
3
Hallo! Willkommen bei StackOverflow! Wenn Sie Fragen beantworten, anstatt nur Code anzugeben, erläutern Sie diesen bitte auch. Lesen Sie die Anleitung zur Beantwortung von Fragen hier
Ayushgp
4

Ich habe stundenlang damit herumgespielt.

Aus irgendeinem Grund mussten diese drei Dinge getan werden:

  1. Meine Dropzone-Tags konnten sich nicht auf derselben Seite befinden, auf der ich Dropzone verwendet habe. Ich musste sie auf der Vorlagenseite referenzieren
  2. Das Element, das Sie in eine Dropzone verwandeln, muss eine Klasse von 'Dropzone' haben.
  3. Sie müssen Folgendes oben in der js-Datei für die Seite hinzufügen, an der ich gearbeitet habe.

Dropzone.autoDiscover = false;

So initialisieren Sie:

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

Sobald ich alle 3 in Ordnung hatte, funktionierte die Option dictDefaultMessage.

Glück. Experte
quelle
3

Zum Lokalisieren von Dropzone in Asp.Net Razor Pages verwende ich die folgende Methode, um dekodierte Zeichen zu vermeiden:

Erstellen Sie ein HTML-Element für alle Nachrichten

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

Binden Sie dann Nachrichten an das Dropzone-Element:

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

Ein vollständiges Beispiel für das Hochladen von Drag-Drop-Dateien mit Dropzone finden Sie in diesem GitHub-Repository: https://github.com/LazZiya/FileUpload

Laz Ziya
quelle
2

Wenn Sie JQuery nicht ablehnen, wird das Standardbild ausgeblendet:

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

und dies zeigt die Standardspanne an, die Sie ändern können, um zu sein, was Sie wollen:

$('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.');
Federkielbrecher
quelle
2

in der css von dropzone suchen 

.dropzone .dz-default.dz-message

in dieser Klasse löschen 

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

Als nächstes müssen Sie diese Klasse durchsuchen

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

und ändern Sie es in Anzeige: Block

Snick MB
quelle
2

Wenn Sie Dropzones programmgesteuert erstellen, müssen Sie Ihre Optionen wie folgt festlegen:

Dropzone.autoDiscover = false;

profilePicture = new Dropzone('#profile-picture', {
    url: "/uploadPicture.php",

    // if you are using laravel ..., you dont need to put csrf in meta tag
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },

    dictDefaultMessage: "Your default message Will work 100%",

    /other options
    paramName: "profile_picture",
    addRemoveLinks: true,
    maxFilesize: 1,
    maxFiles: 10,

    dictRemoveFile: "Remove",

});

Wenn Sie es so verwenden, wird es nicht funktionieren ...

let myDropzone = new Dropzone("#profile-picture", {

    url: "/uploadPicture.php",
    // if you are using laravel ..., you dont need to put csrf in meta tag
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },

});

myDropzone.options.profilePicture = {

    dictDefaultMessage: "This message not gonna work",

    paramName: "profile_picture",
};
VeRJiL
quelle