file upload drag and drop issue - javascript

I've following HTML
<div class="upload_file" id="dropArea">
<form class="box row center" method="post" action="" enctype="multipart/form-data">
<div class="box_input column center">
<p class="title">BROWSE DATA FILE</p>
<span class="icon-upload_file"></span>
<input class="box_file" type="file" name="data" id="data" />
<label for="data" class="column center">
<p class="title">CHOOSE A FILE</p>
<p class="subtitle">or drag and drop it</p>
</label>
</div>
</form>
</div>
and associated javascript
let dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', function(event){
console.log(event.type); // works
}, false)
dropArea.addEventListener('drop', function(event){
event.preventDefault(); // opens the file in the browser
event.stopPropagation();
}, true);
I'm receiving drag 'over' event for sure, but the problem is with preventDefault, if i drag and drop an image or file, it opens up in the browser. not sure what am I missing in here.
Thanks,

You just need event.preventDefault(); also in dragover function

Related

How do I replace divs on click using jQuery (comment system)?

I want to replace the ".comment" div with the ".edit-form" div on the click of the "edit-comment" button. Things are working, but not exactly the way I want them to. There is one little problem: when I click on any "edit button" of the primary unordered list (inside list item), and then I click on the "edit button" of the secondary unordered list, the ".comment" div of the primary unordered list hides/disappears, but I don't want that to happen, I want it to show and not to be influenced by the "edit-comment" button effect in the secondary list, if at all you understand me. This is my jQuery code:
$(document).ready(function(){
//$(document).on('click' , '.reply' , function(){
$('.reply').click(function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
$('.reply-to-comment').not(closestDiv.find('.reply-to-comment')).css("display", "none");
closestDiv.find('.reply-to-comment').slideToggle(100);
});
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
$('.edit-form').not(closestDivtwo.find('.edit-form')).css('display', 'none');
closestDivtwo.find('.edit-form').slideToggle(100);
//$(this).next('.edit-form').slideToggle(100);
});
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
//$('.comment').not(closestDivtwo.find('.comment')).fadeOut();
//closestDivtwo.find('.comment').css('display','block');
closestDivtwo.find('.comment').toggle();
//$('.comment').not(closestDivtwo.find('.comment')).slideToggle(100);
});
});
Just concentrate on the second and third, let's say, paragraph of this snippet. This is my HTML:
<html>
<head>
<title>Test it!</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>
<ul class="list-of-comments">
<div class="allcomments">
<li class="noofcomments">
<div class="comment-wrap">
<div class="commentator-pic"></div>
<div class="comment">Comments show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit comment</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit comment</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
<!--Here we have the replies to the comment above-->
<ul class="replies">
<li class="clicktoviewreplies">Show/hide replies</li>
<div class="replies-wrap">
<div class="commentator-pic"></div>
<div class="comment">Replies show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit reply</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit reply</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
</ul>
</li>
</div>
</ul>
</div>
</body>
</html>
To make things easier, follow this link: https://jsfiddle.net/hx9mvdjg/8/
This will solve the issue once and for all:
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
if ($(".edit-form").css("display") == "block") {
closestDiv.find('.comment').hide();
$('.comment').not(closestDiv.find('.comment')).css("display","block");
}else{
closestDiv.find('.comment').toggle();
$('.comment').not(closestDiv.find('.comment')).css("display","block");
}
});
Get your whole code and just replace this "paragraph", as you said yourself, with the last one you have in your snippet and paste it in your "jsfiddle" and test it, please. Then, tell me if it's all you need.
Use the replaceWith() in jquery.

Alert on simple Drag and Drop Div area

As like shown in the image I need a very simple alert when the file is dragged in the dotted area I have tried plugins but those are not matching my requirements.
Here is my HTML:
<form id="uploadStudentsForm" class="js-upload-form">
<input type="hidden" name="action" value="uploadStudents"/>
<div class="upload-drop-zone" id="drop-zone">
<div class="upload-wrapper" id="csvFileDiv">
<p>Upload Files</p>
<input type="file" name="files[]" class="inputfile " id="js-upload-files" multiple aria-label="hidden">
<label for="csvFile">drag & drop or click here to add csv file </label>
</div>
</div>
</form>
I want simple js like when files drag and dropped in that div(upload-drop-zone) show alert("file dropped")
I dont know which one to use tried these:
sortable
draggale
you can use the ondrop event handler in the drop zone like below.ondragover is added to override browser's default drag behaviors.
<div class="upload-drop-zone" id="drop-zone" ondrop="drop(event)" ondragover="dragover(event)" >
<div class="upload-wrapper" id="csvFileDiv">
<p>Upload Files</p>
<input type="file" name="files[]" class="inputfile " id="js-upload-files" multiple aria-label="hidden">
<label for="csvFile">drag & drop or click here to add csv file </label>
</div>
</div>
the functions should be like below
function drop(event){
event.preventDefault();
alert("file dropped");
}
function dragover(event){
event.preventDefault();
}
Sample working fiddle here : https://jsfiddle.net/4ZYq3/186/
check this link here
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
You can use jquery change function for that.
$(document).on('change', "#js-upload-files", function(){
alert('file dropped');
});

