Using dropzone.js, I've had no issues getting it to work, including retrieving images already previously uploaded to the server.
The only problem I have is when I retrieve those files from the server on a page refresh (meaning they weren't uploaded during this page's current usage), the upload progress bar is permanently displayed. Is there any way to suppress the progress bar for images previously uploaded? I would like to continue to use the progress bars when uploading and don't want to remove the css from the template.
Not that it's helpful in this case, but here is the code I'm using to retrieve the files and display them in a remote previews div.
Dropzone.options.myDropzone = {
previewsContainer: document.getElementById("previews"),
init: function()
{
thisDropzone = this;
$.get('../cgi/fileUpload.php', function(data)
{
$.each(data, function(key,value)
{
var mockFile = { name: value.name, size: value.size};
thisDropzone.options.addedfile.call(thisDropzone, mockFile);
thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.uploaddir+value.name);
var strippedName = (value.name).slice(11);
fileList[i] = {"serverFileName" : value.name, "fileName" : value.name, "fileSize" : value.size, "fileId" : i };
i++;
var removeButton = Dropzone.createElement("<button class=\"btn btnremove\" style=\"width: 100%;\">Remove file</button>");
var _this = this;
removeButton.addEventListener("click", function(e)
{
e.preventDefault();
e.stopPropagation();
thisDropzone.removeFile(mockFile);
});
mockFile.previewElement.appendChild(removeButton);
});
});
},
url: "../cgi/fileUpload.php"
};
Make sure that there is no progress bar, etc...
thisDropzone.emit("complete", mockFile);
FAQ Dropzone.JS
This is an old question but I had the same issue. My solution was to edit my .css file:
.dz-progress {
/* progress bar covers file name */
display: none !important;
}
I had same problem.
$('.dz-progress').hide();
It would be great if you use .hide() instead of .remove() method.
Because .remove() remove that div permanent.
Answered! Chose to just remove the divs using jquery after they were delivered:
$(".dz-progress").remove();
Not overly elegant, but it works.
Try this worked for me
$(".spinner").hide();
you can try this and work
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
this.on("addedfile", function(file) {
console.log("Added file.");
$(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
console.log(this);
console.log(file);
});
var mockFile = { name: "myimage.jpg", size: 1235, type: "image/jpeg", serverId: 151987, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
this.emit("addedfile", mockFile);
this.options.thumbnail.call(this, mockFile, 'https://lh3.googleusercontent.com/40gtienq1vthvuWpzCErQJqucB6oxANPHawkEiF6BEJH0Q7mJwHuOyUeRwMBIGb8vO8=s128');
this.emit("success", mockFile);
this.emit("complete", mockFile);
this.files.push(mockFile);
$(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
$(this.previewsContainer).find('.dz-progress').hide(); //<-- okkk
},
If you have any class with "spinner", this will hide all of those elements. There is a "dz-preview" class for the div element that displays the progress. As mentioned in other responses, you can either augment the existing class to trick Dropzone into thinking the upload completed or you can purge the element with class "dz-preview".
Related
I'm using dropzone from https://www.dropzonejs.com to upload a single picture. I'm loading a html-page with the command .load of jquery like this:
$( "#showsettingsother" ).click(function() {
$('#settingscontent').load('settingscompany.html', function() {
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone($('.dropzone').get(0), {
init: function() {
var me = this;
$.getJSON(webserverurl + '?sessionid=' + sessionkey + '&settings=true&company=checkCompanyPhotoExists', function( json ) {
if(json.STATUS == 'OK') {
var mockFile = { name: "Firmenlogo", dataURL: getcompanypicture, accepted: true };
me.createThumbnailFromUrl(mockFile, getcompanypicture);
me.files.push(mockFile);
me.emit('addedfile', mockFile);
me.emit('thumbnail', mockFile, getcompanypicture);
me.emit('complete', mockFile);
}
});
},
... [shortened]
}
}
}
Inside settingscompany.html I've got this:
<form id="uploadCompanyPicture" action="" class="dropzone"></form>
Now I've got a menu like this:
<ul>
<li id="settingscompany"><a id="showsettingscompany" href="#">Company settings</a></li>
<li id="othersettings"><a id="showsettingsother" href="#">Other settings</a></li>
</ul>
<script>
$( "#showsettingsother" ).click(function() {
$('#settingscontent').load('othersettings.html');
}
</script>
My problem is the following:
I upload a picture to dropzone (image1.jpg). This works fine.
I upload a second picture to dropzone (image2.jpg). This works also fine.
Now I click on "Other Settings" and I click back to "Company settings".
The result is, that it shows image1.jpg and not image2.jpg.
When I restart the browser it shows image2.jpg.
So it displays the wrong picture. Has anybody an idea what I'm doing wrong?
I belive you aren't calling back your onload picture or the function you are using to get the first image. My advise is that you encapsule the function, when you change the picture you called it back and it gets to refresh at your command.
// I'would have added a comment but I can't yet.
I have a select option element in my project with two options, books and images. For book option, I want to allow only single file to upload. But for images option I need to allow multiple file selection. I am trying to this way but not succeeded:
Dropzone.options.frmMediaDropzone = {
maxFilesize: 99,
acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf",
parallelUploads: 1,
addRemoveLinks: true,
maxFiles: 100,
init: function() {
myDropzone = this;
this.on("removedfile", function(file) {
console.log(file);
});
this.on("success", function(file, response) {
console.log(response.imageName);
});
}
};
On option change, I am trying this:
Dropzone.options.frmMediaDropzone.maxFiles = 1;
But its not working. If anyone has idea please help.
Try this way to solve your problem,
you need to define a variable in javascript.
var myDropZone;
Initialize myDropZone vairable in init() event.
init: function() {
myDropzone = this;
}
myDropzone became accessible so the statement
myDropzone.options.maxFiles = 1;
set clickable:false after a file upload done,
myDropzone.options.clickable = false;
remove file mannually after exceed max file limit.
myDropzone.on("maxfilesexceeded", function(file) {
myDropzone.removeFile(file);
});
There a two ways of doing this. You can either dynamically create your dropzone and then change the attributes of it using .attr, or create a listener event in your init property when you define the dropzone.
See this link for a similar example (See the 2nd answer):
Dropzone: change acceptedFiles dynamically
I am trying to write a delete function in Dropzone.js. In order to do that I need the id of the file the way it was uploaded.
I tried to get a property of an object with no success. Now I am trying to use jQuery to get the value or text content of the span that has it.
this is the screenshot of the structure. The jQuery code I am trying is:
var loooot = $(".dz-filename").parents('span').text();
To be more specific I am trying to get the number 1_1477778745352 (which is a time stamp).
The Dropzone code is as follows:
<script>
var listing_id = "1";
// these are the setting for the image upload
Dropzone.options.pud = {
acceptedFiles: ".jpeg,.jpg,.png,.gif",
uploadMultiple: false,
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
addRemoveLinks: true,
maxFiles: 10,
renameFilename: function (filename) {return listing_id + '_' + new Date().getTime();},
init: function()
{
this.on("removedfile", function(file)
{
var loooot = $("span", ".dz-filename").html();
alert(loooot);
});
}
};
</script>
Try this use JQuery's .text(); to get inner text
Update: use this with DOM .ready() like that.
Deep selector
$(document).ready(function(){
var fname = $("#pud .dz-filename span [data-dz-name]").text();
});
OR (if your form is dynamic)
function get_fname(){
return $("#pud .dz-filename span [data-dz-name]").text();
}
Then use get_fname();
It becomes undefined because dropzone works dynamicly, use this:
$('body').find(".dz-filename").find('span').text();
Best way to do this is to declare dropzone:
//first declare somewhere variable
var my_drop;
// then on creating dropzone:
my_drop = new Dropzone('.dropzone', {
/* your setup of dropzone */
});
Then you can retreive information about files with this:
my_drop.files[0].name
The [0] represent's first file, you can loop through them if there's more then one.
Use:
var loooot = $("span", ".dz-filename").html();
Working Demo.
var loooot = $("span", ".dz-filename").html();
alert(loooot);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dz-filename">
<span>Test</span>
</div>
EDIT
Since you are setting the text dynamically it may happens that jquery read the HTML before that you set it, to prevent this you have to call this function after the timestamp as a callback (i can't help you without seeing how you set the span text).
So do something like:
function setSpan(callback) {
// Set your stuffs
// Call the callback
callback();
}
function getText() {
// I'm the callback witch get the html
}
//Onload
setSpan(getText());
EDIT
For dropzone you can use queuecomplete that start a function after the queue, i'm not an dropzone expert but i suppose:
init: function () {
this.on("queuecomplete", function (file) {
//Get span html
alert("All files have uploaded ");
});
}
The working solution I found is this:
init: function()
{
this.on("removedfile", function(file)
{
var loooot = $(file.previewElement).find('[data-dz-name]').text();
alert(loooot);
});
}
I have applied following settings:
acceptedFiles: "image/jpeg, image/jpg, image/png, image/gif",
It is not excepting other files but thumbnail is not removed automatically, I would like to remove thumbnail too.
Currently, dropzone gives following error for non acceptedFiles: You can't upload files of this type.
I dont want to display that message and simply remove that thumbnail from drop area.
Can anyone let me know, how can I achieve the same?
Try this:
init: function() {
this.on("addedfile", function (file) {
var _this = this;
if ($.inArray(file.type, ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']) == -1) {
_this.removeFile(file);
}
});
}
I'm using a file uploader called "upload-at-click" from: https://code.google.com/p/upload-at-click/
It works good but the problem I'm having is I need two upload buttons on the page to upload two separate kinds of files. But I can only have one instance of the upclick() function, so I'm not sure how I can do this?
The code used for one button is:
var element = document.createElement('input');
element.value = 'Load CSV';
element.id = 'uploader';
element.type = 'button';
stage.appendChild(element);
upclick({
element: element,
action: '/mailer/file_upload.php',
onstart: function (filename) {
alert('Uploading: ' + filename);
},
oncomplete: function (response_data) {
alert('Data upload complete.');
}
});
I think you can pass element as already existing element from DOM.
$('.uploadButton').click(function(){
upclick({
element : this // or maybe jQuery object $(this) ???
/* rest of code */
});
});