I want to show a progress bar or spinner when I choose a file for upload, I'm not talking about server upload success, I already got that covered, I want to show a spinner when image is loading right after I click the "Choose file" button from the input file, is that possible?
I'm using Vue.
<label class="modal_input_image fs_normal c_dark" :for="field.id" :style="'background-image:url('+backgroundImage+');'"></label>
<input :id="field.id" type="file">
Check out the input and change events on file inputs - after the value of the file input changes, it should fire those events - try both, see which one suits your needs.
Show the 'loading' indicator when the event first fires, hide the indicator on server upload success!
Related
I'm trying to use Dropzone in my application to enable drag and drop upload. The problem is: I can't upload the file at the time I select a file, I need to wait the user click on 'Submit' on entire form (I don't have a form only to file upload) to upload my file.
And I have another problem, the draggable area (my div) is not in the same place as my input (where I need my uploaded file).
It's something like this:
<form ...>
<input type="file"/>
</form>
<div id="myDivWhereUserWillDropTheFile">
</div>
Is that possible to solve with Dropzone?
It depends on the exact flow you want to achieve, but to disable autoupload take a took at autoProcessQueue and autoQueue options.
http://www.dropzonejs.com/#config-autoProcessQueue
From there you can use a addedfile event handler to programmatically set your input
http://www.dropzonejs.com/#event-addedfile
I am using this image show/hide script
Instead of using a submit button, I want to submit the form by using onchange submit in the file select field. Until here, everything is working fine. However, when I click the cancel button in the (pup-up) file select screen, the loading image won't hide. I have no clue how to solve this, and any suggestions are welcome.
When the user selects files to be uploaded I present one of two buttons to take action on the file(s) based on how many files there are. I get the number of files by including an onchange=getNumFiles(this) in the file input tag.
My problem is that I hide the button to take action on the files after the user clicks it, and if the user selects the same file(s) a second time the button is not "re-presented". This is happening because the file upload input never actually changed because the input is still holding the original file selection. How can I account for this?
Is there a way to clear the contents of the file upload input? I've tried setting the value to null to no avail. Or is there a different event other than onchange that I should be using? hope this makes sense....
"Is there a way to clear the contents of the file upload input"
Yes, call .reset() on the form.
$("#myform")[0].reset();
Now if the same file is selected again it will correctly trigger a change event since it changed from nothing to something again.
I have a file input in my webpage that allows a user to upload images.
I have things set up so that when they select an image, the change event of the file input is triggered and is shows them a preview of their image.
Sometimes once they see the preview they want to tweak the image a bit locally (eg using paint to crop it). They then click save in paint and click the file input and select the file again.
The problem is that when they select the file again, the change event of the input isn't triggered even though the image data has changed and if they try to upload the file to my server the old image data is used.
Is there any way to detect when the user actually selects a file, rather than when the file input change event occurs so that I can nicely deal with the case?
EDIT: Note that I can just delete and recreate a file input each time a user selects an image and this works but it means that the file input says 'no file chosen' which confuses the user.
A simple solution is to do the following:
this.input.addEventListener('click', function() {
this.value = '';
}, false);
This causes the change event to be triggered any time the user selects a file, because the initial click that opens the file browsing popup clears the input.
this.input.bind('click', function() {
this.value = '';
}, false);
instead of deprecated .addEventListener() try .bind()
I write an application with Symfony 2. I have a form which has a file field.
When there is no file chosen the view is a button of "choose file" and on the right of it text 'No file chosen'. When i select a file, the file-name appears on the right of the button.
I would like to change this behaviour:
When no file is chosen, show only the button.
After choosing a file, instead of showing the file-name I would like to generate a preview of the image.
Anyone has a simple solution for this problem?
Thanks!
you can change the css of the input type file to visibility:hidden and display a button there... and you can make a jquery event like this
$(document).ready(function(){
$("#idofbutton").click(function(){
$("#idofinputtypefile").trigger('click');
});
});
and the rest you can use an iframe stimulate the upload event.
for jquery file upload please check the code link this link
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
hope this helps