Devexpress file manager using asp.net file system provider - asp.net

Question

I implemented devextreme to my react project.I'm using file manager system and I'm using devexpress for create system provider with my asp.net project.
I have an issue.
When i try to upload any file I'm getting and error.Download,move,copy is working very well.But i cant upload any file.
File uploaded succesfully my temp folder but then doesnt move to my real path.How can i fix this.Devexpress version 20.1
public object FileSystem(long id, FileSystemCommand command, string arguments, HttpRequest Request)
{
var path = Path.Combine(HostingEnvironment.ContentRootPath, "../files/Images/", id.ToString());
var config = new FileSystemConfiguration
{
Request = Request,
FileSystemProvider = new PhysicalFileSystemProvider(
path,
(fileSystemItem, clientItem) =>
{
if (!clientItem.IsDirectory)
clientItem.CustomFields["url"] = GetFileItemUrl(fileSystemItem, Request);
}
),
//uncomment the code below to enable file/folder management
AllowCopy = true,
AllowCreate = true,
AllowMove = true,
AllowDelete = true,
AllowRename = true,
AllowUpload = true,
AllowDownload = true,
AllowedFileExtensions = new[] { ".txt", ".pdf", ".doc", ".docx", ".xls", ".xlsx", ".png", ".jpg", ".jpeg", ".gif", ".csv" }
};
var processor = new FileSystemCommandProcessor(config);
var result = processor.Execute(command, arguments);
return result.GetClientCommandResult();
}
Here is the front end code
import React from "react";
import FileManager, { Permissions } from "devextreme-react/file-manager";
import RemoteFileSystemProvider from "devextreme/file_management/remote_provider";
import { Popup } from "devextreme-react/popup";
let remoteProvider = new RemoteFileSystemProvider({
endpointUrl: "https://myapiurl.com.tr/api/FileManager/FileSystem/121",
});
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
currentPath: "Widescreen",
popupVisible: false,
imageItemToDisplay: {},
remoteProvider: new RemoteFileSystemProvider({
endpointUrl: "https://myapiurl.com.tr/api/FileManager/FileSystem/121",
}),
};
this.displayImagePopup = this.displayImagePopup.bind(this);
this.hideImagePopup = this.hideImagePopup.bind(this);
this.onCurrentDirectoryChanged = this.onCurrentDirectoryChanged.bind(this);
}
displayImagePopup(e) {
this.setState({
popupVisible: true,
imageItemToDisplay: {
name: e.file.name,
url: e.file.dataItem.url,
},
});
}
hideImagePopup() {
this.setState({
popupVisible: false,
});
}
onCurrentDirectoryChanged(e) {
this.setState({
currentPath: e.component.option("currentPath"),
});
}
render() {
console.log(remoteProvider);
return (
<>
{this.props.investment ? (
<div>
<FileManager
currentPath={this.state.currentPath}
fileSystemProvider={remoteProvider}
onSelectedFileOpened={this.displayImagePopup}
onCurrentDirectoryChanged={this.onCurrentDirectoryChanged}
>
<Permissions
create={true}
copy={true}
move={true}
delete={true}
rename={true}
upload={true}
download={true}
></Permissions>
</FileManager>
<Popup
maxHeight={600}
closeOnOutsideClick={true}
title={this.state.imageItemToDisplay.name}
visible={this.state.popupVisible}
onHiding={this.hideImagePopup}
className="photo-popup-content"
>
<img src={this.state.imageItemToDisplay.url} className="photo-popup-image" />
</Popup>
</div>
) : (
""
)}
</>
);
}
}
export default App;

Answer 1

We had the same issue lately, if I'm not mistaken, it was related to a mismatch between some DLLs versions of the project. The client-side version must match the FileSystemCommandeProcessor version. The DevExtreme team seems to have changed some property name which cause this issue.