I have implemented dropzone.js with the following details:
Dropzone.options.addasset = {
url: 'admin_add_asset.php',
autoProcessQueue: false,
uploadMultiple: true,
paramName: 'gallery',
autoDiscover: false,
addRemoveLinks: true,
previewsContainer: ".gallery_images",
parallelUploads: 100,
maxFiles: 100,
forceFallback: false
};
and
<form name="addasset" id="addasset" class="dropzone" action="admin_add_asset.php" enctype="multipart/form-data" method="post">
When I add a couple of files, everything looks like it works, but when the form is submitted, the $_FILES "gallery" array is not populated with the image data at all.
When I set forceFallback to true, it works fine.
Any ideas on what I may have done wrong?
have you try change the id to camelCase
and in javascriopt:
Dropzone.options.addAsset = {
url: 'admin_add_asset.php',
autoProcessQueue: false,
uploadMultiple: true,
paramName: 'gallery',
autoDiscover: false,
addRemoveLinks: true,
previewsContainer: ".gallery_images",
parallelUploads: 100,
maxFiles: 100,
forceFallback: false
};
Related
I have a page that allows users to edit a property listing they had previously submitted. I've been using bootstrap-fileinput to allow users to add images, and it will use the initialPreview attribute to show images that they've already uploaded. Users can remove the initialPreview images to remove images from the dropzone, but I can't find a way to pass this info to the server, that the user has removed these initialPreview images.
I've tried uploadExtraData: function() {}
But I can't get any information about the initialPreview images. Also, I am using the Laravel 5.7 PHP framework for my website.
<div class="form-group">
<label for="additional_info" class="col-lg-12 control-label">Add Photos to Attract Lender Interest</label>
<div class="col-lg-12">
<input type="file" name="image[]" id="image" multiple class="image" data-overwrite-initial="false"
data-min-file-count="0" value="{{ $mortgage->close_date}}">
</div>
</div>
{{-- Scripts for the pretty file input plugin called bootstrap-fileinput --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.2/themes/fas/theme.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#image").fileinput({
overwriteInitial: false,
initialPreview: [
// IMAGE DATA
"http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_1.JPG",
// IMAGE DATA
"http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_2.JPG",
],
initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
initialPreviewFileType: 'image', // image is the default and can be overridden in config below
initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
showUpload: false,
theme: 'fas',
uploadUrl: "/submit-mortgage",
uploadExtraData: function () {
return {
_token: $("input[name='_token']").val(),
};
},
allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
overwriteInitial: true,
showCaption: false,
showRemove: true,
maxFileSize: 5000,
maxFilesNum: 8,
fileActionSettings: {
showRemove: true,
showUpload: false,
showZoom: true,
showDrag: false,
},
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
Right now it just removes any old images upon submit and will save any newly uploaded ones. I'd like to both keep track of what initialPreview images were not removed, and which new images were uploaded.
I know this is an older question, but for those who stumble upon it here is a solution:
When a user clicks the remove button on the initialPreview frame you can pass information from that to the server by adding additional option to fileinput which will make an Ajax call each time the remove button is clicked.
Using the question above you would need to add:
initialPreviewConfig: [
{
// This is passed to the server in the request body as key: 0
key: 0,
// This is the url that you would send a POST request to that will handle the call.
url: 'http://www.example.com/image/remove',
// Any extra data that you would like to add to the POST request
extra: {
key: value
}
}
]
You would need to create an object for each item you have within your initialPreview array.
The OP's .fileinput would become:
$("#image").fileinput({
overwriteInitial: false,
initialPreview: [
// IMAGE DATA
"http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_1.JPG",
// IMAGE DATA
"http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_2.JPG",
],
initialPreviewConfig: [
{
key: 0,
url: '/image/remove', //custom URL
extra: {
image: '847 Queen Street West, Toronto, ON, Canada_1.JPG
}
},
{
key: 1,
url: '/image/remove', //custom URL
extra: {
image: 847 Queen Street West, Toronto, ON, Canada_2.JPG
}
},
],
initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
initialPreviewFileType: 'image', // image is the default and can be overridden in config below
initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
showUpload: false,
theme: 'fas',
uploadUrl: "/submit-mortgage",
uploadExtraData: function () {
return {
_token: $("input[name='_token']").val(),
};
},
allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
overwriteInitial: true,
showCaption: false,
showRemove: true,
maxFileSize: 5000,
maxFilesNum: 8,
fileActionSettings: {
showRemove: true,
showUpload: false,
showZoom: true,
showDrag: false,
},
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
I hope this helps anybody who comes across it.
FYI this is my first answer on SO (please be kind :P )
When I add width to the edit modal in jqGrid, the parameters after it (i.e., add:false, closeAfterEdit: true, etc.) stop working. I've tried it in different places, and it doesn't work.
jQuery("#prodgrid").jqGrid('navGrid', '#pager', {width: 1000},{edit: true, add: false, del: false, search: false}, {closeAfterEdit: true}, {closeAfterAdd: true});
FYI:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
You use wrong options of navGrid. If you examine the documentation you will see that the position of the parameters which you use is wrong. The correct will be
$("#prodgrid").jqGrid('navGrid', '#pager',
{add: false, del: false, search: false},
{closeAfterEdit: true, width: 1000},
{closeAfterAdd: true, width: 1000});
(you can skip edit: true because it's already default value).
I see that you use free jqGrid. It makes specifying of jqGrid options easier. First of all you can skip '#pager'. In the case jqGrid will just use the pager which you already specified during creating of the grid. Seconds you can specify page: true in the option of the grid instead of usage pager: '#pager'. You will don't need to create empty <div id="pager"></div> in the case. By usage page: true free jqGrid will create the corresponding div automatically. Moreover the options of 'navGrid' are divided in independent parts: the navGrid option {edit: true, add: false, del: false, search: false} and the options of form editing: {closeAfterEdit: true, width: 1000} and {closeAfterAdd: true, width: 1000}. Free jqGrid allows to specify the options directly during creating the grid and then use simplified form of the call of navGrid:
$("#prodgrid").jqGrid({
// here there are all other standard option which you already use
pager: true,
navOptions: {add: false, del: false, search: false},
formEditing: {closeAfterEdit: true, closeAfterAdd: true, width: 1000}
}).jqGrid("navGrid");
You can read more about the style of coding the option of jqGrid here. I personally like much more named parameter as positioned parameter because everybody can better read the code.
I tried solutions given for this problem. But still, it is not working. I feel JSON response is not in the right format.
Have implemented JQGrid in struts2. Create a user list in action and returned as json type using result type as json in struts.xml.
This is the Json i obtained,
{"JSON":"success","userList":[{"fName":"abi","lName":"babu"},{"fName":"abi1","lName":"babu1"},{"fName":"abi2","lName":"babu2"},{"fName":"abi3","lName":"babu3"},{"fName":"abi4","lName":"babu4"},{"fName":"abi5","lName":"babu5"},{"fName":"abi6","lName":"babu6"}]}
The JSP page is,
<script type="text/javascript">
$(function () {
'use strict';
$("#datagrid").jqGrid({
url: "json-table",
datatype: "json",
colNames:['fName','lName'],
colModel:[
{name:'fName',index:'fName', key:true, width:100,editable:true,editoptions:{size:10}},
{name:'lName',index:'lName', width:100,editable:true},
],
rowNum:10,
rowList:[3,6],
loadonce: true,
pager: '#navGrid',
sortname: 'fName',
sortorder: "asc",
height: "auto", //210,
width:600,
onSelectRow: function(id) {
var getID = $(this).jqGrid('getCell', id, 'fName');
},
viewrecords: true,
caption:"JQ GRID"
});
});
</script>
Any help would be highly appreciated. Thanks.
You need just include jsonReader parameter which corresponds the format of your input data:
jsonReader: {root: "userList", repeatitems: false}
See the demo.
I have the following call to load a grid:
$("#searchlist").jqGrid({
url:'./searchlibrary',
datatype: 'json',
mtype: 'POST',
postData: {
type: function(){return $('select[name="searchtype"]').val();},
criteria: function(){return getSearchData();}
},
colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
colModel :[
{name:'resourceName', index:'resourceName', width:380, align:'left'},
{name:'unit', index:'unitID', width:40, align:'center',sortable:true,
sorttype:'text'},
{name:'topic', index:'topicID', width:220, align:'center',sortable:true},
{name:'docType', index:'docTypeID', width:97, align:'center',
sortable:true},
{name:'contentType', index:'contentTypeID', width:97, align:'center',
sortable:true},
{name: 'select', width:55, align: "center", sortable: false, editable: true,
edittype: "checkbox", editoptions: { value:"Yes:No" },
formatter:"checkbox",formatoptions: {disabled : false}}
],
rowNum:20,
sortname: 'resourceName',
sortorder: 'asc',
viewrecords: true,
gridview: true,
width:878,
height:251
});
Notice the last item in the colModel section. Notice the editoptions section. When the grid is loaded it seems to be ignoring this. Checking the element in chrome shows the following code being generated:
<input type="checkbox" value=" " offval="no">
Am I doing something wrong in the declaration?
UPDATE
Here's the JSON returned:
{"total":1,"page":"1","records":"4","rows":[{"id":"1","cell":["Test Resource 1","1","Topic 1","pdf","course","1"]},{"id":"2","cell":["Test Resource 2","1","Topic 1","pdf","course","2"]},{"id":"3","cell":["Test Resource 3","1","Topic 2","mp4","course","3"]},{"id":"4","cell":["Test Resource 4","1","Topic 2","wmv","course","4"]}]}
This still gives me 4 results all checked by default. This is what's in my colModel for select now:
{name: 'select', index:'resourceID', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: { value:"Yes:No", defaultValue:"No" }, formatter:"checkbox",formatoptions: {disabled : false}}
The first generated html for one of the select cells is this:
<input type="checkbox" checked="checked" value="1" offval="no">
If you loads the data in the grid the values for the select column will be filled as the checkbox with respect of the formatter:"checkbox". If the value is "" the default value can be used. So one can use defaultValue of the formatoptions to specify the default value. The HTML fragment
<input type="checkbox" value=" " offval="no">
with " " value shows that you have probably wrong data with the space instead of empty string. If you need to fill the data correctly you need return from the server the data having true, false, 1, 0, yes, no, on or off (the case of all values are not important). See the source code for more details.
So you should one more time verify your data returned from the server. I personally prefer to use 1 and 0 as the input values for checkboxes.
I have a jqGrid constructed as it follows in the code below:
function radio(value, options, rowObject){
var radio = '<input type="radio" value=' + value + ' name="radioid" />';
return radio;
}
function reloadOnEnter(){
jQuery(':input[name=field1]').keyup(function(e){
if(e.keyCode == 13){
var fieldValue = jQuery(':input[name=field1]').attr('value');
jQuery(':input[name=field1]').attr('value', fieldValue);
jQuery("#listTable").jqGrid().trigger("reloadGrid");
}
});
}
jQuery(function(){
jQuery("#listTable").jqGrid({
url: '$content.getURI("myURI")' + '?userId=$userId&pageNo=0&locale=' + '$locale',
datatype: 'json',
mtype: 'POST',
colNames:['column1', 'column2', 'column3', 'column4', 'column5'],
colModel :[
{name:'name', index:'field', width:'8%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
{name:'name1', index:'field1', width:'23%', sortable: false, resizable:false},
{name:'name2', index:'field2', width:'23%', sortable: false, resizable:false},
{name:'name3', index:'field3', width:'23%', sortable: false, resizable:false},
{name:'name4', index:'field4', width:'23%', sortable: false, resizable:false}
],
width:'768',
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: $rowNr,
rowTotal: 500,
sortorder: 'desc',
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true
});
});
jQuery(function(){
jQuery("#listTable").jqGrid('filterToolbar',{
stringResult: true,
searchOnEnter: false });
});
I start typing 'he' and the autocomplete window shows me 'hello' (because I previously typed hello). I select 'hello' and hit enter, and still 'he' is submitted in the ajax request.
My reloadOnEnter function is called by the loadCompleteHandler. The interesting thing is that when I query the search field (field1) value is the selected value, but only the typed value is being sent in the request. I would like to send the selected value. How can i achieve this?
EDIT:
The loadCompleteHandler looks like this:
function loadCompleteHandler(){
reloadOnEnter();
jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}
(I use Apache Velocity as a template engine! That is why I have variables like $variable in the javascript code!)
To your main question: you should use jQuery.val function instead of jQuery.attr('value').
Many other things in your code seams me strange or unclear. It is not clear for me how you use reloadOnEnter in the loadCompleteHandler. If would be good if you include the corresponding code fragment. The value for the url seems me also very strange. You use additionally searchOnEnter: false option of filterToolbar but in the reloadOnEnter you wait for the 'Enter' key. Inside of the body of if(e.keyCode == 13) you get jQuery(':input[name=field1]').attr('value') and then set the same value back. Why?
Probably you could describe in the text of your question a little more what you want to archive with the code?