I have a form on a page in SquareSpace that allows an image file to be uploaded:-
https://www.colourourstory.com/uploads (try with dummy data if needed).
I need to add the filename of the uploaded image to a hidden field named "SQF_FILENAME" which already exists.
Any tips on how do I do this please as the value is only available after a successful upload?
Thanks
Jonathan
I can suggest using some jQuery.
For example, you can hook a function to the change event of the input[type="file"] and grab its value. Then all you need to do is set the value to your hidden field.
Here is a short code example:
$('.form-block').on('change', 'input[type="file"]', function() {
console.log($(this));
console.log($(this).val());
const fileName = $(this).val().split('C:\\fakepath\\').pop();
$('input[name="SQF_FILENAME"]').val(fileName);
});
Hope this helps.
Cheers.
Related
I have an html file uploaded into php and I try to change data between span (id= UserName) so I added javascript code into my html
$('.tdC').on('click',function(){
$('#UserName').html("myName");
}
When I try to click on my .tdC element, the name of user changes for few seconds and then it turns back to the old value.
Any idea how to preserve the new value ?
Regards.
I Have this code:
<script>
var loadFile = function(event) {
var output = document.getElementById('imagePreviewer');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
That is taking the input from a file upload field and inserts the file path to the src attribute of an image element with the "imagePreviewer" id.
The Problem is: When the page loads it changes the src of the image to "null". I need to make this function work only when the user uploads the file...
Now I tried different ways and couldn't got it working so I would really appreciate some help with that!
Depends on what do you what the user to see while he didn't choose an image. I see 2 ways:
If you want to show an empty box, you may show a css-styled div element with some background, or simply no-image-selected-picture (like http://allensguide.com/img/no_image_selected.gif), and change the src when the user selects an image.
You may not to show the preview box at all until the user selects an image.
I have added a form to my HTML file. And it works fine. When I try to submit the required field should be filled in. The next step is the following: I want an image link in my input fields for adding a profile image from source. I also let this work as well.
I also built a constraint which check if the image is valid. If it isn't valid it shows only a placeholder image.
I've used this small function for that:
prevAvatar.onerror = function () { this.src = "images/placeholder.jpg"; };
The next step is to display a message to the user to show that his given image is not a image.
I was wondering if it is possible to write some code that shows the same error as an empty field does for HTML5 REQUIRED fields.
Does anyone have a smart solution for this?
Thanks in advance!
I have an input file with hidden visibility :
<input type="file" id="fileupload" name="upload" style="visibility: hidden;" />
But I want to use it, without showing it. I will trigger the event through a-tag(hyperlink).
There I have:
//that's fine, open file dialog
document.getElementById('fileupload').click();
//can not take the value of file chosen?
var x = document.getElementById('fileupload').value;
console.log(x);
So how can I take the chosen file without displaying the input ? Is this possible?
You only want to display the filename when someone adds a file?
You could add an eventListener to your file to retrieve the filename:
document.getElementById('fileupload').onchange = function(e) {
console.log(e.target.value);
}
But to upload a file you can just add this hidden file field to a form and submit it.
The first question in my mind is why dont you use jQuery, as its easier.
Second, the input will not actually hold the file per se, but a reference to it. The file will be sent via post (or get) and manipulated server side. Maybe I don't understand correctly what you're trying to do.
I am trying to create a form where I can upload demographic information such as name, etc. as well as upload jpg image files. I cannot figure out how to catch the file the user chooses from the browse button. Where is the file name stored? How can I access it for the upload? How can I access it to assign it as a variable eg:
var theFileName;
function()
if (filename !=null) { //manipulate the variable };
else { //something else};
I am new to JavaScript and trying to teach myself with web sources and books and cannot seem to find an answer. In addition to an answer to this question, can anyone suggest a good web source for further information on this subject? The ultimate goal is to be able to upload the info and files with PHP into a database so it can be recalled on another page but a different user.
http://jsfiddle.net/EDfsh/
if you look into this fiddle i've made, you have the code you need ;)
It uses jQuery.
Your HTML Input
<input type="file" id="pic" >
JavaSCript:
function fileName(test){
var source=test.value;
alert(source);
}
$(function(){
$('#pic').bind('change',function(){
fileName(this);
});
});
But you cannot see the source of the file. And you don't have the rights to see the whole path. So you just get the file name.