I am using angular-file-upload
I am taking file input in a dialog, my flow is as follows:
User open dialog, Upload File, User Closes the dialog
The issue is, when the user opens the dialog next time, without refreshing the page (obviously), the previous file name is still there next to "browse" button. But when user click on upload, it doesn't upload the same file, even if the user re select the same file. I know it has something to do with the onchange event but how to solve this in angularjs?
I tried resetting the model attached to file input, but no luck.
Try to set replaceFileInput config to true
Related
I'm trying to implement a note system where users can append notes to documents and upload files inside a popover
Unfortunately, when I click on the "Browse" button, the popup is closed.
Is there anything I can do to prevent that?
Thanks
Well, forget about it, I had another event (body click) that was being intercepted by the file input button.
I've fixed the issue.
I am trying to use DropzoneJs.
I have a form with some text fields and a dropzone for file attachments. I did it so that after a file is successfully uploaded to the server (after being automatically processed by dropzone), I'll just add hidden input fields with the filenames as value along with all the other textfield data in the form (for database). However if I have dropped files in the dropzone and has been successfully been uploaded to the server, and for some reason the form won't be submitted (eg. page refreshed or tab closed), then there won't be a need to save the filenames into the database. How do I remove the files in the server just before a page refresh or tab closing?
1) A good idea to do these kind of things ( at least how I do it ), is that you save all the images immediately ( with filenames ), and when the user closes the page and gets back to it in a while, they all show up again. So something like this:
Let's say you have a table users and a table images. When he uploads images to the server, they will be saved in the server and in the table images even without submitting the form. When the user closes the page, and gets back to it, he will have all the uploaded images again.
2) If you don't want this kind of thing, in the images table you can add a column with the name "draft" or something like that, so when the user uploads pictures, all the images are drafts, and when he submits the form, then they all become un-drafted. So with this, when users close the window, images are still drafted and nobody won't see them.
With this, you can then run a "cronjob" that deletes all the draft images from the server, or you can do that on the user's next login.
According to this section jQuery-File-Upload Basic plugin documentation, you can upload file upon a click of a button by using add. however, this causes an additional 'Upload' button to be added each time the user select a file, whereas my app only accepts a single upload.
see JS fiddle here
so how to achieve this: when user clicks Choose file the 2nd time, that file replaces the initial file and only one upload button is present at any moment.
Thanks!
It looks like a new button is getting added every time the 'Add' event fires with this line:
$('<button/>').text('Upload').appendTo(document.body)
You can prevent re-adding the button in multiple ways, here's a simple example:
if ($("button:contains('Upload')").length == 0) {
$('<button/>').text('Upload').appendTo(document.body)
}
You'll probably have to update the code to rebind the 'click' function with the new data being submitted.
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 would like to to create a 2-step file uploader:
Open dialog.
Select one file from computer.
I would like to eliminate the step where the user must submit the form, and instead do it automatically with JavaScript. Is there anyway to achieve it?
Thanks.
Setting an onChange event and checking for whether the ".value" of the upload field is "!= null" does the trick for me. However, accessing file upload fields programmatically is always a shaky issue, and things can change with future browser security updates.
If you want to be sure, use a flash based upload component like SWFUpload.