Click here to Skip to main content
14,420,691 members

JavaScript

 
AnswerRe: no me funciona funcion autocomplete Jquery Pin
Nelek20-Oct-18 9:59
protectorNelek20-Oct-18 9:59 
QuestionMap JSON data file with dates and multiple string value pairs to Angular/Chart.js Pin
Member 1201357914-Oct-18 23:08
MemberMember 1201357914-Oct-18 23:08 
Questionaspx file don't open in chrome Pin
anasr200010-Oct-18 3:22
professionalanasr200010-Oct-18 3:22 
Questiontest regexep javascript Pin
Alboyz5-Oct-18 5:31
MemberAlboyz5-Oct-18 5:31 
AnswerRe: test regexep javascript Pin
Richard Deeming5-Oct-18 5:48
communityengineerRichard Deeming5-Oct-18 5:48 
GeneralRe: test regexep javascript Pin
Alboyz5-Oct-18 6:02
MemberAlboyz5-Oct-18 6:02 
GeneralRe: test regexep javascript Pin
uxotucung9-Nov-18 4:09
Memberuxotucung9-Nov-18 4:09 
QuestionAdding a list of files to the array and displaying them in the component Pin
Member 140077214-Oct-18 5:33
MemberMember 140077214-Oct-18 5:33 
Hi,
I have a big problem with JS.
I would like to add to my dropzona component a list of files on the server.

I have this code:


<pre lang="Javascript"><div class="row">
    <div class="col-12">
        <form class="dropzone" id="dpz-multiple-files" action="http://localhost/dropZoneUpload.php"
              method="post" enctype="multipart/form-data" style="border:1px solid #000;">

        </form>
        <br>
        <center>
            <button id="submit-all" style="height: 40px;"> Upload All the files</button>
        </center>
    </div>
</div>

function getValueFromJson() {
            let res = $.ajax({
                url: 'http://localhost/dropZoneUpload.php?parm=1',
                type: 'get',
                dataType: 'json',
                success: function (response) {
                    return response;
                }
            })
            return res;
        }


The php file returns the result:

[{"name":"index.html","size"Blush | :O ,"path":"..\/assets\/uploads\/index.html"},{"name":".DS_Store","size":8196,"path":"..\/assets\/uploads\/.DS_Store"},{"name":"q1.jpg","size":433382,"path":"..\/assets\/uploads\/q1.jpg"},{"name":"bla.jpg","size":193540,"path":"..\/assets\/uploads\/bla.jpg"},{"name":".htaccess","size":106,"path":"..\/assets\/uploads\/.htaccess"}]



In this way I define the truncated JS:

Dropzone.options.dpzMultipleFiles = {
            uploadMultiple: true,
            paramName: "file",
            maxFilesize: 100,
            maxFiles: 2,
            createImageThumbnails: true,
            acceptedFiles: ".png,.jpg,.jpeg",
            clickable: true,
            thumbnailWidth: 150,
            thumbnailHeight: 150,
            autoProcessQueue: false,


            init: function () {
                var submitButton = document.querySelector("#submit-all")
                dpzMultipleFiles = this;
                submitButton.addEventListener("click", function () {
                    dpzMultipleFiles.processQueue();
                });
                this.on('completemultiple', function (file, json) {
                    $('.sortable').sortable('enable');
                });
                this.on('success', function (file, json) {
                    let val = file.accepted;
                    if (file.accepted == true) {
                        //alert ('JSON - wgrałem!');
                        console.log(json);
                        $('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
                    }
                    let val1 = file.name;
                });
                this.on("addedfile", function (file) {
                    var removeButton = Dropzone.createElement("<button> Remove file </button>");
                    // Capture the Dropzone instance as closure.
                    var _this = this;

                    //console.log(file);
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        _this.removeFile(file);
                        // If you want to the delete the file on the server as well,
                        // you can do the AJAX request here.
                        console.log("kasuje" + file.name);
                        console.log(file);
                    });
                    file.previewElement.appendChild(removeButton);
                });
                this.on('drop', function (file) {
                    console.log('File', file);
                    alert('bb');
                });
                this.on("maxfilesexceeded", function (file) {
                    this.removeFile(file);
                });
            }
        };


        $(function () {
            $(".dropzone").sortable({
                items: '.dz-preview',
                cursor: 'move',
                opacity: 0.5,
                containment: '.dropzone',
                distance: 20,
                tolerance: 'pointer'
            });
        });



