I am using
https://github.com/Rovak/InlineAttachment
I currently have it all setup so I can drag and drop images to my textarea and they upload straight to imgur, from following this tutorial:
http://wilfreddenton.com/posts/drag-and-drop-photo-uploads-to-imgur
what I'm trying to do is add an input so if the user doesnt want to drag and drop, they can simply browse their pc and upload files, and have them go straight into the textarea upon selection. (just how github comments work)
I just cant seem to get the input to insert into the textarea.
Here's a live example: http://codepen.io/DrCustUmz/pen/KzZOeP
or if your logged into github you can see the end goal what im trying to do: https://github.com/wilfreddenton/dynamic-scss/issues/new
dont actually submit but click "selecting them" below the textarea, pic a few images, and watch the textarea after you click open.
the input selection is not working in this example. How can I get it so I open the choose files, select a few images, then when I select "open" on the browse my pc popup, they are directly inserted into the textarea, just like i drag and dropped them.
Most of the writting work is done in background so I had to rewrite the writting to textarea. Sorry I mostly use pure javascript so I didn't use any fancy jquery features.
This is where the magic happens. The upload can handle only one file at a time so I had to use loop for all of them. I recommend you take a look at the whole code.
document.getElementById("inputFile").addEventListener("change", function() {
var object = this;
var editor = document.getElementById("editor");
for(var i=0;i<this.files.length;i++) {
editor.value += "uploading...";
uploadHandler.customUploadHandler(this.files[i], function(result) {
editor.value = editor.value.replace("uploading...",result.filename);
});
}
});
Whole code on CodePen
You can simply attach the eventListener upon file is selected via choose files option. You just have to trigger the upload in callback. Assume that you've given id of the input type file as "fileUpload"
document.getElementById('fileUpload').addEventListener('change', function () {
console.log(this.files);
/*trigger the upload here, like you're doing in drag and drop*/
});
Related
I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");
I am using a tool called TamperMonkey to modify a webpage for my personal convenience. TamperMonkey lets you modify the client-side HTML etc. by appending JavaScript to the page after it loads.
The webpage has a file chooser, but it doesn't let you drag-and-drop a file. I use this webpage a lot so having drag-and-drop functionality would really help.
This page has a form with a file input type. I've been reading, and there's no way to modify a file input type for security reasons. But, using TamperMonkey, I could change the input type of the file chooser to "hidden," then set the hidden input value to the file contents that I drop on the webpage, right? It's my understanding that the server couldn't tell the difference (if the name attribute is the same).
I don't know how to set the hidden input type to the same data the file chooser would have:
I've got my file here: const file = e.originalEvent.dataTransfer.files[0];
I've got my hidden input type by doing this: const hiddenField = $("iframe").contents().find(".file-input").attr('type','hidden')
I just don't know how to take file and set it on hiddenField. Should this value be base64 encoded? A blob? Regardless, what code would set the data correctly?
The form it's wrapped in looks like this:
<form ... method="post" enctype="multipart/form-data">
Important context for alternative suggestions: this file chooser input isn't on the page at all until you click a button. Then it shows up in an iframe.
I am using firefox.
It is possible to modify a file input type with Tampermonkey.
If you are not able to add drag and drop support to the input itself straight away, you can implement drag and drop using another dom element and use them as below.
const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
dT.items.add(new File([dataURItoBlob(image)], '1.jpg', { type: 'image/jpeg' }));
dT.items.add(new File([dataURItoBlob(image2)], '2.jpg', { type: 'image/jpeg' }));
// then ...
// $("iframe").contents().find(".file-input").get(0).files = dT.files;
That snippet of code was tested working, in a similar setting where a file input was being attached to the page dynamically after clicking a button. The images were drag n dropped onto the page using a different div.
I am trying to add a div link where users can drag and drop files. It works well on every files, but when I drop a Linked (.lnk) file, it takes the lnk file instead of the real one behind the link.
my code
$("html").on("drop", "#mydiv", function(event) {
...
data.append("file-0", event.originalEvent.dataTransfer.files[0]);
//then sending data object via ajax
...
});
is there a way to get the real file on drop ?
Thanks by advance
I have some problems with Javascript and calling 'function in function'.
I have this code:
Sorry about pastebin.com/tKVNmGLJ , again problems with pasting a code.
And i need to call first function in second one, but only cut of that code:
$('#delete-confirmation-modal-document').on('show.bs.modal', function(e) {
var invoker = $(e.relatedTarget);
$('button.confirm', this).off('click').on('click', function(){
$.get(invoker.data('href'), function(resp){
invoker.parents('.thumbnail').parent('div').remove();
$('#delete-confirmation-modal-document').modal('hide');
});
});
});
cause there is no button to confirm.
Edit:
Sorry for less information!
I have drop box, for uploading a file. When you upload file you see the file in that drop box and down bellow drop box, but when you refresh page you don't have this file in that drop box (what is correct). But problem is, if you upload file and you have uploaded mistaken file you have button 'Remove' (talking about drop box), so you remove the file and it's gone from box, but it's not removed down bellow drop box (it is removed but I have to refresh page to see that changes).
So the first function is removing that file from down bellow drop box, let's call it 'other box' for example, if it's already uploaded and when you click 'Remove' from that other box, you have modal to confirm that changes to remove file, and it's removed correctly. Second remove function is removing file only from drop box, but I need to remove it from other box too. So i need somehow to call that function and to remove that added file. I tried to paste that cut of code in second code but it's not working, I know why but not sure how to write that.
$('button.confirm') probably should be $('button#confirm')
... with the HTML, this is just a guess - because it's not reproducible.
I want to create a preview function for posts that allows people to view the output of what they enter into a textarea how it would appear once submitted. The forum uses bbcode and does not allow html in posts and the id of the textarea box is "message"
Can anyone help me create a popup that would preview this post in a popup window without passing any of its data to a database and back?
I should really have supplied more info, I realise... Basically we have a post form in the form of
<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>
with a submit button
<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">
When it's clicked, the form gets sent to another page, from where it's inserted into the database. I would like there to be a preview button like the one on livejournal, where a new popup gets created and shows what the post would look like. I looked at the source code on livejournal and it supplied jQuery, so I tried the code given here: http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx
However, this did not work, as nothing showed up and also I wasn't fond of the live preview idea.
I also tried a javascript code from here: http://www.codingforums.com/showthread.php?t=174810, but once again, it didn't come up with anything...
I hope that's good info, if I should include anything else, please let me know :)
This question is getting close to "write my code for me", but if you're just trying to get help with the best approach, here are a few:
The cleanest would be have a button that (via javascript) changes the action and target of the form and triggers a submit()... this would send all the data via post to a template page which can pick up the $_POST data and place it into a template that mimics the live template.
Alternately, you could have JavaScript/Jquery grab all the field values, and build the HTML template in javascript and then pass this into div on the page that has been styles to look (a) like a pop-up and (b) has css that mimics the live page.
There are lots of ways to do this, but those would both work. If you try something and get into a tight spot, let us know and we'll give you a hand.
You would want to bind a keyup event to the textarea. Every time a user releases a key it would fire the function. Then your function grabs the value of the textarea and parses it for the BBCode, which I'm not familiar with. It then would take that output and place it as the contents of any element.
HTML:
<textarea id="myText"></textarea>
<div id="preview"></div>
JavaScript (jQuery):
$(document).ready(function() {
var $textarea = $('#myText'),
$preview = $('#preview');
$textarea.on('keyup', function() {
var $this = $(this),
output = $this.val();
// Do something with the value of the code to parse out the BBCode stuff.
$preview.html(output);
});
});
Why don't you try a WYSIWYG editor like TinyCME, or CKEditor?