Merge branch 'bugfix/upload-with-convertation' of github.com:ONLYOFFICE/AppServer into bugfix/upload-with-convertation

This commit is contained in:
Viktor Fomin 2020-12-09 18:39:54 +03:00
commit ba06aaf913
6 changed files with 160 additions and 91 deletions

View File

@ -8,7 +8,7 @@ import { utils } from "asc-web-common";
import { import {
setTreeFolders, setTreeFolders,
setDialogVisible, setDialogVisible,
onConvert, convertUploadedFiles,
} from "../../../store/files/actions"; } from "../../../store/files/actions";
import { createI18N } from "../../../helpers/i18n"; import { createI18N } from "../../../helpers/i18n";
const i18n = createI18N({ const i18n = createI18N({
@ -50,7 +50,7 @@ class ConvertDialogComponent extends React.Component {
return false; return false;
} }
onConvert = () => this.props.onConvert(this.props.t); onConvert = () => this.props.convertUploadedFiles(this.props.t);
onClose = () => this.props.setDialogVisible(this.props.t); onClose = () => this.props.setDialogVisible(this.props.t);
render() { render() {
@ -66,7 +66,7 @@ class ConvertDialogComponent extends React.Component {
<img <img
className="convert_dialog_image" className="convert_dialog_image"
src="images/convert_alert.png" src="images/convert_alert.png"
alt="convert alert image" alt="convert alert"
/> />
<div className="convert_dialog-content"> <div className="convert_dialog-content">
<Text>{t("ConversionMessage")}</Text> <Text>{t("ConversionMessage")}</Text>
@ -118,12 +118,8 @@ const ConvertDialog = (props) => (
<ModalDialogContainerTranslated i18n={i18n} {...props} /> <ModalDialogContainerTranslated i18n={i18n} {...props} />
); );
const mapStateToProps = (state) => { export default connect(null, {
return {};
};
export default connect(mapStateToProps, {
setTreeFolders, setTreeFolders,
setDialogVisible, setDialogVisible,
onConvert, convertUploadedFiles,
})(withRouter(ConvertDialog)); })(withRouter(ConvertDialog));

View File

@ -5,5 +5,6 @@
"HideMessage": "Do not show this message again", "HideMessage": "Do not show this message again",
"ContinueButton": "Continue", "ContinueButton": "Continue",
"CloseButton": "Close", "CloseButton": "Close",
"UploadingLabel": "Uploading files: {{file}} of {{totalFiles}}" "UploadingLabel": "Uploading files: {{file}} of {{totalFiles}}",
"ConvertingLabel": "Converting files: {{file}} of {{totalFiles}}"
} }

View File

@ -5,5 +5,6 @@
"HideMessage": "Больше не показывать это сообщение", "HideMessage": "Больше не показывать это сообщение",
"ContinueButton": "Продолжить", "ContinueButton": "Продолжить",
"CloseButton": "Закрыть", "CloseButton": "Закрыть",
"UploadingLabel": "Загружено файлов: {{file}} из {{totalFiles}}" "UploadingLabel": "Загружено файлов: {{file}} из {{totalFiles}}",
"ConvertingLabel": "Сконвертировано файлов: {{file}} из {{totalFiles}}"
} }

View File

@ -363,7 +363,7 @@ class FilesRowContent extends React.PureComponent {
clearSecondaryProgressData, clearSecondaryProgressData,
fetchFiles, fetchFiles,
} = this.props; } = this.props;
api.files.getConvertFile(fileId).then((res) => { api.files.getFileConversationProgress(fileId).then((res) => {
if (res && res[0] && res[0].progress !== 100) { if (res && res[0] && res[0].progress !== 100) {
setSecondaryProgressBarData({ setSecondaryProgressBarData({
icon: "file", icon: "file",

View File

@ -699,68 +699,60 @@ export function getFilesSettings() {
export const startUpload = (uploadFiles, folderId, t) => { export const startUpload = (uploadFiles, folderId, t) => {
return (dispatch, getState) => { return (dispatch, getState) => {
const state = getState(); const state = getState();
console.log("start upload", state.files.uploadData);
const { uploadData } = state.files;
console.log("start upload", uploadData);
let newFiles = state.files.uploadData.files; let newFiles = state.files.uploadData.files;
let filesSize = 0; let filesSize = 0;
let uploadStatus = null;
for (let index of Object.keys(uploadFiles)) { for (let index of Object.keys(uploadFiles)) {
const item = uploadFiles[index]; const file = uploadFiles[index];
if (item.size !== 0) {
const parts = item.name.split("."); const parts = file.name.split(".");
const ext = parts.length > 1 ? "." + parts.pop() : ""; const ext = parts.length > 1 ? "." + parts.pop() : "";
const needConvert = canConvert(ext)(state); const needConvert = canConvert(ext)(state);
newFiles.push({ newFiles.push({
file: item, file: file,
fileId: null,
toFolderId: folderId, toFolderId: folderId,
action: needConvert ? "convert" : "upload", action: needConvert ? "convert" : "upload",
error: null, error: null,
}); });
filesSize += item.size;
if (needConvert) { filesSize += file.size;
uploadStatus = "pending";
}
} else {
dispatch(
setPrimaryProgressBarData({
visible: true,
alert: true,
})
);
setTimeout(() => dispatch(clearPrimaryProgressData()), TIMEOUT);
//toastr.error(t("ErrorUploadMessage"));
}
} }
//const showConvertDialog = uploadStatus === "pending"; //const showConvertDialog = uploadStatus === "pending";
const percent = state.files.uploadData.percent;
const uploadedFiles = state.files.uploadData.uploadedFiles; const { percent, uploadedFiles, uploaded } = uploadData;
console.log("newFiles: ", newFiles); console.log("newFiles: ", newFiles);
const newUploadData = { const newUploadData = {
files: newFiles, files: newFiles,
filesSize, filesSize,
uploadStatus,
uploadedFiles, uploadedFiles,
percent, percent,
uploaded: false, uploaded: false,
}; };
dispatch(setUploadData(newUploadData)); dispatch(setUploadData(newUploadData));
// if (showConvertDialog) { if (uploaded) {
// dispatch(setConvertDialogVisible(showConvertDialog));
// }
if (state.files.uploadData.uploaded)
startUploadFiles(t, dispatch, getState); startUploadFiles(t, dispatch, getState);
}
}; };
}; };
const startUploadFiles = async (t, dispatch, getState) => { const startUploadFiles = async (t, dispatch, getState) => {
let state = getState(); let state = getState();
const { files, percent } = state.files.uploadData; let { files, percent } = state.files.uploadData;
if (files.length === 0) return; if (files.length === 0) return finishUploadFiles(getState, dispatch);
const progressData = { const progressData = {
visible: true, visible: true,
@ -783,14 +775,24 @@ const startUploadFiles = async (t, dispatch, getState) => {
index++; index++;
state = getState(); state = getState();
len = state.files.uploadData.files.length; files = state.files.uploadData.files;
len = files.length;
} }
//TODO: startConvertFunc const filesToConvert = getFilesToConvert(files);
// All files has been uploaded and converted
if (filesToConvert.length > 0) {
// Ask to convert options
dispatch(setConvertDialogVisible(true));
} else {
// All files has been uploaded and nothing to convert
finishUploadFiles(getState, dispatch); finishUploadFiles(getState, dispatch);
}
};
const getFilesToConvert = (files) => {
const filesToConvert = files.map((f) => f.action === "convert");
return filesToConvert;
}; };
const finishUploadFiles = (getState, dispatch) => { const finishUploadFiles = (getState, dispatch) => {
@ -912,29 +914,6 @@ const startSessionFunc = (indexOfFile, t, dispatch, getState) => {
}); });
}; };
// const sendChunk = (
// files,
// location,
// requestsDataArray,
// indexOfFile,
// t,
// dispatch,
// getState
// ) => {
// const state = getState();
// const { uploadData } = state.files;
// const { uploaded, percent, uploadedFiles } = uploadData;
// let newPercent = percent;
// const file =
// uploadData.files[indexOfFile] || uploadData.convertFiles[indexOfFile];
// const toFolderId = file.toFolderId;
// return;
// //sendRequestFunc(0);
// };
const uploadFileChunks = async ( const uploadFileChunks = async (
location, location,
requestsDataArray, requestsDataArray,
@ -951,16 +930,17 @@ const uploadFileChunks = async (
console.log(`Uploaded chunk ${index}/${length}`, res); console.log(`Uploaded chunk ${index}/${length}`, res);
//let isLatestFile = indexOfFile === newFilesLength - 1; //let isLatestFile = indexOfFile === newFilesLength - 1;
//const fileId = res.data.data.id;
const uploadedSize = const { fileId, uploaded } = res.data.data;
res && res.data && res.data.data && res.data.data.uploaded
? fileSize const uploadedSize = uploaded ? fileSize : index * chunkSize;
: index * chunkSize;
const newPercent = getNewPercent(uploadedSize, indexOfFile, getState); const newPercent = getNewPercent(uploadedSize, indexOfFile, getState);
const newState = getState(); const newState = getState();
const { uploadedFiles, files } = newState.files.uploadData; const { uploadData } = newState.files;
const { uploadedFiles, files } = uploadData;
dispatch( dispatch(
setPrimaryProgressBarData({ setPrimaryProgressBarData({
@ -973,6 +953,12 @@ const uploadFileChunks = async (
visible: true, visible: true,
}) })
); );
if (uploaded) {
uploadData.files[indexOfFile].fileId = fileId;
dispatch(setUploadData(uploadData));
}
} }
// All chuncks are uploaded // All chuncks are uploaded
@ -1134,7 +1120,6 @@ const updateFiles = (folderId, dispatch, getState) => {
filesSize: 0, filesSize: 0,
convertFiles: [], convertFiles: [],
convertFilesSize: 0, convertFilesSize: 0,
uploadStatus: null,
uploadedFiles: 0, uploadedFiles: 0,
percent: 0, percent: 0,
uploaded: true, uploaded: true,
@ -1199,7 +1184,7 @@ const getConvertProgress = (
getState getState
) => { ) => {
const { uploadedFiles } = uploadData; const { uploadedFiles } = uploadData;
api.files.getConvertFile(fileId).then((res) => { api.files.getFileConversationProgress(fileId).then((res) => {
if (res && res[0] && res[0].progress !== 100) { if (res && res[0] && res[0].progress !== 100) {
setTimeout( setTimeout(
() => () =>
@ -1315,18 +1300,104 @@ export const setDialogVisible = (t) => {
}; };
}; };
export const onConvert = (t) => { export const convertUploadedFiles = (t) => {
return (dispatch, getState) => { return (dispatch, getState) => {
const { uploadData } = getState().files; const state = getState();
if (uploadData.uploaded) { const { uploadData } = state.files;
startSessionFunc(0, t, dispatch, getState);
const filesToConvert = getFilesToConvert(uploadData.files);
if (filesToConvert.length > 0) {
startConvertFiles(filesToConvert, t, dispatch, getState).then(() =>
finishUploadFiles(getState, dispatch)
);
} else {
finishUploadFiles(getState, dispatch);
}
};
};
const getConversationProgress = async (fileId) => {
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
try {
api.files
.getFileConversationProgress(fileId)
.then((res) => resolve(res));
} catch (error) {
console.error(error);
reject(error);
}
}, 1000);
});
return promise;
};
const startConvertFiles = async (files, t, dispatch, getState) => {
const total = files.length;
dispatch(setConvertDialogVisible(false));
dispatch(
setPrimaryProgressBarData({
icon: "file",
label: t("ConvertingLabel", {
file: 0,
totalFiles: total,
}),
percent: 0,
visible: true,
})
);
for (let index = 0; index < total; index++) {
const file = files[index];
const data = await api.files.convertFile(file.fileId);
if (data && data[0] && data[0].progress !== 100) {
let progress = data[0].progress;
while (progress < 100) {
const res = await getConversationProgress(file.fileId);
progress = res && res[0] && res[0].progress;
if (progress === 100) {
break;
} else {
//TODO: calculate local progress
// const percent = (progress) + (index / total) * 100;
// dispatch(
// setPrimaryProgressBarData({
// icon: "file",
// label: t("ConvertingLabel", {
// file: index + 1,
// totalFiles: total,
// }),
// percent: newPercent,
// visible: true,
// })
// );
} }
uploadData.uploadStatus = "convert"; //setTimeout(() => { console.log("Wait for a second...") }, 1000);
dispatch(setUploadData(uploadData)); }
dispatch(setConvertDialogVisible(false)); }
};
const newPercent = (index + 1 / total) * 100;
dispatch(
setPrimaryProgressBarData({
icon: "file",
label: t("ConvertingLabel", {
file: index + 1,
totalFiles: total,
}),
percent: newPercent,
visible: true,
})
);
}
}; };
export const setSelections = (items) => { export const setSelections = (items) => {

View File

@ -506,7 +506,7 @@ export function convertFile(fileId) {
}); });
} }
export function getConvertFile(fileId) { export function getFileConversationProgress(fileId) {
return request({ return request({
method: "get", method: "get",
url: `/files/file/${fileId}/checkconversion`, url: `/files/file/${fileId}/checkconversion`,