update list of mime types and move to common server and client file (#511)
Fixes #476 and fixes #450
This commit is contained in:
Cassie Tarakajian
GitHub
parent
c50f64c0f3
commit
6cd71acb81
5 changed files with 294 additions and 539 deletions
|
|
@ -3,6 +3,7 @@ import Dropzone from 'dropzone';
|
|||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import * as UploaderActions from '../actions/uploader';
|
||||
import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
|
||||
|
||||
const s3Bucket = process.env.S3_BUCKET_URL_BASE ||
|
||||
`https://s3-${process.env.AWS_REGION}.amazonaws.com/${process.env.S3_BUCKET}/`;
|
||||
|
|
@ -26,11 +27,7 @@ class FileUploader extends React.Component {
|
|||
maxThumbnailFilesize: 8, // 8 mb
|
||||
thumbnailWidth: 200,
|
||||
thumbnailHeight: 200,
|
||||
// TODO what is a good list of MIME types????
|
||||
acceptedFiles: `image/*,audio/*,text/javascript,text/html,text/css,
|
||||
application/json,application/x-font-ttf,application/x-font-truetype,
|
||||
text/plain,text/csv,.obj,video/webm,video/ogg,video/quicktime,video/mp4,
|
||||
.otf,.ttf`,
|
||||
acceptedFiles: fileExtensionsAndMimeTypes,
|
||||
dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
|
||||
accept: this.props.dropzoneAcceptCallback.bind(this, userId),
|
||||
sending: this.props.dropzoneSendingCallback,
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@ import loopProtect from 'loop-protect';
|
|||
import { JSHINT } from 'jshint';
|
||||
import { getBlobUrl } from '../actions/files';
|
||||
import { resolvePathToFile } from '../../../../server/utils/filePath';
|
||||
import {
|
||||
MEDIA_FILE_REGEX,
|
||||
MEDIA_FILE_QUOTED_REGEX,
|
||||
STRING_REGEX,
|
||||
TEXT_FILE_REGEX,
|
||||
EXTERNAL_LINK_REGEX,
|
||||
NOT_EXTERNAL_LINK_REGEX
|
||||
} from '../../../../server/utils/fileUtils';
|
||||
|
||||
const decomment = require('decomment');
|
||||
|
||||
const startTag = '@fs-';
|
||||
// eslint-disable-next-line max-len
|
||||
const MEDIA_FILE_REGEX = /^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json|txt|csv|svg|obj|mp4|ogg|webm|mov|otf|ttf|m4a)('|")$/i;
|
||||
// eslint-disable-next-line max-len
|
||||
const MEDIA_FILE_REGEX_NO_QUOTES = /^(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json|txt|csv|svg|obj|mp4|ogg|webm|mov|otf|ttf|m4a)$/i;
|
||||
const STRING_REGEX = /(['"])((\\\1|.)*?)\1/gm;
|
||||
const TEXT_FILE_REGEX = /(.+\.json$|.+\.txt$|.+\.csv$)/i;
|
||||
const NOT_EXTERNAL_LINK_REGEX = /^(?!(http:\/\/|https:\/\/))/;
|
||||
const EXTERNAL_LINK_REGEX = /^(http:\/\/|https:\/\/)/;
|
||||
|
||||
function getAllScriptOffsets(htmlFile) {
|
||||
const offs = [];
|
||||
|
|
@ -263,9 +263,9 @@ class PreviewFrame extends React.Component {
|
|||
const elements = sketchDoc.querySelectorAll(`[${attr}]`);
|
||||
const elementsArray = Array.prototype.slice.call(elements);
|
||||
elementsArray.forEach((element) => {
|
||||
if (element.getAttribute(attr).match(MEDIA_FILE_REGEX_NO_QUOTES)) {
|
||||
if (element.getAttribute(attr).match(MEDIA_FILE_REGEX)) {
|
||||
const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
|
||||
if (resolvedFile) {
|
||||
if (resolvedFile && resolvedFile.url) {
|
||||
element.setAttribute(attr, resolvedFile.url);
|
||||
}
|
||||
}
|
||||
|
|
@ -291,7 +291,7 @@ class PreviewFrame extends React.Component {
|
|||
let jsFileStrings = content.match(STRING_REGEX);
|
||||
jsFileStrings = jsFileStrings || [];
|
||||
jsFileStrings.forEach((jsFileString) => {
|
||||
if (jsFileString.match(MEDIA_FILE_REGEX)) {
|
||||
if (jsFileString.match(MEDIA_FILE_QUOTED_REGEX)) {
|
||||
const filePath = jsFileString.substr(1, jsFileString.length - 2);
|
||||
const resolvedFile = resolvePathToFile(filePath, files);
|
||||
if (resolvedFile) {
|
||||
|
|
@ -315,7 +315,7 @@ class PreviewFrame extends React.Component {
|
|||
let cssFileStrings = content.match(STRING_REGEX);
|
||||
cssFileStrings = cssFileStrings || [];
|
||||
cssFileStrings.forEach((cssFileString) => {
|
||||
if (cssFileString.match(MEDIA_FILE_REGEX)) {
|
||||
if (cssFileString.match(MEDIA_FILE_QUOTED_REGEX)) {
|
||||
const filePath = cssFileString.substr(1, cssFileString.length - 2);
|
||||
const resolvedFile = resolvePathToFile(filePath, files);
|
||||
if (resolvedFile) {
|
||||
|
|
|
|||
753
package-lock.json
generated
753
package-lock.json
generated
File diff suppressed because it is too large
Load diff
24
server/utils/fileUtils.js
Normal file
24
server/utils/fileUtils.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
|
||||
export const fileExtensionsArray = ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'wav', 'flac', 'ogg',
|
||||
'oga', 'mp4', 'm4p', 'mp3', 'm4a', 'aiff', 'aif', 'm4v', 'aac', 'webm', 'mpg', 'mp2',
|
||||
'mpeg', 'mpe', 'mpv', 'js', 'jsx', 'html', 'htm', 'css', 'json', 'csv', 'obj', 'svg',
|
||||
'otf', 'ttf', 'txt', 'mov'];
|
||||
|
||||
export const mimeTypes = `image/*,audio/*,text/javascript,text/html,text/css,
|
||||
application/json,application/x-font-ttf,application/x-font-truetype,text/plain,
|
||||
text/csv,.obj,video/webm,video/ogg,video/quicktime,video/mp4`;
|
||||
|
||||
export const fileExtensions = fileExtensionsArray.map(ext => `.${ext}`).join(',');
|
||||
export const fileExtensionsAndMimeTypes = `${fileExtensions},${mimeTypes}`;
|
||||
|
||||
export const MEDIA_FILE_REGEX =
|
||||
new RegExp(`^(?!(http:\\/\\/|https:\\/\\/)).*\\.(${fileExtensionsArray.join('|')})$`, 'i');
|
||||
|
||||
export const MEDIA_FILE_QUOTED_REGEX =
|
||||
new RegExp(`^('|")(?!(http:\\/\\/|https:\\/\\/)).*\\.(${fileExtensionsArray.join('|')})('|")$`, 'i');
|
||||
|
||||
export const STRING_REGEX = /(['"])((\\\1|.)*?)\1/gm;
|
||||
export const TEXT_FILE_REGEX = /(.+\.json$|.+\.txt$|.+\.csv$)/i;
|
||||
export const NOT_EXTERNAL_LINK_REGEX = /^(?!(http:\/\/|https:\/\/))/;
|
||||
export const EXTERNAL_LINK_REGEX = /^(http:\/\/|https:\/\/)/;
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import { resolvePathToFile } from '../utils/filePath';
|
||||
// eslint-disable-next-line max-len
|
||||
const MEDIA_FILE_REGEX_NO_QUOTES = /^(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json|txt|csv|svg|obj|mp4|ogg|webm|mov|otf|ttf|m4a)$/i;
|
||||
const STRING_REGEX = /(['"])((\\\1|.)*?)\1/gm;
|
||||
const EXTERNAL_LINK_REGEX = /^(http:\/\/|https:\/\/)/;
|
||||
const NOT_EXTERNAL_LINK_REGEX = /^(?!(http:\/\/|https:\/\/))/;
|
||||
|
||||
import {
|
||||
MEDIA_FILE_REGEX,
|
||||
STRING_REGEX,
|
||||
TEXT_FILE_REGEX,
|
||||
EXTERNAL_LINK_REGEX,
|
||||
NOT_EXTERNAL_LINK_REGEX
|
||||
} from './fileUtils';
|
||||
|
||||
function resolveLinksInString(content, files, projectId) {
|
||||
let newContent = content;
|
||||
|
|
@ -18,7 +21,7 @@ function resolveLinksInString(content, files, projectId) {
|
|||
if (resolvedFile) {
|
||||
if (resolvedFile.url) {
|
||||
newContent = newContent.replace(filePath, resolvedFile.url);
|
||||
} else if (resolvedFile.name.match(/(.+\.json$|.+\.txt$|.+\.csv$)/i)) {
|
||||
} else if (resolvedFile.name.match(TEXT_FILE_REGEX)) {
|
||||
let resolvedFilePath = filePath;
|
||||
if (resolvedFilePath.startsWith('.')) {
|
||||
resolvedFilePath = resolvedFilePath.substr(1);
|
||||
|
|
@ -44,9 +47,9 @@ export function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
|
|||
const elements = sketchDoc.querySelectorAll(`[${attr}]`);
|
||||
const elementsArray = Array.prototype.slice.call(elements);
|
||||
elementsArray.forEach((element) => {
|
||||
if (element.getAttribute(attr).match(MEDIA_FILE_REGEX_NO_QUOTES)) {
|
||||
if (element.getAttribute(attr).match(MEDIA_FILE_REGEX)) {
|
||||
const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
|
||||
if (resolvedFile) {
|
||||
if (resolvedFile && resolvedFile.url) {
|
||||
element.setAttribute(attr, resolvedFile.url);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue