javascript - Uploading a file from a web app with dropzone.js -

javascript - Uploading a file from a web app with dropzone.js -

i building web app. have allow user upload image or drag-and-drop 1 browser. help this, i'm using dropzone.js. challenge is, need customize appearance bit.

my customization requires features seem pretty forwards in dropzone.js. basically, need: 1 file can uploaded @ once. while file beingness uploaded, need show progress bar. 1 time uploaded, need allow user either a) remove existing image or b) replace image one. in effort this, have next html:

<div id="mydropzone" style="cursor:pointer;"> <div class="files" id="previews"> <div id="template" class="file-row"> <ul class="list-inline"> <li> <span class="preview" style="width:300px;"><img data-dz-thumbnail /></span> <p class="size" data-dz-size></p> </li> <li style="vertical-align:top;"> <ul id="pictureactions" class="list-unstyled"> <li> <button class="btn btn-default dz-clickable file-input-button"> <i class="glyphicon glyphicon-picture"></i> <span>pick...</span> </button> </li> <li> <button data-dz-remove class="btn btn-danger btn-block" style="margin-top:8px;"> <i class="glyphicon glyphicon-trash pull-left"></i> <span>delete</span> </button> </li> </ul> </li> </ul> <div id="uploadprogress" class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <div class="progress-bar progress-bar-warning" style="width:0%;" data-dz-uploadprogress> <span>please wait...</span> </div> </div> </div> </div> <div id="uploadprompt">drag-and-drop image here</div> </div>

i initializing code dropzone using next javascript:

$(function () { var previewnode = document.queryselector("#template"); previewnode.id = ""; var previewtemplate = previewnode.parentnode.innerhtml; previewnode.parentnode.removechild(previewnode); var picturedropzone = new dropzone("div#mydropzone", { url: "/pictures/upload", clickable: true, uploadmultiple: false, autoprocessqueue: true, previewtemplate: previewtemplate, previewscontainer: "#previews", init: function () { this.on("complete", function (data) { $('#pictureactions').show(); $('#uploadprogress').hide(); $('#uploadprompt').hide(); }); }, uploadprogress: function (e, progress) { $('#uploadprogress').css('width', progress); }, removedfile: function () { $('#previews').hide(); $('#uploadprompt').show(); } }); });

there several problems though. if click text drag-and-drop image here, file picker not open. if click outside of text, file picker opens. also, code works initial process of choosing file. however, if click "pick..." button, page post back. in reality, expecting file picker appear again. if click "delete" button, , take file 1 time again file picker, picture, upload progress , action buttons never appear.

i sense i'm screwing initialization of dropzone somehow. doing wrong? why can't take image or delete image , take 1 or open file picker if click prompt text?

i have changed code

this.on("complete", function (data) { $("#previews").show(); //this line added ... , it's worked... $('#pictureactions').show(); $('#uploadprogress').hide(); $('#uploadprompt').hide(); });

i think line: $('#previews').hide(); have hidden preview element, , not alter status when append new image. :).

and word but, can see old image added, think it's new bug... trying solute it... have thought it.

http://jsfiddle.net/qek0xw1x/15/

javascript dropzone.js