Add changes for asset upload limit, after cherry-picking changes from asset-limit-with-lambda
This commit is contained in:
parent
59fe175ede
commit
1107f7352a
10 changed files with 32 additions and 36 deletions
|
@ -75,9 +75,10 @@ export function closeNewFileModal() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function openUploadFileModal() {
|
export function openUploadFileModal(parentId) {
|
||||||
return {
|
return {
|
||||||
type: ActionTypes.OPEN_UPLOAD_FILE_MODAL
|
type: ActionTypes.OPEN_UPLOAD_FILE_MODAL,
|
||||||
|
parentId
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -127,7 +127,8 @@ AssetListRowBase.propTypes = {
|
||||||
url: PropTypes.string.isRequired,
|
url: PropTypes.string.isRequired,
|
||||||
sketchId: PropTypes.string,
|
sketchId: PropTypes.string,
|
||||||
sketchName: PropTypes.string,
|
sketchName: PropTypes.string,
|
||||||
name: PropTypes.string.isRequired
|
name: PropTypes.string.isRequired,
|
||||||
|
size: PropTypes.number.isRequired
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
deleteAssetRequest: PropTypes.func.isRequired,
|
deleteAssetRequest: PropTypes.func.isRequired,
|
||||||
username: PropTypes.string.isRequired
|
username: PropTypes.string.isRequired
|
||||||
|
@ -172,13 +173,9 @@ class AssetList extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { assetList, totalSize } = this.props;
|
const { assetList } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className="asset-table-container">
|
<div className="asset-table-container">
|
||||||
{/* Eventually, this copy should be Total / 250 MB Used */}
|
|
||||||
{this.hasAssets() && totalSize &&
|
|
||||||
<p className="asset-table__total">{`${prettyBytes(totalSize)} Total`}</p>
|
|
||||||
}
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{this.getAssetsTitle()}</title>
|
<title>{this.getAssetsTitle()}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
@ -214,20 +211,14 @@ AssetList.propTypes = {
|
||||||
sketchName: PropTypes.string,
|
sketchName: PropTypes.string,
|
||||||
sketchId: PropTypes.string
|
sketchId: PropTypes.string
|
||||||
})).isRequired,
|
})).isRequired,
|
||||||
totalSize: PropTypes.number,
|
|
||||||
getAssets: PropTypes.func.isRequired,
|
getAssets: PropTypes.func.isRequired,
|
||||||
loading: PropTypes.bool.isRequired
|
loading: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
AssetList.defaultProps = {
|
|
||||||
totalSize: undefined
|
|
||||||
};
|
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
return {
|
return {
|
||||||
user: state.user,
|
user: state.user,
|
||||||
assetList: state.assets.list,
|
assetList: state.assets.list,
|
||||||
totalSize: state.user.totalSize,
|
|
||||||
loading: state.loading
|
loading: state.loading
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,9 @@ import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import prettyBytes from 'pretty-bytes';
|
import prettyBytes from 'pretty-bytes';
|
||||||
|
|
||||||
const MB_TO_B = 1000 * 1000;
|
const __process = (typeof global !== 'undefined' ? global : window).process;
|
||||||
const MAX_SIZE_B = 250 * MB_TO_B;
|
const limit = __process.env.UPLOAD_LIMIT || 250000000;
|
||||||
|
const MAX_SIZE_B = limit;
|
||||||
|
|
||||||
const formatPercent = (percent) => {
|
const formatPercent = (percent) => {
|
||||||
const percentUsed = percent * 100;
|
const percentUsed = percent * 100;
|
||||||
|
@ -17,7 +18,7 @@ const formatPercent = (percent) => {
|
||||||
|
|
||||||
/* Eventually, this copy should be Total / 250 MB Used */
|
/* Eventually, this copy should be Total / 250 MB Used */
|
||||||
const AssetSize = ({ totalSize }) => {
|
const AssetSize = ({ totalSize }) => {
|
||||||
if (!totalSize) {
|
if (totalSize === undefined) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -25,9 +26,10 @@ const AssetSize = ({ totalSize }) => {
|
||||||
const sizeLimit = prettyBytes(MAX_SIZE_B);
|
const sizeLimit = prettyBytes(MAX_SIZE_B);
|
||||||
const percentValue = totalSize / MAX_SIZE_B;
|
const percentValue = totalSize / MAX_SIZE_B;
|
||||||
const percent = formatPercent(percentValue);
|
const percent = formatPercent(percentValue);
|
||||||
|
const percentSize = percentValue < 1 ? percentValue : 1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="asset-size" style={{ '--percent': percentValue }}>
|
<div className="asset-size" style={{ '--percent': percentSize }}>
|
||||||
<div className="asset-size-bar" />
|
<div className="asset-size-bar" />
|
||||||
<p className="asset-current">{currentSize} ({percent})</p>
|
<p className="asset-current">{currentSize} ({percent})</p>
|
||||||
<p className="asset-max">Max: {sizeLimit}</p>
|
<p className="asset-max">Max: {sizeLimit}</p>
|
||||||
|
@ -42,7 +44,7 @@ AssetSize.propTypes = {
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
return {
|
return {
|
||||||
user: state.user,
|
user: state.user,
|
||||||
totalSize: state.assets.totalSize,
|
totalSize: state.user.totalSize || state.assets.totalSize,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -30,7 +30,7 @@ class FileUploader extends React.Component {
|
||||||
thumbnailWidth: 200,
|
thumbnailWidth: 200,
|
||||||
thumbnailHeight: 200,
|
thumbnailHeight: 200,
|
||||||
acceptedFiles: fileExtensionsAndMimeTypes,
|
acceptedFiles: fileExtensionsAndMimeTypes,
|
||||||
dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
|
dictDefaultMessage: 'Drop files here or click to use the file browser',
|
||||||
accept: this.props.dropzoneAcceptCallback.bind(this, userId),
|
accept: this.props.dropzoneAcceptCallback.bind(this, userId),
|
||||||
sending: this.props.dropzoneSendingCallback,
|
sending: this.props.dropzoneSendingCallback,
|
||||||
complete: this.props.dropzoneCompleteCallback
|
complete: this.props.dropzoneCompleteCallback
|
||||||
|
|
|
@ -117,7 +117,7 @@ class Sidebar extends React.Component {
|
||||||
<button
|
<button
|
||||||
aria-label="upload file"
|
aria-label="upload file"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
this.props.openUploadFileModal();
|
this.props.openUploadFileModal(rootFile.id);
|
||||||
setTimeout(this.props.closeProjectOptions, 0);
|
setTimeout(this.props.closeProjectOptions, 0);
|
||||||
}}
|
}}
|
||||||
onBlur={this.onBlurComponent}
|
onBlur={this.onBlurComponent}
|
||||||
|
|
|
@ -3,11 +3,15 @@ import PropTypes from 'prop-types';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
import InlineSVG from 'react-inlinesvg';
|
import InlineSVG from 'react-inlinesvg';
|
||||||
|
import prettyBytes from 'pretty-bytes';
|
||||||
import FileUploader from './FileUploader';
|
import FileUploader from './FileUploader';
|
||||||
import { getreachedTotalSizeLimit } from '../selectors/users';
|
import { getreachedTotalSizeLimit } from '../selectors/users';
|
||||||
|
|
||||||
import exitUrl from '../../../images/exit.svg';
|
import exitUrl from '../../../images/exit.svg';
|
||||||
|
|
||||||
|
const __process = (typeof global !== 'undefined' ? global : window).process;
|
||||||
|
const limit = __process.env.UPLOAD_LIMIT || 250000000;
|
||||||
|
const limitText = prettyBytes(limit);
|
||||||
|
|
||||||
class UploadFileModal extends React.Component {
|
class UploadFileModal extends React.Component {
|
||||||
propTypes = {
|
propTypes = {
|
||||||
reachedTotalSizeLimit: PropTypes.bool.isRequired,
|
reachedTotalSizeLimit: PropTypes.bool.isRequired,
|
||||||
|
@ -36,12 +40,12 @@ class UploadFileModal extends React.Component {
|
||||||
{ this.props.reachedTotalSizeLimit &&
|
{ this.props.reachedTotalSizeLimit &&
|
||||||
<p>
|
<p>
|
||||||
{
|
{
|
||||||
`Error: You cannot upload any more files. You have reached the total size limit of 250MB.
|
`Error: You cannot upload any more files. You have reached the total size limit of ${limitText}.
|
||||||
If you would like to upload more, please remove the ones you aren't using anymore by
|
If you would like to upload more, please remove the ones you aren't using anymore by
|
||||||
in your `
|
in your `
|
||||||
}
|
}
|
||||||
<Link to="/assets">assets</Link>
|
<Link to="/assets" onClick={this.props.closeModal}>assets</Link>
|
||||||
{'.'}
|
.
|
||||||
</p>
|
</p>
|
||||||
}
|
}
|
||||||
{ !this.props.reachedTotalSizeLimit &&
|
{ !this.props.reachedTotalSizeLimit &&
|
||||||
|
|
|
@ -2,13 +2,14 @@ import * as ActionTypes from '../../../constants';
|
||||||
|
|
||||||
// 1,000,000 bytes in a MB. can't upload if totalSize is bigger than this.
|
// 1,000,000 bytes in a MB. can't upload if totalSize is bigger than this.
|
||||||
const initialState = {
|
const initialState = {
|
||||||
list: []
|
list: [],
|
||||||
|
totalSize: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
const assets = (state = initialState, action) => {
|
const assets = (state = initialState, action) => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case ActionTypes.SET_ASSETS:
|
case ActionTypes.SET_ASSETS:
|
||||||
return { list: action.assets };
|
return { list: action.assets, totalSize: action.totalSize };
|
||||||
case ActionTypes.DELETE_ASSET:
|
case ActionTypes.DELETE_ASSET:
|
||||||
return { list: state.list.filter(asset => asset.key !== action.key) };
|
return { list: state.list.filter(asset => asset.key !== action.key) };
|
||||||
default:
|
default:
|
||||||
|
|
|
@ -107,7 +107,7 @@ const ide = (state = initialState, action) => {
|
||||||
case ActionTypes.SHOW_RUNTIME_ERROR_WARNING:
|
case ActionTypes.SHOW_RUNTIME_ERROR_WARNING:
|
||||||
return Object.assign({}, state, { runtimeErrorWarningVisible: true });
|
return Object.assign({}, state, { runtimeErrorWarningVisible: true });
|
||||||
case ActionTypes.OPEN_UPLOAD_FILE_MODAL:
|
case ActionTypes.OPEN_UPLOAD_FILE_MODAL:
|
||||||
return Object.assign({}, state, { uploadFileModalVisible: true });
|
return Object.assign({}, state, { uploadFileModalVisible: true, parentId: action.parentId });
|
||||||
case ActionTypes.CLOSE_UPLOAD_FILE_MODAL:
|
case ActionTypes.CLOSE_UPLOAD_FILE_MODAL:
|
||||||
return Object.assign({}, state, { uploadFileModalVisible: false });
|
return Object.assign({}, state, { uploadFileModalVisible: false });
|
||||||
default:
|
default:
|
||||||
|
|
|
@ -37,15 +37,12 @@
|
||||||
|
|
||||||
.asset-current {
|
.asset-current {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 28px;
|
top: #{28 / $base-font-size}rem;
|
||||||
left: calc(200px * var(--percent));
|
left: 0;
|
||||||
margin-left: -8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.asset-max {
|
.asset-max {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: #{210 / $base-font-size}rem;
|
||||||
transform: translate(210%); // align max label to right of asset-size-bar
|
|
||||||
padding-left: #{8 / $base-font-size}rem;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,7 +31,7 @@ export function renderIndex() {
|
||||||
window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
|
window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
|
||||||
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
|
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
|
||||||
window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
|
window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
|
||||||
window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT === 'false' ? false : true};
|
window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
Loading…
Reference in a new issue