Feature request: display file info and preview

[lexoyo]

When a file (or even a folder?) is selected, it should be possible to display details about the file, such as weight, dates and type... And most important a preview.

Probably something like gdrive "file details":

[jotakar]

The file details like size and date are easy, it's necesay to modify render in FileListItem.jsx , sometinkg like
render () { const {file} = this.props; const modDate = (file.isService || !file.modified) ? "" : file.modified.replace(/^([^T]*)T([^\.]*)\..*/, '$1 $2'); const isService = UnifileService.isService(file); this.allowDownload = !file.upload && this.props.path.length > 0 && !file.isDir && !isService; this.allowDelete = !file.upload && this.props.path.length > 0 && !isService; this.allowRename = !file.upload && this.props.path.length > 0 && !isService; const mime = file.mime ? file.mime.replace(/\//g, ' ') : ''; const className = this.constructor.getClassName(file, isService, mime); const filesDetails = 'filesDetails'; return ( <section className={file-list-item${file.upload ? uploading progress-${file.upload.progress} : ''} }> <div className={className}> </div> <div className={filesDetails}>{file.name}</div> <div className={filesDetails}>{file.isDir?' ':file.size}</div> <div className={filesDetails}>{modDate}</div>

Adding modDate for date of lst modification
Needed a new class fileDetails to put data in columns
/*Files details*/ #cloud-explorer .files .file-list-item div{ width:100%; } #cloud-explorer .files li:hover{ background-color: #676767 } #cloud-explorer .files .file-list-item div:nth-child(1), div:nth-child(2){ width: auto; text-align:left;} #cloud-explorer .files .file-list-item div:nth-child(3), div:nth-child(4){ text-align : right; } #cloud-explorer .files .file-list-item ul{ width: 100%; margin-left: 20px; text-align:right; }
The image details.... a modal window (like my request for ftp login) but with image inside... perhaps.

[lexoyo]

Hey @jotakar
I did not see this comment before sorry
You should make a PR with that
We probably want to use this for file preview (should be optional because it is complicated to install)
https://www.npmjs.com/package/filepreview