Clear dropzone.js thumbnail image after uploading an image - javascript

I have using dropzone.js in mvc by following this tutorial for uploading images but after uploading the image the thumbnail image still showing and I need it to be removed after every time I upload an image.
I have tried to replace the generated HTML after uploading the image using jQuery but it not showing correctly as the first time I need to refresh the page to show correctly but I don't want to do that.
$("#ImageUpload").replaceWith('<form action="/Products/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone dz-clickable" id="dropzoneForm">'
+'<div class="fallback">'
+'<input name="file" type="file" multiple />'
+'<input type="submit" value="Upload" />'
+'</div>');

You can try this:
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
More information here:
http://www.dropzonejs.com/#dropzone-methods

removeAllFiles() and removeFile() will trigger the server-side removal too, if you hooked Dropzone to remove files as well.
The solution to clear it only client-side, remove the file preview, and if you had a blank state message, remove the dz-started class to prevent the Dropzone CSS from hiding it:
$('.dropzone')[0].dropzone.files.forEach(function(file) {
file.previewElement.remove();
});
$('.dropzone').removeClass('dz-started');

Another option (similar to answer of Giraldi, but then when all files are completed):
myDropzone.on("queuecomplete", function () {
this.removeAllFiles();
});

it was actually an easy thing to do but some time it go hard so i just delete the dropzone generated code using jquery and add a button with 'id = btnCreate' then
$('#btnCreate').click(function () {
$('div.dz-success').remove();
});
and when i upload the thumbnail image removed after i click the button

