Print Page - How to use filebox to upload files in datagrid?

Title: How to use filebox to upload files in datagrid?
Post by: officecode on March 18, 2019, 08:09:07 AM

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!

Title: Re: How to use filebox to upload files in datagrid?
Post by: jarry on March 18, 2019, 09:43:54 AM

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){
					//...
				}
			})
		}
	}
}

Title: Re: How to use filebox to upload files in datagrid?
Post by: officecode on March 18, 2019, 08:55:09 PM

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?

Title: Re: How to use filebox to upload files in datagrid?
Post by: officecode on March 20, 2019, 02:29:13 AM

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

Title: Re: How to use filebox to upload files in datagrid?
Post by: jarry on March 20, 2019, 07:30:39 PM

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;
		}
	}
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: officecode on March 18, 2019, 08:09:07 AM