How can I display a list of my files in DropZoneJS (downloaded from PHP)?


I found an example on the Internet:

$(".dropzone").dropzone({
  init: function() { 
    myDropzone = this;
    $.ajax({
      url: 'upload.php',
      type: 'post',
      data: {request: 2},
      dataType: 'json',
      success: function(response){

        $.each(response, function(key,value) {
          var mockFile = { name: value.name, size: value.size };

          myDropzone.emit("addedfile", mockFile);
          myDropzone.emit("thumbnail", mockFile, value.path);
          myDropzone.emit("complete", mockFile);

        });

      }
    });
  }
});



But I do not know how to adapt it in my code. Frown | :(


Can I ask for help?
Does anyone know how to do it?

QuestionDate picker style not showing Pin
thepast24-Sep-18 9:21
Memberthepast24-Sep-18 9:21 
AnswerRe: Date picker style not showing Pin
ZurdoDev24-Sep-18 9:58
mveZurdoDev24-Sep-18 9:58 
GeneralRe: Date picker style not showing Pin
Iniciativa Box Funcional25-Sep-18 8:36
MemberIniciativa Box Funcional25-Sep-18 8:36 
QuestionRelation between null and zero. Pin
GKP199222-Sep-18 22:21
professionalGKP199222-Sep-18 22:21 
AnswerRe: Relation between null and zero. Pin
Richard Deeming24-Sep-18 9:03
communityengineerRichard Deeming24-Sep-18 9:03 
GeneralRe: Relation between null and zero. Pin
GKP199224-Sep-18 18:37
professionalGKP199224-Sep-18 18:37 
QuestionTypeScript, Dropping Image and loading preview without posting, a working sample, FileReader, readAsDataUrl, reader.result Pin
jkirkerx19-Sep-18 8:55
professionaljkirkerx19-Sep-18 8:55 
QuestionCan't match this string in typescript using if and else if Pin
jkirkerx18-Sep-18 14:04
professionaljkirkerx18-Sep-18 14:04 
AnswerRe: Can't match this string in typescript using if and else if Pin
Graham Breach18-Sep-18 22:21
MemberGraham Breach18-Sep-18 22:21 
GeneralRe: Can't match this string in typescript using if and else if Pin
jkirkerx19-Sep-18 8:27
professionaljkirkerx19-Sep-18 8:27 
QuestionCan't match this string in typescript using if and else if Pin
jkirkerx18-Sep-18 14:04
professionaljkirkerx18-Sep-18 14:04 
QuestionHow to cancel a drag event Pin
jkirkerx18-Sep-18 10:25
professionaljkirkerx18-Sep-18 10:25 
AnswerRe: How to cancel a drag event Pin
Richard Deeming18-Sep-18 11:53
communityengineerRichard Deeming18-Sep-18 11:53 
GeneralRe: How to cancel a drag event Pin
jkirkerx18-Sep-18 12:54
professionaljkirkerx18-Sep-18 12:54 
Questioncouldn't read from datalist Pin
thepast16-Sep-18 22:01
Memberthepast16-Sep-18 22:01 
QuestionHow to pass JavaScript output to an HTML String Variable outside the <script>? Pin
Member 1348136115-Sep-18 16:45
MemberMember 1348136115-Sep-18 16:45 
AnswerRe: How to pass JavaScript output to an HTML String Variable outside the <script>? Pin
Richard Deeming18-Sep-18 4:45
communityengineerRichard Deeming18-Sep-18 4:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.