This question already has an answer here:
How to set File objects and length property at FileList object where the files are also reflected at FormData object?
(1 answer)
Closed 5 years ago.
I'm attempting to make a control where you can both select a file to submit in the form and drop a file into it to do the same thing. I have something like this where it will also show a preview of the file if it's an image:
<div class="preview-image-container">
<input type="file" name="File" id="File" accept="image/*"
class="image-url form-control" style="display:none;" />
<div class="preview-image-dummy"></div><img class="preview-image-url" />
<div class="preview-image-instruction">
<div class="preview-image-btn-browse btn btn-primary">Select file</div>
<p>or drop it here.</p>
</div>
</div>
Here's a fiddle with MCVE.
The user drops the file in the preview-image-container. The file isn't submitted with AJAX, the user needs to submit the form which contain more data.
For security reasons, we aren't allowed to change the value of the input file with JavaScript. However, I know that the default input file support droppable and there's a bunch of websites that let us select files by dropping them in the form so my guess is that there's a way to do it.
As you can see from the MCVE, I am only interested in using jQuery or pure JavaScript without additional libraries.
Although dropzone.js could be used, it doesn't fit in my requirements and it would require a considerate amount of time to customize its look. Moreover, dropzone.js have certain configuration requirements that can't be met within my ASP.NET application.
There's a similar question but does not have a proper answer: How to set file object into input file in the form in HTML?
Also not similar to drag drop images input file and preview before upload because I have already achieved drag-drop and preview action. My question is specific to the problem of having an empty file input when dropping the file in a parent container.
Disclaimer: Correct as of December 2017 and for modern browsers only.
TL;DR: Yes, now you can!
*if you have a dataTransfer or FileList object
Previously, programmatically changing the files input[type=file] field was disabled due to legacy security vulnerabilities, which are fixed on modern browsers.
The last of the major browsers (Firefox), has recently enabled us to set the files for the input file field. According to testing done by W3C, it seems that you can already do this on Google Chrome!
Relevant screenshot and text quoted from MDN:
You can set as well as get the value of HTMLInputElement.files in all modern browsers.
Source and browser compatibility, see MDN
The Firefox bugfix discussion thread has this demo you can test it out on, and here's the source if you want to edit it. For future reference in case this link dies, I will also include it as a runnable snippet below:
let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');
target.addEventListener('dragover', (e) => {
e.preventDefault();
body.classList.add('dragging');
});
target.addEventListener('dragleave', () => {
body.classList.remove('dragging');
});
target.addEventListener('drop', (e) => {
e.preventDefault();
body.classList.remove('dragging');
fileInput.files = e.dataTransfer.files;
});
body {
font-family: Roboto, sans-serif;
}
body.dragging::before {
content: "Drop the file(s) anywhere on this page";
position: fixed;
left: 0; width: 100%;
top: 0; height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
background-color: rgba(255, 255, 0, .3);
pointer-events: none;
}
button, input {
font-family: inherit;
}
a {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Drag and drop files into file input</h1>
<p><small>Supported in WebKit and Blink. To test, drag and drop one or more files from your operating system onto this page.</small></p>
<p>
<input type="file">
</p>
</body>
</html>
Important note:
You can only do this if you have an existing FileList OR dataTransfer object that you are able to set to the input file element (as the setter method DOES NOT accept plain text strings).
For further information, see Kaiido's answer here: How to set File objects and length property at FileList object where the files are also reflected at FormData object?
Now to answer your original question, it should be as simple as this:
document.querySelector('.preview-image-instruction')
.addEventListener('drop', (ev) => {
ev.preventDefault();
document.querySelector('.image-url').files = ev.dataTransfer.files;
});
Related
I am developing a file picker for MMS messages, which accept a limited number of MIME types or extensions.
When I click browse (Mac, Chrome 60 and Chrome Canary 61, Firefox, Safari) my last folder is opened with a system file-picker, where it should gray out non-accepted files.
It happens that my test folder is Downloads, which now has something around 600 files or different types. It is important that folder contains different file types, as on a different folder, which only has .png it's all okay.
File picker (and browser) 'hangs', from first glance. Actually it unhangs after one-two (sic!) minutes with a list of files as described above.
Did anyone encounter this? Ways to fix it?
Only Mac issue.
On Windows 10 did not see the same problem, everything works smoothly.
var accept = ['image/jpeg',
'image/png',
'image/bmp',
'image/gif',
'image/tiff',
'image/svg',
'video/3gpp',
'video/mp4',
'video/mpeg',
'video/msvideo',
'audio/mpeg',
'text/vcard',
'application/zip',
'application/rtf',
'application/gzip'
];
var accepted_extensions = ['.jpg'].concat(accept
.map(function(item) {
return '.' + item.split('\/')[1];
}));
document.querySelector('input.mime')
.accept = accept.join(',');
document.querySelector('input.ext')
.accept = accepted_extensions.join(',');
label {
display: block;
font-size: 16px;
margin-bottom: 10px;
margin-top: 20px;
}
<div>
<label>Accept for MIME types</label>
<input type="file" class="mime" multiple />
</div>
<div>
<label>Accept for extensions</label>
<input type="file" class="ext" multiple />
</div>
<div>
<label>Without Accept property</label>
<input type="file" multiple />
</div>
(Demo: http://jsbin.com/zowixof/edit?js,output)
Performed bisect search on my test folder, and it appeared that all the slowness was caused by one Djvu file.
The related tickets discussions are:
https://sourceforge.net/p/djvu/bugs/278/
https://discussions.apple.com/thread/7789107?start=0&tstart=0 (possibly contains solution, but didn't help me)
How can I extract text data from a text file using javascript? I am making an online dictionary. I can code HTML and CSS well but not javascript.
Word Will be entered in first textbox then search button will be clicked and results will be shown in bottom textbox.
The data in text file is like "apple|a juicy fruit"
(without the quotations"
Now I want the text in search field to check up words before "|" sign and if match is found word/words after "|" will be sent to result field.
How can I do this using javascript?
My HTML code for the project is below:
<html>
<head>
<title>Online Dictionary</title>
<style>
.field{
border: 2px solid black;
}
#result_field{
margin-top: 5px;
width: 247px;
height: 100px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your word here..." name="search_field" id="search_field" class="field">
<input type="button" value="SEARCH" name="btn" id="btn" class="btn"> <br>
<input type="text" placeholder="Meaning here..." name="result_field" id="result_field" class="field">
</body>
</html>
Try using Ajax.
Ajax is what do a request to a file from a server, so with it you can:
Check velocity of user network;
Get content of file.
See this.
I made few simple functions, you can check them here.
To use one of the functions above you can add lines like these:
$GET('file.txt?c=0',function(result){/* Success function */},function(e){/* Error function */});
$GET('dictionary.txt?anyvalue=0',function(text){alert(text);},function(e){/* Error function */});
/* in ahead of the link you will have to include the ?urlvar=value to the function works, */
/* I still didn't leave the function complete */
Note: case you want to request a file from another server then the file has to allow servers to access it (to allow or not allow you can use PHP or htaccess).
As #Stephan Bijzitter said, you can use PHP (or ASP) - there you can result the right meaning of a word easily.
A example is:
if($_GET['word']=="PC"){echo "Meaning";}
switch($_GET['word']){case "Word":echo "A word?";break;}
/* In PHP, $_GET['word'] returns the value of a parameter in page URL called "word" */
Lets say I have a form field and I want to append a span tag to it. Is it possible to do this with jQuery?
I tried this code:
$("input").append("<span>My HTML to append</span>");
Or would I have to use something else to append HTML.
So it would be something like this:
<input><span>My HTML to append</span></input>
But that wouldn't work.
Something like when you add tags to the question on StackOverflow each tag is a block.
Edit: How did StackOverflow do it when adding tags to the question.
input elements cannot have any child elements, so you can't use append on them.
You can set their value by using jQuery's val method.
They won't render HTML in any case, if you set the value to <span>My HTML to append</span>, that's exactly what you'll see in the input.
Re your edit:
So it would be something like this:
<input><span>My HTML to append</span></input>
That's invalid HTML. Again input elements cannot have content, they're "void" elements. This is why you can't use append on them.
Re your comment below:
How did StackOverflow do it when adding tags to the question.
They don't. Instead, there's an input and when you complete a tag in the input, they remove it and put it in a span in front of the input, so you end up with:
<span>
<span class="post-tag">tag</span>
<span class="post-tag">another-tag</span>
</span>
<input type="text">
In any modern browser, right-click the tags input field and choose "Inspect element" to see this live.
Here's an very quick-and-dirty example of doing this (but there are lots of plugins out there for doing it — tagit, select2 [which one of my clients uses and loves], ...): Live Copy
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Tags-Like Input</title>
<style>
.input-wrapper {
border: 1px solid #aaa;
}
.post-tag {
border: 1px solid #00a;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" id="theInput">
</div>
<script>
(function() {
$("#theInput").on("keypress", function(e) {
if (e.which === 32) {
e.preventDefault();
addTag($.trim(this.value));
this.value = "";
}
});
function addTag(tag) {
$('<span class="post-tag"></span>')
.text(tag)
.insertBefore("#theInput");
}
})();
</script>
</body>
</html>
An input element cannot have any child nodes, so no, you can't.
You could set the value (using the .val() method) to a string of HTML if you like.
You could concatenate that string with the existing value.
var $in = $("input");
$in.val(
$in.val() + "<span>My HTML to append</span>"
);
As other's have pointed out input element cannot have a child element.
So in a tagging system the common approach is to use a input element to select a tag once you do that add it to a container element which is placed next to the input element and style it such a way that they look like a single control.
In a very crude way you can use .after()/.before() to do it like
$("input").after("<span>My HTML to append</span>");
But there are already many plugins available to do it, so I would recommend using one of them like select2
I've looked around and it's been hard to find a thread that does what I want it to do. As far as I am concerned, I don't even know if it's possible. What I am looking to do is to retrieve the background image file name (especially if it is a link) when it is click. I have a script that logs all click but the last piece I need is the background-image name (file-path with name would even do) stored in the CSS file. Anyone have an idea or a solution as to how this can be done without using a div or class? Here's what I have right now:
JavaScript & HTML
<script type="text/javascript">
var arrayWithElements = new Array(); //,replaytimer;
document.onclick = clickListener;
function clickListener(e)
{
var clickedElement=(window.event)
? window.event.srcElement
: e.target,
tags=document.getElementsByTagName(clickedElement.tagName);
for(var i=0;i<tags.length;++i)
{
if(tags[i]==clickedElement)
{
if(clickedElement.tagName=="A")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.href,clickedElement.innerText,document.location.href,document.images.href);
}
if(clickedElement.tagName=="IMG")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
}
if(clickedElement.tagName=="DIV")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
}
if(clickedElement.tagName=="CLASS")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
}
}
}
}
</script>
</head>
<a id="1" href="#">trial1</a>
<a id="2" href="http://www.google.com" target="blank">google</a>
<a id="3" href="http://www.google.com">google</a>
<a id="4" href="http://www.google.com" target="_blank"><img id="image" src="untitled.jpg"/></a>
<a id="5" href="trial.html">
<input type="text" id="text-test"/>
<div id="image-link"></div>
CSS:
#image-link {
background-image:url('untitled.jpg');
width: 50px;
height:50px;
border: 1px solid #000000;
}
This is a test file that will be converted for use in the near future. Thanks
On newer browsers, you can use window.getComputedStyle(clickedElement) to find the background image property.
As per your code, just the filename or the path using JQuery in all browsers:
var withId = $("#image-link").css("background-image").split('(')[1].split(')'),
withoutId = $("img").attr("src");
// with id and css file
console.log(withId[0]);
// without id and inline style
console.log(withoutId);
Yes, as Alnitak says, use getComputedStyle, but for compatibility with more browsers check out this other question:
Get element CSS property (width/height) value as it was set (in percent/em/px/etc)
Note: I would love to be able to comment on another user's good answer instead of posting my own that is pretty much the same but with a little additional info. Unfortunately, I cannot because stackoverflow doesn't permit this for a user with less than 50 rep. So I have to post it like this instead.
I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.