81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import { Meteor } from 'meteor/meteor';
|
|
// import PropTypes from 'prop-types';
|
|
|
|
const IndividualFile = props => {
|
|
|
|
// propTypes: {
|
|
// fileName: PropTypes.string.isRequired,
|
|
// fileSize: PropTypes.number.isRequired,
|
|
// fileUrl: PropTypes.string,
|
|
// fileId: PropTypes.string.isRequired
|
|
// }
|
|
|
|
function removeFile(ev) {
|
|
// ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
let conf = confirm('Are you sure you want to delete the file?') || false;
|
|
if (conf == true) {
|
|
Meteor.callAsync('RemoveFile', props.fileId)
|
|
.catch (err => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
}
|
|
|
|
async function renameFile() {
|
|
let validName = /[^a-zA-Z0-9 \.:\+()\-_%!&]/gi;
|
|
let prompt = window.prompt('New file name?', props.fileName);
|
|
|
|
// Replace any non valid characters, also do this on the server
|
|
if (prompt) {
|
|
prompt = prompt.replace(validName, '-');
|
|
prompt.trim();
|
|
}
|
|
|
|
if (!_.isEmpty(prompt)) {
|
|
await Meteor.callAsync('RenameFile', props.fileId, prompt)
|
|
.catch(err => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
}
|
|
|
|
return <div className="m-t-sm">
|
|
<img src={props.fileUrl} alt={props.fileName} style={{maxWidth: `200px`, maxHeight: `200px`}}/>
|
|
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<strong>{props.fileName}</strong>
|
|
<div className="m-b-sm">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col-md-3">
|
|
<button onClick={renameFile} className="btn btn-outline btn-primary btn-sm">
|
|
Rename
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div className="col-md-3">
|
|
<a href={props.fileUrl} className="btn btn-outline btn-primary btn-sm"
|
|
target="_blank">View</a>
|
|
</div>
|
|
|
|
<div className="col-md-2">
|
|
<button onClick={removeFile} className="btn btn-outline btn-danger btn-sm">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
|
|
<div className="col-md-4">
|
|
Size: {props.fileSize}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
export default IndividualFile; |