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
Related
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!
User click the uploader several times to upload multiple files(for example, a.txt, b.txt, c.txt), but server can only receive the last file(c.txt). Is there anything else needed to implement multiple files uploader?
<form action="storeArticle" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple >
<input type="submit" name="submit" class="submit" id="submit" value="submit" />
</form>
==========
What I want to implement is like https://stackoverflow.com/questions/ask. User can click the image icon as many times as they want, and finally all the images will be sent to server conrrectly.
When you say they click the uploader several times, do you mean having to open the file explorer each time to add one file? If so, then this will cause it to lose the other files that were previously selected.
The way to fix this is for your users to ctrl/cmd+click each file they want while only opening the file explorer once.
File inputs even remove the selected file when you open a file explorer and then press cancel.
EDIT
Just a thought, I'm on a phone so I can't test this but maybe you can play around with it...
have an input field that will be there from start to finish. When they select their first file, make the button (best to use a <label>) they click no longer open that file input. Instead, append a dynamic file input and make the label's for attribute equal to the dynamically added file input. After you add the dynamic input, create a listener for it so when the user selects a file in that new input it is appended to the original input.files array. Once this happens the process starts all over again, the dynamic input handles the file selection and passes it to the original input when a file is selected.
The reason it is best to hide the actual choose file button is because it can be a bit inconsistent at times. Instead, using the label element with the input element's id as the label's for attribute guarantees that clicking the label will focus the file upload field.
I was going to add this as a comment, but I can't.
Have you tried cloning the input and adding it to the form?
Then when the user selects a file you would could either add the new input, add the new input and hide the "populated" ones, or add the new input and mark the "populated" ones as readonly (you would want to add some method to remove them).
How do I make a file input element do successive uploads?
That is, I want the user to be able to click the upload button and upload file. Then I want the user to be able to click the same upload button and add another file to the uploaded files instead of overwriting all the current files.
I'm assuming this will require some javascript. How do I do this in JS?
I've tried using a
<input type="file" multiple>
element, but it doesn't do what I want. I want to be able to add files to the existing list. The multiple input element overwrites the existing list.
Perhaps I misunderstand what you're asking for, but I believe this may be what you want:
<input type="file" multiple>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple
Edit:
Although ugly IMO and 3rd party, this appears to have the behavior you want:
https://blueimp.github.io/jQuery-File-Upload/jquery-ui.html
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 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