How to automatically start upload after browse? - javascript

is there a way to automatically call a function using an event after the user has browsed a file using a
<input type="file">
I've been trying to find something for the past hour but failed horribly, I saw that I should try onchange but that also failed..

There is a way:
<input type="file" onchange="myFunction()">
The onchange is simple. So, I'm guessing that the code that is getting triggered is failing. You need to be able to retrieve the file from the INPUT object. To pass the file as an argument on the function call, you can use something like this:
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.parentNode)" >
</form>
If you do it that way, the arg passed with be an object from the FORM, then you need to get the object of the INPUT that is inside of the FORM object.
If you want to avoid that, you can use something like this:
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
That passes the first file from the INPUT object to the picUpload function.

Related

Displaying images from file inputs in Javascript

I need to run a function when someone has finished selecting a file using the file input service. By "file input service", I mean:
<input type="file" name = "foo" id="foo">
I have tried to do this in various ways, first by creating a form to do so and using other techniques, but nothing seems to work. There are several ways to detect if the thing has something, like by using:
document.getElementById("foo").files[0]
This only returns a value if you run it, but I cannot constantly compile a while statement to do this.
Pure Javascript
You can use pure javascript like below. This code basically uses document.getElementById() to get the input element, and .addEventListener() and change to do something when the input field is changed.
document.getElementById("foo").addEventListener("change", function() {
console.log("Changed");
});
<input type="file" name="foo" id="foo">
jQuery
Use jQuery .change(). Basically, this code will console.log "Changed" when the input changes (you add a file).
$("#foo").change(function() {
console.log("Changed");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="foo" id="foo">

VueJS can multiple elements call the same method

I have a form with dynamic elements, so sometimes it might be 5 file upload elements and sometimes only 1.
But I was wondering if its OK to let multiple elements use the same method on vue?
Eg:
<input type="file" #change="processImage(row.id)" name="img_1"class="img_upload_1">
<input type="file" #change="processImage(row.id)" name="img_2"class="img_upload_2">
<input type="file" #change="processImage(row.id)" name="img_3"class="img_upload_3">
Then in my vueJS file the method looks like this:
processImage(index) {
var rowIndex = this.rows.map(item => item.id).indexOf(index);
this.rows[rowIndex].img = $('.img_upload_' + index)[0].files[0];
},
Everything works fine, I just wanted to ask in case there is some different way that is considered best practise.
Thanks
It's OK to call the same method from multiple elements. In my experience it happens inside v-for loop mostly.
I don't have enough info about your case, but you can consider using HTML5 input, which allows you to upload multiple files:
<input type="file" name="img" multiple>

Error when using v-model on file input

I have a file input and I need to clear it after file is uploaded. I tried setting null value to v-model, but it generated the following error
File inputs are read only. Use a v-on:change listener instead.
My code is
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
How can I clear the file input in vue.js after upload so that I can upload the same file multiple times continuously
Solved it using the ref attribute,
this.$refs.fileInput.value = null;
You are using v-on:change="uploadFile" and guessing that your uploadFile has a success callback.
You can do the following:
Wrap your input in a form and add a ref attribute to your form:
<form ref="myFileInputForm">
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
</form>
In your successful callback uploadFile do this:
this.$refs.myFileInputForm.reset();
File inputs are read only.
don't bind on element, remove v-model="file"

Access HTML form submitted value from a different javascript file?

EDIT: Rephrased the question so that it is less ambiguous.
I have two HTML files, x.html and y.html, and I have two javascript files, x.js and y.js. I have a form in x.html like so:
<form action="y.html">
<input type="text" value="Blank." />
<br />
<input type="submit" />
</form>
Note that x.html and x.js work together, and y.html and y.js work together.
I want to access the value that a user submits into this form from y.js. How do I do this?
Thank you!
You can use window.sessionStorage or window.localStorage to keep String data across page loads on the same origin.
In x', where formElement is a reference to the <form> and textElement is the <input> or <textarea> reference, set up an event handler using node.addEventListener(event_type, handler) for when the <form> is submitted
formElement.addEventListener('submit', function (e) {
window.sessionStorage.setItem('foobar', textElement.value);
});
In y' you can then access
var foobar = window.sessionStorage.getItem('foobar');
if (foobar === null) console.warn('nothing got set on x :(');
So, below is the source of a.html, use get method to send the data to b.html, and after redirect, the data of the form will be available in the query string like /b.html?ta=sfsdfsdfsdfs
<form action="b.html" method="get">
<textarea name="ta" id="" cols="30" rows="10"></textarea>
<input type="submit" value="Submit" id="subBtn">
</form>
You could use any the query string, or GET parameters to do so.
In the form on page x you can use define method as GET and when this form is submitted it will be directed to an address which includes your variable and parameter passed by the user. Now in page y you can just use window.location.search value and use the variable.
Also, you can make use of cookies and do the same.
If possible describe your problem in more detail so that one could post a relevant solution.

What is Best way to obtain filename for HTML FILE Uploading on forms?

I need to obtain the String for the file that is being uploaded from forms to store in the database.
I am using the usual form input file element
input type="file" name="some_name"
I found a couple JS scripts that allow me to do useless things like display the string in a dialog box, etc.
I need this as an element on the request object or as a hidden field on my page when the form is posted.
You should be able to do something like this:
<form method="POST">
<input type="file" name="some_name"
onchange="document.getElementById('hidden_file').value = this.value;" />
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
I believe that will work in all browsers if you simply want to store the filename, and not the full path.
You won't get a very useful value. Some browsers will only give you the final name part of the file path, while IE will give you a path with a bogus directory name.
I think that the "safe" fragment of the file name should already be passed in to you as part of the part header in the multipart post body.

Categories