I've been looking and struggling to find the answer how to attach a default image on "Choose File" using JS/Jquery. My goal is if the user forgot to attach an image, I want to have some image url on default. So that if the user clicks the submit button, that default image will be uploaded instead. I know this is inefficient way to do this, I just want to know how you can manipulate the file that is being uploaded.
<html>
<body>
<input type="file"/>
<input type="submit">
</body>
</html>
You can add an event listener for the submit button, and first check if user selected any file
<input id="get-file" type="file">
<input id="submit-file" type="submit">
<script>
const inputField = document.querySelector('#get-file');
const submitButton = document.querySelector('#submit-file');
submitButton.addEventListener('click', function() {
// This is where you check whether user uploaded a file or not
if (!inputField.value) {
// Operate on the default file if user doesn't provide any
// Make sure you exit the function
return;
}
// User uploaded a file so operate on it here
});
</script>
Related
I am creating a web app in which I want to allow my users to select multiple files,
when my user select multiple files at a time it is working fine but when the user re-select again the previous files disappear,
here is my input field
<input type="file" id="uploadMultipleFiles" multiple />
I want my user to select multiple file and allow them to click multiple time without loosing the previous file selection
here is a JSFiddle for reference,
I can use javascript or jquery if necessary
Hope I explain this question properly
You can get that working using the JavaScript. You have to push the selected file in an array. when the user submit the form, you have to send the files to the server using ajax.
var input = document.getElementById('uploadMultipleFiles');
var btn = document.getElementById('btn');
var allFiles = [];
input.addEventListener('change', function(evnt){
for(var i=0; i<input.files.length; i++){
allFiles.push(input.files[i])
}
})
btn.addEventListener('click', function(evnt){
console.log('Loading Files')
allFiles.forEach( function(file){
console.log(file.name)
})
})
<input type="file" id="uploadMultipleFiles" multiple />
<br><br><br>
<button id="btn">
Console All Files
</button>
This is what I have in HTML:
<img src="images/defaultProfile.jpg" id="image">
<input type="file" name="pic" accept="image/*" id="imgPath">
<input type="submit" onclick="uploadImg()">
The image with an id of "image" automatically loads a default image from a designated directory by default. Then, the user can I pick an image from the file picker. When the user hits the submit button written on the last line, The uploadImg() written on javaScript file will get the image from input and change the image displayed.
But, my question is how I can enable the user to change the image by just picking a image file from the directory without hitting the "submit" button.
You can add a change listener to the image input:
document.querySelector('#imgPath').onchange = () => {
console.log('Now uploading...');
// uploadImg();
};
<input type="file" name="pic" accept="image/*" id="imgPath">
Take a look at this Why can't I do <img src="C:/localfile.jpg">?. If your plan is to display an image before uploading to the server, that is not going to work. What you can do is write an "onchange" event (https://www.w3schools.com/jsref/event_onchange.asp) to your file selection input line (2nd line in your code), and upload it to a temporary directory and display it. As the user clicks on the upload button, you can make the change permanent. If the user cancels, you will display the default profile page.
I am using the dropbox chooser (https://www.dropbox.com/developers/dropins/chooser/js) as part of a form. Once the user has selected a file, I would like to display that file name next to the chooser button.
It would also be nice to include a 'remove' link to clear the selection.
i assume that this will be done using javascript/jquery. Any help would be greatly appreciated.
EDIT: An earlier answer used e.files[0].link.split('/').pop(), but there's a field for this already! It's called name. Updated below.
The file name is one of the things returned, so you can just do this:
var url = e.files[0].link;
var name = e.files[0].name;
As to how to display it on the page, I would suggest adding a span somewhere and setting its text. Try this code, which does that and a couple other nice things (like handle the submit button's disabled state and resetting the Chooser button to its "unused" state):
<form>
<input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" style="visibility: hidden;"/>
<p id="chosen" style="display:none">Chosen file: <span id="filename"></span> (<a id="remove" href="#">remove</a>)</p>
<input type="submit" id="submit" disabled />
</form>
<script>
$(function () {
$('#chooser').on('DbxChooserSuccess', function (e) {
var url = e.originalEvent.files[0].link;
var filename = e.originalEvent.files[0].name;
$('#chosen').show();
$('#filename').text(filename);
$('#submit').prop('disabled', false);
});
$('#remove').click(function (e) {
e.preventDefault();
$('#chosen').hide();
$('.dropbox-chooser').removeClass('dropbox-chooser-used');
$('#submit').prop('disabled', true);
});
});
</script>
EDIT
I should point out that the dropbox-chooser-used class is just something I noticed. Since it's not documented, that may change in a future version of the library. The rest should be fine.
Basically there is an empty box with a submit button directly underneath. The empty box might have a default picture loaded to begin with. When a user clicks the submit button, how can I display a different picture (in place of the default) based on a certain time of the day. I don't really need an answer regarding the checkTime logic, but I would appreciate some help with regards to the submit button being able to change a picture in the same spot. Thanks guys.
if you just have a simple button, you can add an onclick event to it:
Example 1:
<input type="button" onclick="changeImage()" />
and your changeImage() function will have the logic to follow
Example 2:
<input type="button" id="submitButton" value="Button"/>
Javascript -
document.getElementById("submitButton").onclick = function () {
// run the logic
}
images can be switched using the src property
javascript -
document.getElementById("theImage").src = "newImage.jpg";
Since you are talking about a "Submit" button I assume it is within a form. Is submitting the form supposed to have some other effect? If not, use type="button" rather than type="submit". Either way, here is some basic code to get you started:
<img id="thePicture" src="...">
<input type="submit" value="Go" onclick="return changePicture();">
<script>
function changePicture() {
// your logic here to set which picture to use
var newPicture = "yourpath/images/img1.jpg";
document.getElementById("thePicture").src = newPicture;
// return false to stop the form submitting, otherwise
return true;
}
</script>
I have a form which I'm using to upload files. In current situation if a user choose an image from his computer he have to click button upload to upload the image. I'm trying to find a way to skip the step with a button pressing.
How to call a javascript function when the file is selected from user ?
The onchange event is fired when a user specify a file for the upload filed. You could go about something like this:
<input type="file" name="someName" id="uploadID" />
Javascript:
var el = document.getElementById('#uploadID');
el.onchange = function(){
// your code...
};
However, javascript validation is good idea but make sure that you do the actual validation on the server-side :)
Using the example above...
<input type="file" name="someName" id="uploadID" />
JavaScript
document.getElementById('uploadID').addEventListener('change', () => {
//Your code...
});