How not to lose Div focus when inside button is clicked

Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>
you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});

My other forms do not get submitted

So I have created a page to print out a div for every chat in the database and each chat has a form attched to it. When I click on the form, the form gets submitted with the displayed none input and it's value sent to php to do other things. Now the problem is that only the first div's form gets submitted even though the code is the same.The form is right on the div and it is displayed absolute. The two forms are the same but I need both to work and to get to the same php code. Code: HTML
<div class="chaty">
<form method="post" action="index.php" name="chat_lox" id="chat_loc">
<input type="text" name="chat_locy"
value="5e2dbe2be3b5927c588509edb1c46f7d">
</form>
<div class="chatDesc" id="84281145">
<div class="tit">Creator: </div>
<div class="iriss"><i id="close_chatn" onclick="closeChat(84281145)"
class="material-icons">close</i></div>
<form action="mypage.php" method="post">
<div class="authr_name"><button value="John Brown" name="userlink"
class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">jaames</div>
</div>
<span onclick="openChat(84281145)">☰</span>
<div class="chatname"><h3>james</h3></div>
<div class="chatback"></div>
<div class="underlie"><p>Users: 1</p><p> Created: 2017/07/28 07:09:40pm</p>
</div>
</div>
<!-- one that doesn't work -->
<div class="chaty">
<form method="post" action="index.php" name="chat_lox" id="chat_loc">
<input type="text" name="chat_locy"
value="9503e253936e716f18d9c57b4f97d618">
</form>
<div class="chatDesc" id="6179276">
<div class="tit">Creator: </div>
<div class="iriss"><i id="close_chatn" onclick="closeChat(6179276)"
class="material-icons">close</i></div>
<form action="mypage.php" method="post">
<div class="authr_name"><button value="Hitsuji" name="userlink"
class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">The Army of JOhn</div>
</div>
<span onclick="openChat(6179276)">☰</span>
<div class="chatname"><h3>John Army</h3></div>
<div class="chatback"></div>
<div class="underlie"><p>Users: 2</p><p> Created: 2017/07/23 11:31:06am</p>
</div>
</div>
JS
$("#chat_loc").on("click",function() {
$(this).submit();
alert("submitted");
});
PHP
if(isset($_POST['chat_locy']) ? $_POST['chat_locy'] : null){echo "it
worked";}
You can only submit only one form at a time. Try changing the id to a class such that all forms have same class like 'chat_loc'.
For example, change the JavaScript to this:
$(".chat_loc").on("submit", function() {
$(this).submit();
alert("submitted");
});

Appending to div and being unable to bind the added buttons

I have a php function that echos code of a form that has a button. when that button is click it will append a file field and a another button that if clicked would repeat the above. however when the added button is clicked nothing happened.
I am thinking it has something to do with binding the button.
Here is the code:
$formtoreturn = '
<div class="form_holder">
<form action="'.site_url().'xxxxx" method="post" enctype="multipart/form-data" >
<div id="fields_holder">
<span class="form_holder-label" id="fileC">Select image or images</span>
<div class="fields" id="field1">
<input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input">
<a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a>
</div>
</div>
<div class="clear"></div>
<input type="hidden" value="'.$u_id.'" name="user_id" id="user_id">
<input type="submit" name="submittestimonial" value="Submit Testimonial">
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>
<script>
var filecount = 1;
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(\'#fields_holder\').on(\'click\', \'.add_file\', function() {
var toappend = \'<div class="fields" id="field1"><input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input"><a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a></div>\';
if($j(this).attr("rel") == "add"){
$j(this).attr("rel", "ded");
$j("#fields_holder").append(toappend);
filecount++;
}
});
});
</script>
';
echo $formtoreturn;
Hope the code and my question is clear.
Thanks in advanced.
I would suggest you to change your JavaScript code from
$j('#fields_holder').on('click', '.add_file', function() {
// ...
});
to
$j(document).on('click', '#fields_holder .add_file', function() {
// ...
});
Then the event will bubble up and handled in click handler of a document.
UPDATE
Though I've made a test and it's working well for me in both variants.

Categories

Resources