I'm using Blueimp File Upload, how can I limit the upload to the last single element selected or (drag and) dropped? I already deleted the multiple attribute from input form and I set the maxNumberOfFiles option to the value 1 but if the first upload fails (because of the option maxFileSize or acceptFileTypes) the first element stays on top of the listed selected files (generated by template) and further files cannot be uploaded because they infringe the maxNumberOfFiles option. I'd desire that if an accepted file is upload and/or dropped, instead of being appended, it would replace the old (not accepted) file. I would also that the templates never prints more than one file when multiple files are dropped but only the first file.
change input tag from:
<input type="file" name="files[]">
to:
<input type="file" name="file">
Remove files array and remove multiple attribute:
<input id="fileupload" type="file" name="files[]" multiple>
to:
<input id="fileupload" type="file" name="file">
Also change the multiple attribute if it is set from
<input type="file" multiple="" name="file">
to:
<input type="file" name="file">
Related
I have two inputs of type file. I want to sync those two inputs, such that when I select an image in the first input, it will be automatically added to the second input and I can access it from there.
<input name="input1" type="file" multiple>
<input name="input2" type="file" multiple>
Inputs for files are special in that the file selection is not stored in the value attribute, hence ngModel won't work. You can reference each input by using a template reference variable like #variablename. Then, when the first input changes, you add the file selection to the second input with (change)="input2.files = input1.files".
<input name="input1" type="file" multiple #input1 (change)="input2.files = input1.files">
<input name="input2" type="file" multiple #input2>
Try it out here
I want to create a form using an upload "choose file" option. I would like to limit the files that display to show only .epub files and .mobi when the selecting pop up box on the OS opens. It should display only those type of files.
I got it to work with only images and only audio using the code below but how would I get the select pop up box to only display these two types of ebooks, .mobi and .epub?
Below is the image and audio code that works just fine.
Displays Image only files:
<input id="ImageuploadBtn" type="file" name="fileToUpload" class="upload" accept="image/x-png, image/gif, image/jpeg"/>
Displays Audio only files:
<input id="Mp3uploadBtn" type="file" name="fileToUpload" class="upload" accept="audio/mp3, audio/wav"/>
I believe it would be something like accept="ebook/epub" etc... but that does not work. Thanks for your help.
<input id="EbookuploadBtn" type="file" name="fileToUpload" class="upload" accept=".epub, .mobi"/>
I have an element like this:
<input type="file" accept="image/*" id="fileAdd" name="image" size="30" />
How can I save the selected image in a folder inside the project?
You have to send your form values to .php file.
Look for "move_uploaded_file()" function in php or another example (there's a lot of it on stackoverflow)
Is there a way to show only .xxx files in the default file chooser dialog.
xxx may be not-known file types, such as abc, efg etc.
I'm using html5 so it may have new support for this type of things.
Thanks!
The HTML 5 accept attribute on file input elements is for this purpose. E.g.:
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
For others arriving here, these are some very handy predefined sets:
<input type="file" accept="image/*"/>
<input type="file" accept="video/*"/>
<input type="file" accept="audio/*"/>
Ok I really didn't know how else to sum it up for the title. I need to create a form where a user can specify an existing file, but I don't need to upload it (it's on a shared server already accessible) -- I just need to grab the filename and save it in the database so it's linked to other data.
I thought about the input tag as it provides a convenient already done interface to the user's filesystem, but I don't know if it's possible to use it without the acutal upload (leaving out enctype="multipart/form-data" doesn't seem to work). Can I tweak this to make it work, or is there any way to do it other than writing a custom mini file browser?
EDIT: I need the full path name of the file, asking the users to enter it is out of the question...
You could place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>