When I click on my file input button and I select two files in the file dialog, on the add callback I see that the value of data.files.length is 2. Just before calling data.submit(), the value is still 2. However, only 1 file is uploaded.
Why?
Relevant configuration options used are:
autoUpload: false,
singleFileUploads: false,
jQuery File Upload is attached to...
<input id="fileupload" type="file" name="attachment" multiple>
The configuration option you are looking for is MaxNumberOfFiles.
// sets maximum number of files...
$("form#formid").fileupload('option', 'maxNumberOfFiles', 10);
You might also would like to change the input to following
<input id="fileuploadinput" type="file" name="attachment[]" multiple>
// Only reason to change id is so that it may not conflict. You may not have to do it though.
Hopefully this should solve your problem if no other issues are there.
Related
I am using TinyMCE - 6.1.2 version. I would like to retain all the contents entered in TinyMCE as it is (especially while using 'Source Code' option).
Adding the below configuration helps in the majority of the scenarios.
verify_html : false,
But some values like action getting automatically stripped:
<input type='hidden' name='action' value=''>
is getting stripped to:
<input type="hidden" value="">
This is a bug in TinyMCE and the same has been confirmed -
TinyMCE removing 'action' word even after setting verify_html to false
Code Flow:
setContentString
parse
parseAndSanitizeWithContext
DOMPurify.sanitize (iterate through each node)
_sanitizeElements (checks for specific condition and removes the node. There are no configuration to control this. Also element specific validation is done using the hook - uponSanitizeElement )
_sanitizeAttributes (similar to _sanitizeElements, but in this case attributes are removed)
If your element or node is getting removed, please debug the _sanitizeElements or _sanitizeAttributes functions respectively.
OVERVIEW:
We are using this plugin -- bootstrap-datetimejs (https://github.com/Eonasdan/bootstrap-datetimepicker). And I have it setup to show the time only
$(".timePicker").datetimepicker({
format: 'LT'
});
We are using ractivejs for our javascript library and my html goes like this
<label for="apptEndTime">End Time</label>
<div class="timePicker">
<input name="apptEndTime" id="apptEndTime" class="form-control date" type="text" value="{{apptEndTime}}" />
</div>
<label>Duration (mins)</label>
<input type="number" class="form-control" value="{{duration}}" id="duration" />
so apptEndTime is binded to ractive object data apptEndTime, and so does the duration. In my code, I made it that if the duration increases, it will also update the value of apptEndTime data. It successfully updated and displayed the apptEndTime.
PROBLEM:
Though it successfully updated and displayed the apptEndTime, when I click the clock icon of the datetimepicker, it still shows the previous time. As you can see on the screenshot below, it already displayed as 11:58 PM but when I click the clock icon, it still shows as 11:57 PM
QUESTION:
Is there a way that when I updated the value of apptEndTime, the time on the time selection menu (when the clock icon is clicked) will also gets updated?
I've already tried googling for day regarding this, but I can't seem to find the right solution. Also tried checking the documentation but can't find any related information
Ok my teammate was able to answer this question. He just added this line of code
$('input[name=appEndTime]').closest('.timePicker').data("DateTimePicker").date(appointmentObj.apptEndTime);
Where:
$('input[name=appEndTime]') is the affected input field
closest('.timePicker'). The '.timePicker' here is the name of your datetimepicker class/id when you initialize datetimepicker
data("DateTimePicker"). You just follow this, because all functions should be accessed via data("DateTimePicker") as mentioned on the plugin page:
https://getdatepicker.com/4/Functions/
date(appointmentObj.apptEndTime). date is the function name (though it is not found on the list of functions from their page :( ). And appointmentObj.apptEndTime is value that I want to set on the menu
i use Eclipse kepler
in dynamic web project
i create html(HTML5) file and use code for Multi select file upload system
<input type="file" multiple="true" />
but can't select multiple with ctrl+click
and my eclipse has warning
Multiple annotations found at this line :
-Undefined attribute value(true)
-Undefined attribute value(true)
any suggestion?
You need to use the attribute's name as its value:
If the attribute is present, its value must either be the empty string
or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.
(http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes)
In other words, just use:
<input type="file" multiple>
or
<input type="file" multiple="multiple">
If it does not work, then the reason is that you are using a browser that does not support the multiple attribute, such as IE 9. To deal with such browsers, you can add some JavaScript that tests whether the input element has the multiple property and if it does not, creates some additional file input elements (possibly in a loop that lets the user specify any number of files).
The warning should really be an error message, since true is not a valid value for the multiple attribute. As #IlmoEuro explains, the value should be empty or multiple. However, the value has in practice no impact; browsers recognize just the attribute name and ignore the value (even if you write multiple="false" for example).
I am trying to get the filename of an uploaded picture to appear in the input field next to the picker button (for filepicker.io) . Basically I am trying to find what to put in the value field for the input tag to get the filename to appear once the picture is uploaded. Here is the code I have:
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" value="<WHAT DO I PUT HERE?>" class="input" type="text" style="width: 360px;"/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-services="COMPUTER,FACEBOOK,FLICKR,INSTAGRAM,PICASA" data-fp-container="modal" data-fp-mimetypes="image/*" type="filepicker" data-fp-apikey="#################" id='campaign-img-input' value="<php echo h($_POST['img'])"/>
</div>
Thank you for your help! I haven't found any other examples like this in the documentation.
The recommended way to do this would be to bind a function to the onchange event of the filepicker input type. Once the upload occurs, the function will be called, and you can pull the filename out of the e.fpfile attribute.
Alternatively, it may be easier to use the filepicker.pick call directly given that you are interested in customizing the behavior. The widget is great for a drop-in solution in many cases, but if you're looking to customize further I'd recommend using the javascript api directly.
I am having trouble getting a text input and a file upload from the user both of which I save to the database. I have two forms in the .gsp page one is for the text inputs and another is for the file upload. I am able to either save the file or get the text input, but I can not do both. When I place my submit button inside the tags for the textfield inputs it saves those, and when I place it in the tag it saves the file, but how can i get it do both on the click of a single submit button. I don't want to have multiple submit buttons. The two forms call upon the same method to save the data.
The example on this site is what I am looking for but it doesn't say how the information gets sent with the click of a single submit button:
http://www.ibm.com/developerworks/java/library/j-grails06099/index.html
All the <g:uploadForm...> tag does is set the form enctype to multipart/form-data. To upload standard text inputs and files I usually just do the following:
//GSP
<g:form method="post" enctype="multipart/form-data" action="update">
<input type="text" name="myTextField" id="myTextField" />
<input type="file" id="myFile" name="myFile" />
<g:actionSubmit class="save" action="update" value="${message(code: 'default.button.update.label', default: 'Update')}" />
</g:form> //closing tag fixed
Then what you do in your controller depends on how you are saving the uploaded file. If you are saving it into a byte [] myFile it will automatically bind if the field name is set correctly, so you don't have to do anything - it just works.
//controller
myInstance.properties = params //binds text as well as upload files
If you are saving it to the file system you could do something like this (straight from the manual):
//Controller
def f = request.getFile('myFile')
if (f.empty) {
flash.message = 'file cannot be empty'
render(view: 'uploadForm')
return
}
f.transferTo(new File('/some/local/dir/myfile.txt'))
response.sendError(200, 'Done')
The submit button submits the contents of the form it's contained within. The answer to your question is either: a) have 1 form and 1 submit button, or b) have 2 of each.
it also works if instead of having the <g:form> you just make it an <g:uploadForm> tag