Just an fyi...
The method removeAllFiles is not necessarily the prime choice. Which is the same as removeFile(file).
I have an event handler for dropZone's removedfile event... I'm using it to send a server message to delete the respective file from the server (should a user delete the thumbnail after it's been uploaded). Using the method removeAllFiles (as well as the individualized removeFile(file)) fires the event removedfile which deletes the uploaded images in addition to clearing the thumbnails.
So one could add some finessing around this but in the reality of it the method as mentioned in the primary answer on this thread is not correct.
Looking through the api for Dropzone I am not seeing an API call to simply reset or clear the thumbnails... The method disable() will clear the stored file names and what not but does not clear the thumbnails... Seems dropzoneJS is actually missing a critical API call to be honest.
My work around is to manually reset the containing div for dropzone:
document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""
This clears the thumbnails without firing off the event removedfile which is supposed to be used for deleting an image from the server...

docsDropzone.on('complete', function (response)
{
$(".dz-preview").remove();
});
Above works for me

try this on your library dropzone dropzone.js; but set time out to auto close 2500
success: function(file) {
if (file.previewElement) {
return file.previewElement.classList.add("dz-success"),
$(function(){
setTimeout(function(){
$('.dz-success').fadeOut('slow');
},2500);
});
}
},

It is very simple if you listen complete event in your dropzone options:
const dropZoneOptions = {
url: ...,
// complete event
complete: function(file) {
setTimeout(() => {
this.removeFile(file); // right here after 3 seconds you can clear
}, 3000);
},
}

Another way of clear those thumbnails
Dropzone.prototype.removeThumbnail = function () {
$(".dz-preview").fadeOut('slow');
$(".dz-preview:hidden").remove();
};
then you call it like this:
{your_dropzone}.removeThumbnail();

Related

why my image generated with php is generated once, called by jquery

For a little game, i don't understand why my picture is not refreshed.
When i click on my picture, this changes state to another one and picture is refreshed. But it only works once. When i click another one time, the refresh doesn't work.
I can see the http query in my ssl_access.log of my apache server once. I click and there's not another http query.
For the click capture, i use jquery, and for the generated picture, it's php who's doing the job. I am used to php and script is good. But ... ??
The generated code is :
(html)
<td>
<div id="df6a055">
<img src="getImage.php?id=f6a055" id="if6a055">
</div>
</td>
<td>
<div id="df76601">
<img src="getImage.php?id=f76601" id="if76601">
</div>
</td>
....
(jquery)
$(document).ready(function () {
$('#if6a055').on('click', function () {
$('#df6a055').html('<img src="getImage.php?j=query&id=f6a055&randval='+ Math.random() + '" id="if6a055">');
});
$('#if76601').on('click', function () {
$('#df76601').html('<img src="getImage.php?j=query&id=f76601&randval='+ Math.random() + '" id="if76601">');
});
...
Php objects generated are stored in a php array $_SESSION to be get by all php scripts.
I tried to use a math.random put it wasn't necessary... doesn't work.
What can i change in this jquery query to call a processed picture at the infinite ?
Thanks a lot for your interest :)
The reason for the problem is clear: You attach event handler to an html element that is replaced so handlers get lost.
It's not clear why you replace the entire img element instead of just changing the src property, that would be my take here.
$('#if6a055').on('click', function () {
this.src = 'getImage.php?j=query&id=f6a055&randval='+ Math.random();
});

Trigger <input type="file"> file select with angular programatically

Im using ngImgCrop as can be seen in this JSFiddle.
What I try to achieve is that the image selection box will open automatically when i show(using ng-if) the:
<div ng-if="showImageSelector">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
</div>
that is: i want to programatically open the image selection window, without even showing the user the:
<input type="file" id="fileInput" />
Iv'e tried put in the controller several variations of click event of the input, but none of them worked, so far iv'e tried:
1.
$timeout(function() {
angular.element('#fileInput').triggerHandler('click');
}, 0);
2.
angular.element(document).ready(function () {
angular.element('#fileInput').triggerHandler('click');
});
3.
setTimeout(function(){
angular.element('#fileInput').triggerHandler('click');
}, 1000);
4.
setTimeout(function(){
document.getElementById('fileInput').click();
}, 1000);
For trigger the file selector open programmatically, the answer is yes.
But you need to make sure this event was fired by THE USER.
For example, you have a button there, you attach the click event on it. After the user click this button, inside the event handler, you can trigger by javascript code e.g,document.getElementById('fileInput').click(). This should work.
However, if you want to simply run several lines of javascript code to open a file selector without user's click, that's not possible, because that violate the security policy.
So I added some code to your sample,
html,
<button ng-click='open()'>Open selector</button>
javascript,
$scope.open = function() {
document.getElementById('fileInput').click(); //this work
};
Hope this would solve your problem. : )
Ended up wrapping the ngImgCrop with my directive, in it iv'e placed that:
$timeout(function () {
angular.element(document.querySelector('#fileInput')).click();
$log.debug("poped it");
}, 250);
in the link function.
Aside the real element i show for the img selector, iv'e placed this at my index.html:
<div ng-show="false">
<my-image-select cropped-image="groupDetails.newPic" return-func="groupDetails.imageSelectFinish"></my-image-select>
</div>
and it works.
without the extra invisible my-image-select in index.html, the file chooser only auto open from the second attempt.

dropzone.js form submit not sending file

I'm having some trouble with using Dropzone.js within a standard html form. With the code I have, everything is working as it should, I can click the area to add an image, I can only add one image at a time, and the image is only uploaded when the submit button is pressed.
However, nothing is actually sent when submit is pressed. I know I need to manually process the queue, but this doesn't seem to be working at all. The rest of the form data is sent however, it's only the image which isn't.
I'm using the following simplified code. (Assume that this works other than no file being sent.)
HTML
<form action='upload.php' method="post" class="dropzone" id="mydz">
<input type='submit' name='submitimage' value='Save' style='float:left;'/>
JAVASCRIPT
Dropzone.options.mydz = {
autoProcessQueue: false,
maxFiles: 1,
init: function() {
var submitButton = document.querySelector("#submitimage");
mydz = this; // closure
submitButton.addEventListener("click", function() {
mydz.processQueue(); // Tell Dropzone to process all queued files.
});
this.on('addedfile', function(file){ if(this.files.length > 1) { this.removeFile(this.files[0]); } });
}
}
I've been trying to solve this all day now, and no amount of searching online has revealed anything useful to me. Can any of you help?? :)
Bingo!!! With some help from the author of the github post i linked to earlier, this issue has now been resolved!
The code I posted earlier works as it is, however inside the dropzone.js file, I added these two lines this.hiddenFileInput.setAttribute("name", _this.options.paramName);
$("form.dropzone").append(_this.hiddenFileInput);
after document.body.appendChild(_this.hiddenFileInput); and all is working as it should!

zClip don't work - multiple copy to clipboard JS

I try to make a copy to clipboard button but I don't know why I can't make it.
I load my page with ajax so I call a function to add the zclip to my button when I mouseOver the button. But when I click on it, nothing is happening.
Here are my codes:
JS :
<script type="text/javascript" src="<?php echo JS_DIR?>zclip.min.js"></script>
<script type="text/javascript">
function mouseOver(){
$('.copyMails').each(function (k,n) {
console.log("test");
var copyMails = $(this);
$(this).zclip({
path: '<?php echo JS_DIR?>ZeroClipboard.swf',
copy: function () {
var val = $(copyMails).attr('data-clipboard-text');
return val;
},
afterCopy: function () { console.log($(copyMails).data('clipboard-text') + " was copied to clipboard"); }
});
});
}
</script>
And my button:
<button onmouseover="mouseOver()" data-clipboard-text="<?php echo implode(',', $emails); ?>" class="copyMails" title="Copier les adresses emails">
Copier les adresses emails
</button>
Thanks in advance.
I could not get this to work on my server, I downloaded the ZeroClipboard.swf from zclips website and would not work. I noticed that the swf on zclips website in not the one that they use for their examples. So I created a hyperlink to http://www.steamdev.com/zclip/js/ZeroClipboard.swf and clicked "save link as" compared the size to the one I had downloaded originally and it was bigger. So I put the new one from the link above onto my server and it worked perfectly.
I think if you downloaded the swf from zclips website directly from their download link, this is your problem as it was mine. Try saving my link as a file and then uploading it to your server.
There is an error in your example, at least with what's provided. Trying it in a fiddle prouces your mouseOver function being undefined.
I assume your intent is to copy the data to the clipboard when they click the button, and setup the clipboard when the mouseover event is triggered, correct? If that's the case, your best bet would be to create a single event for this, delegating it to your class of button(s). This way, it's not continuing to configure the clipboard plugin, every time an element is hovered over, for all elements matching your selector.
Here's an example of the code, but I don't believe you can include the SWF path as an external resource within the fiddle so it's not fully functional. So I have put together a version of the code I feel is close. Please give it a try.
JSFiddle: http://jsfiddle.net/adx93ave/3/
$(function () {
$(document).on("mouseover", ".copyMails", function (evt) {
var $btn = $(this);
$btn.zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: $btn.data("clipboard-text"),
afterCopy: function () {
console.log($btn.data('clipboard-text') + " was copied to clipboard");
}
});
});
});

How to show progress dialog when i move from one page to another using jquery mobile?

I am developing an app using jquery mobile..
In that i want to show something like progress dialog from one page to another.
I have tried
$.mobile.showPageLoadingMsg();
but it takes a specific amount of time while showing...
Actually my other page loads few graphs so it takes time...
How can we show progress as soon as the graph loads on the other page?
I think You can make use of the events like pagebeforecreate or pagecreatelike
And placing the $.mobile.showPageLoadingMsg() in proper place in the code can place major thing.
$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
You can go though the follwing like :
http://jquerymobile.com/demos/1.0a3/#docs/api/events.html
Surround it in
$(document).ready(function() { ... }
if you aren't already
If you use AJAX to switch between pages you can do the following:
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
"loadingDiv" is your container with spinner gif image (for example).

Categories

Resources