I have a dropzone in my project and I need to delete files from a folder when clicked on the remove button. I create the dropzones with this:
$('.dropzone').dropzone(
{
init: function ()
{
this.on("removedfile", function (file)
{
console.log($(file.previewTemplate));
console.log(file.previewTemplate.children[7].value);
//$.post("delete-file.php?id=" + file.serverId); // Send the file id along
});
}
});
My dropzone HTML is:
<div class="dropzone" style="width: 500px; height: 500px;" data-uploadPath="the/path/here/" data-multipleUpload="true"></div>
Now, the file parameter contains the previewTemplate of the file. I want to get the/path/here/ by the parents, but if I use:
file.previewTemplate.parentNode
It returns undefined, why doesn't parentNode work?
If you override removedFile function, then need to manually remove preview of image. Dropzone will not automatically remove file preview.
removedfile: function (file) {
file.previewElement.remove();
}
Alright, I faced a similar problem, and based on the comments on your question, I figured out the solution.
The arguments are of no use, but the context 'this' is.
this.element returns the respective dropzone element. In my case, I needed to find the enclosing form element. Hence, all I needed to do was
var $form = $(this.element).closest('form');
Related
I am implementing a jQueryFileTree (http://www.abeautifulsite.net/jquery-file-tree/) as a file browser and would like each file or directory the user clicks on to stay highlighted. I know this can be done using simple JavaScript or CSS, but I don't understand the source code well enough to know how or where to implement the highlighting. Can anyone point me in the right direction?
Well, you can capture a click using the click handler and add a class using addClass.
$('.thing-i-will-click-on').click(function() {
$(this).addClass('selected');
});
You can also remove a class using a similar method.
$('.selected').removeClass('selected');
Combining these two things should give you the desired result.
So after a little tinkering I got it to work!
First you have to go into the jqueryFileTree.js and modify line 80 from this:
h($(this).attr('rel'));
to:
h($(this));
This will return the object that is clicked on instead of the file name. To get the file name within the function(file) within the definition of the .fileTree you'll have to use:
file.attr('rel');
Now you have the object and you can use this in the function(file) to highlight you code. (selected is a CSS class I created that changes the background color)
$(".selected").removeClass('selected');
file.addClass('selected');
$('#your_filelist_id').fileTree({
root: '/',
script: '/connectors/jqueryFileTree.php'
}, function(file) {
var flist = $('#your_filelist_id a[rel="' + file + '"]');
if(flist.hasClass('selected')) {
flist.removeClass('selected');
}
else {
flist.addClass('selected');
}
});
Trying to get Zeroclipboard.js to work in a Meteor app following an example here: http://www.thewebflash.com/2014/10/copy-to-clipboard-cross-browser-using.html.
I have the latest ZeroClipboard.js and ZeroClipboard.swf in the Client folder.
Within my template I have:
<template name="listPage">
<!-- some other markups -->
<input type="text" id="input1" />
<button type="button" id="btn-copy1" class="btn-copy">Copy to Clipboard</button>
<span class="span-message"></span>
</template>
Pair with event:
Template.listPage.events({
'click .btn-copy': function(e) {
e.preventDefault();
var client = new ZeroClipboard($('.btn-copy'));
client.on('ready', function(event) {
client.on('copy', function(event) {
// `this` === `client`
// `event.target` === the element that was clicked
// Get the text content of <input> or <textarea> that comes immediately before the clicked button
var $prevEle = $(event.target).prev();
var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();
// If value of `text` is not empty, set the data to clipboard
if (text) {
event.clipboardData.setData('text/plain', text);
}
});
client.on('aftercopy', function(event) {
// Check if copied text is not empty
if (event.data["text/plain"]) {
// Call something on successful copying
$(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
}
});
});
client.on('error', function(event) {
ZeroClipboard.destroy();
});
}
});
I've also tried the simple example on https://github.com/zeroclipboard/zeroclipboard
Not sure what I'm doing incorrectly. Help is greatly appreciated.
probably you have put zeroclipboard.swf in wrong place.
inspect in browser "copy button". if new ZeroClipboard($('.btn-copy')) worked ok - you ll see something like this.
<object id="global-zeroclipboard-flash-bridge"
name="global-zeroclipboard-flash-bridge"
type="application/x-shockwave-flash"
data="http://localhost:3000/client/lib/ZeroClipboard.swf?noCache=1432275841705"
height="100%" width="100%">.........</object>
note path to ZeroClipboard.swf. in my case it is /client/lib/ZeroClipboard.swf - that is, i've put ZeroClipboard.min.js to /client/lib - and it tries to search swf at same path.
this means you have to put .swf into /public folder of your meteor project, and create subfolders there that match that path. i believe there is an option when creating new ZeroClipboard instance to set this path explicitly - but .swf has to reside in /public folder. while it is in /client folder - it s not available.
also, are you sure it will work with class selector (new ZeroClipboard($('.btn-copy')))? id selector (#) returns single item, class selector returns an array..
In my Rails 3.2 app I am using Filepicker through the filepicker-rails gem to allow users to upload a profile photo on the signup form. In the f.filepicker_field I am using the onchange option to call an onImageUpload() function that gets information about the newly uploaded image from the automatically-generated event.fpfile and disables the Filepicker browse button:
function onImageUpload() {
file = event.fpfile
img = $("<img>").prop("src", file.url).css({
width: '160px',
height: '160px',
});
$("#profile_photo_preview").append(img);
$(".filepicker-button").toggleClass("disabled");
};
I read about the event.fpfile at the Filepicker docs section on Widgets. In the form I also have a link that, when clicked, removes the recently updated image from the DOM and re-enables the Filepicker button:
:javascript
$(document).ready(function() {
$("#picture-remover").click(function() {
$("#profile_photo_preview").html("");
if ( $(".filepicker-button").hasClass("disabled") ) {
$(".filepicker-button").toggleClass("disabled");
};
});
});
...
...
= link_to "Remove Picture", id: "picture-remover"
This all seems to work pretty well. The only problem is that if a user removes the first picture and then uses the Filepicker browser to upload another, the original picture is still being saved in my Filepicker account.
I'd like to have my "Remove Picture" link remove the picture not only from the DOM, but also from my Filepicker account altogether. The Filepicker docs have a section on removing/deleting files here but I don't really understand the example code or how to implement it for myself. I'm particularly confused about the relationship between the InkBlob that is mentioned for removing a file and the event.fpfile object that I'm using to display a thumbnail preview.
So far I've tried adding the following line to my "Remove Picture" link but nothing happens:
:javascript
$(document).ready(function() {
$("#picture-remover").click(function() {
$("#profile_photo_preview").html("");
if ( $(".filepicker-button").hasClass("disabled") ) {
$(".filepicker-button").toggleClass("disabled");
};
filepicker.remove(InkBlob); #added this line
});
});
Many thanks to anyone who can point me in the right direction!
InkBlob and event.fpfile objects have the same role and the same attributes.
In your example you can pass event.fpfile object to remove function.
var file = event.fpfile;
filepicker.remove(
file,
function(){
console.log("Removed");
}
);
Generally to remove filepicker file you only need it's url.
So this code also works fine:
var someObject = {url: 'https://www.filepicker.io/api/file/xaXphhT9R0GB1tPYUQAr'};
filepicker.remove(
someObject,
function(){
console.log("Removed");
}
);
I am currently working on some small helper utility. The approach is an in-page web app which is typically loaded from the local file system. That all works. Inside that app I need to be able to load and process local files (storing and reloading a profile). That works so far, but I have a problem left where I would like to ask for help:
I am using the filereader.js wrapper around the html5 file reader API. Things work so far, I am able to select, read and process a file in-page. Great! I even can process several files one after another. However there is one problem where I don't know how to start debugging it: I can not read a specific file a second time. I can select it, sure, but it is not read, thus not processed. It looks like there are no events generated at all by the file reader API. This might be connected to either caching or the prior usage of the file not having been terminated by me correctly, I have no idea.
Here is the relevant code:
My FileReader JS function:
function FileReader( selector, options ) {
var options = $.extend({
clicked: function(){},
payload: function(){},
selected: function(){}
}, options||{} );
var widget = convert( selector );
var selector = widget.find( 'input:file');
function clicked( event ) {
event.stopPropagation();
// highlight button as user feedback
highlight();
// raise the file selection dialog
selector.click();
// signal action to element
options.clicked();
}
function convert( selector ) {
var widget = $( selector );
// create new content for widget
var hotspot = $( '<a class="hotspot">' + widget.html() + '</a>' ).bind( 'click', clicked );
var selector = $( '<input type="file" style="display:none;" />' );
// replace initial content of widget
widget.empty().append( $('<form />').append(selector).append(hotspot) );
widget.find( 'input:file' ).fileReaderJS( { accept: false,
readAsDefault: 'BinaryString',
on: { load: selected } } );
return widget;
}
function highlight() {
// flash button by changing the background color for 100 msecs
widget.css( 'background-color', 'whitesmoke' );
setTimeout( function(){ widget.css( 'background-color', 'transparent' ); }, 100 );
}
function selected( event, file ) {
// process payload
options.payload( event.target.result );
// signal event to controlling element
options.selected();
}
return {}
} // FileReader
This method is called with '#wProfileImport' as value of the argument selector, which actually works and converts the markup below
<span id="wProfileImport" class="control button">
<img src="assets/img/profile-import.png">
</span>
such that it contains a (hidden) file input tag which is used to fire the file selection dialog (which works fine):
<span id="wProfileImport" class="control button">
<form>
<input type="file" style="display:none">
</form>
<a class="hotspot">
<img src="assets/img/profile-import.png">
</a>
</span>
Now when clicking the image the file selector is fired, I can select a local file and its content is handed over to the options.payload callback. As said all fine and working also for more than a single file one after another. The only problem that remains: being able to read in the same file again. No event is fired, no content read, nothing.
So my question is: what do I have to do the process a file a second time, if it is selected by the user?
This has to do with how the onchange event works in JavaScript.
If you have a text input and you type a word, let's say "bird". You unfocus the field, this will cause the onchange event to trigger. If you then go back into the field and change the word, then without unfocussing change it back to "bird" and then unfocus the onchange event will not fire because the value didn't change.
Other events like onkeydown and onfocus will fire however.
See if you can find another event that you can use. Maybe onclick or onfocus. I do fear that these fire too early.
A workaround to to destroy the input once you read the file and render a new one in it's place. This way if the user selects the same file it will count as an onchange again.
Another possibility is to not use the onchange event but do the process once you press a submit button. You can get a reference to the file with:
var file = document.getElementById("#the_file_input").files[0];
I would like to present images to my users, where they can select them. I need them to select a limited number, say 5, so:
The images are shown in a matrix, and the user can click them.
I thought:
function boom()
{
this.css('background-color','#fff');
this.data('clicked','yes');
// I should also make checks here to see how many were clicked already
}
$('img').click(boom);
// I thought this would connect all img's that were clicked upon to this function, where I can call the 'this' with the css function...
But it doesn't work as I thought it would...
Any help would do, thanks !
$(function(){
var clicked_img = 0;
$('img').click(function(){
$(this).css('background-color','#fff').data('clicked','yes');
clicked_img++;
});
});
EDIT: UPDATED CODE BELOW FOR NEW REQUEST, FOUND IN COMMENT THREAD:
Per your updated code request, if your HTML is this:
<img id="one" class="clicked" src="img/one.png" />
<img id="two" class="clicked" src="img/two.png" />
This JQuery has been fixed to work for you:
$('img.clicked').click(function(){
boom(this);
});
function boom(e) {
if($(e).data('clicked')=='yes') {
$(e).data('clicked','no').css('border','none');
}
else {
$(e).data('clicked','yes').css('border','3px solid #cccccc');
}
}
Working demo of the new code: http://jsfiddle.net/Vwye8/
Try assigning a variable to an annonymous function
var boom = function()
{
this.css('background-color','#fff');
this.data('clicked','yes');
// I should also make checks here to see how many were clicked already
}
and then calling the $('img').live("click",boom);
js fiddle here: http://jsfiddle.net/t7u6t/