1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-09 13:14:14 +00:00
seahub/frontend/src/App.js

183 lines
5.2 KiB
JavaScript
Raw Normal View History

2018-05-02 06:09:58 +00:00
import React from 'react';
import ReactDOM from 'react-dom';
import SeafileEditor from './lib/seafile-editor';
import MarkdownViewer from './lib/markdown-viewer';
import 'whatwg-fetch';
let repoID = window.app.pageOptions.repoID;
let filePath = window.app.pageOptions.filePath;
let fileName = window.app.pageOptions.fileName;
let siteRoot = window.app.config.siteRoot;
let domain = window.app.pageOptions.domain;
let protocol = window.app.pageOptions.protocol;
let dirPath = '/';
const updateUrl = `${siteRoot}api2/repos/${repoID}/update-link/?p=${dirPath}`;
const uploadUrl = `${siteRoot}api2/repos/${repoID}/upload-link/?p=${dirPath}&from=web`;
function handleFetchErrors(response) {
if (!response.ok) {
// response 4xx/5xx will be caught, and rejected in the promise chain
throw Error(response.statusText);
}
return response;
}
2018-05-02 06:09:58 +00:00
function updateFile(uploadLink, filePath, fileName, content) {
var formData = new FormData();
formData.append("target_file", filePath);
formData.append("filename", fileName);
var blob = new Blob([content], { type: "text/plain"});
formData.append("file", blob);
return fetch(uploadLink, {
method: "POST",
body: formData,
}).then(handleFetchErrors);
2018-05-02 06:09:58 +00:00
}
function getImageFileNameWithTimestamp() {
var d = Date.now();
return "image-" + d.toString() + ".png";
}
class EditorUtilities {
saveContent(content) {
return (fetch(updateUrl, {credentials: 'same-origin'})
.then(res => res.json())
.then(res => {
return updateFile(res, filePath, fileName, content)
})
);
}
_getImageURL(fileName) {
const url = `${protocol}://${domain}${siteRoot}lib/${repoID}/file/images/${fileName}?raw=1`;
return url;
}
uploadImage = (imageFile) => {
return fetch(uploadUrl, {credentials: 'same-origin'})
.then(res => res.json())
.then(res => {
const uploadLink = res + "?ret-json=1";
// change image file name
const name = getImageFileNameWithTimestamp();
const blob = imageFile.slice(0, -1, 'image/png');
const newFile = new File([blob], name, {type: 'image/png'});
const formData = new FormData();
formData.append("parent_dir", "/");
formData.append("relative_path", "images");
formData.append("file", newFile);
// upload the image
return fetch(uploadLink, {
method: "POST",
body: formData,
})
}).then(resp => {
return resp.json();
}).then(json => {
// The returned json is a list of uploaded files, need to get the first one
var filename = json[0].name;
return this._getImageURL(filename);
});
}
getFileURL(fileNode) {
var url;
if (fileNode.isImage()) {
2018-06-07 07:01:41 +00:00
url = protocol + '://' + domain + siteRoot + "lib/" + repoID + "/file" + encodeURIComponent(fileNode.path()) + "?raw=1";
2018-05-02 06:09:58 +00:00
} else {
2018-06-07 07:01:41 +00:00
url = protocol + '://' + domain + siteRoot + "lib/" + repoID + "/file" + encodeURIComponent(fileNode.path());
2018-05-02 06:09:58 +00:00
}
return url;
}
isInternalFileLink(url) {
var re = new RegExp(protocol + '://' + domain + siteRoot + "lib/" + "[0-9a-f\-]{36}/file.*");
return re.test(url);
}
getFiles() {
const dirUrl = `${siteRoot}api2/repos/${repoID}/dir/?p=${dirPath}&recursive=1`
return fetch(dirUrl, {credentials: 'same-origin'})
.then(res => res.json())
.then(items => {
const files = items.map(item => {
return {
name: item.name,
type: item.type === 'dir' ? 'dir' : 'file',
isExpanded: item.type === 'dir' ? true : false,
parent_path: item.parent_dir,
}
})
return files;
})
}
}
const editorUtilities = new EditorUtilities();
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
markdownContent: "",
loading: true,
2018-06-07 07:01:41 +00:00
mode: "editor",
2018-05-02 06:09:58 +00:00
};
this.fileInfo = {
name: fileName,
path: filePath
};
}
componentDidMount() {
2018-06-07 07:01:41 +00:00
const path = encodeURIComponent(filePath)
const url = `${siteRoot}api2/repos/${repoID}/file/?p=${path}&reuse=1`;
const infoPath =`${siteRoot}api2/repos/${repoID}/file/detail/?p=${path}`;
2018-05-02 06:09:58 +00:00
fetch(infoPath, {credentials:'same-origin'})
.then((response) => response.json())
.then(res => {
this.fileInfo.mtime = res.mtime;
this.fileInfo.size = res.size;
fetch(url, {credentials: 'same-origin'})
.then(res => res.json())
.then(res => {
fetch(res)
.then(response => response.text())
.then(body => {
this.setState({
markdownContent: body,
loading: false
});
})
})
})
}
render() {
if (this.state.loading) {
return (
<div className="empty-loading-page">
<div className="lds-ripple page-centered"><div></div><div></div></div>
</div>
)
2018-06-07 07:01:41 +00:00
} else if (this.state.mode === "editor") {
2018-05-02 06:09:58 +00:00
return (
<SeafileEditor
fileInfo={this.fileInfo}
markdownContent={this.state.markdownContent}
editorUtilities={editorUtilities}
/>
);
2018-06-07 07:01:41 +00:00
}
2018-05-02 06:09:58 +00:00
}
}
export default App;