How to use filebox to upload files in datagrid?

[officecode]

I set up the filebox editor in the datagrid:

Code:

editor:{
	type:'filebox',
	options:{
		buttonText:'…',
		accept:'image/*',
		onChange:function(){
			//There is no form here, how to upload files?
		}
	}
}

But there are two problems below, please help:
1, using filebox can only select files and display the name in the text box, how to use form to upload files? How to add form to this text box?
2. When you enter the filebox text box again, the original file name will be deleted automatically. How can I avoid this?
Thank you!

[jarry]

Call 'files' method to get file list and then use the FormData to post the selected file. Please refer to the code below.

Code:

editor:{
	type:'filebox',
	options:{
		buttonText:'...',
		accept:'image/*',
		onChange: function(){
			var files = $(this).filebox('files')
			var formData = new FormData();
			for(var i=0; i<files.length; i++){
				var file = files[i];
				formData.append('file',file,file.name);
			}
			$.ajax({
				url:...,
				type:'post',
				data:formData,
				contentType:false,
				processData:false,
				success:function(data){
					//...
				}
			})
		}
	}
}

[officecode]

There is also a second problem: after the file is successfully uploaded, once it leaves, the content displayed by the cell will automatically include the path; when you enter the cell again, the file name will be automatically cleared.
How should I set the options of the filebox to avoid this situation?

[officecode]

The second question is shown below. What should I do? Please help, thank you!

[jarry]

Due to the security, the browser doesn't allow to change the File's value. When the File is created, its value will be reset. If you want to display the chosen file name when editing a row, you should store the file name and reset the text of filebox component when editing it. Please refer to the code below:

Code:

$('#dg').datagrid({
	columns: [[
		{field:'itemid',title:'Item ID',width:200,editor:'textbox'},
		{field:'productid',title:'Product',width:200,
			formatter: function(value,row){
				return row.fileName || value;
			},
			editor: {
				type: 'filebox',
				options: {
					buttonText: '...'
				}
			}
		}
	]],
	onBeginEdit: function(index,row){
		var ed = $(this).datagrid('getEditor',{index:index,field:'productid'});
		row.fileName = row.fileName || row.productid;
		$(ed.target).filebox('setText',row.fileName)
	},
	onEndEdit: function(index,row){
		var ed = $(this).datagrid('getEditor',{index:index,field:'productid'});
		var files = $(ed.target).filebox('files');
		if (files.length){
			row.fileName = files[0].name;
		}
	}
})