zan-upload - npm Package Compare versions

Comparing version 4.3.2 to 4.4.1

examples/localOnly.js

@@ -28,2 +28,4 @@ import React, { Component } from 'react';
         localOnly
+        fetchUrl="/fetch.json"
+        tokenUrl="/token.json"
       />
@@ -30,0 +32,0 @@ );

examples/materials.js

@@ -36,2 +36,4 @@ import React, { Component } from 'react';
         onSuccess={this.uploadSuccess}
+        fetchUrl="/fetch.json"
+        tokenUrl="/token.json"
       />
@@ -38,0 +40,0 @@ );

examples/simple.js

@@ -31,2 +31,4 @@ import React, { Component } from 'react';
         onError={this.uploadError}
+        fetchUrl="/fetch.json"
+        tokenUrl="/token.json"
       />
@@ -33,0 +35,0 @@ );

lib/components/UploadLocal.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _fileType = require('file-type');
+
+var _fileType2 = _interopRequireDefault(_fileType);
+
 var _utils = require('../utils');
@@ -62,3 +66,3 @@
 
-var addFile = function addFile(file) {
+var addFile = function addFile(file, options) {
   return new Promise(function (resolve) {
@@ -68,6 +72,12 @@ var fileReader = new FileReader();
     fileReader.onload = function (e) {
-      resolve({
-        src: e.target.result,
-        file: file
-      });
+      var mimeType = (0, _fileType2['default'])((0, _utils.base64ToArrayBuffer)(e.target.result.replace(/^(.*?)base64,/, '')));
+      if (options.accept && options.accept.indexOf(mimeType.mime) > -1) {
+        resolve({
+          src: e.target.result,
+          file: file
+        });
+      } else {
+        !options.silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u7C7B\u578B\u4E0D\u6B63\u786E\u7684' + (options.type === 'voice' ? '音频' : '图片') + '\u6587\u4EF6');
+        resolve();
+      }
     };
@@ -86,5 +96,5 @@
     if (!maxSize || file.size <= maxSize) {
-      localFilesPromise.push(addFile(file));
+      localFilesPromise.push(addFile(file, options));
     } else {
-      !options.silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u5927\u4E8E' + (0, _utils.formatFileSize)(maxSize) + '\u7684\u56FE\u7247\u6587\u4EF6');
+      !options.silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u5927\u4E8E' + (0, _utils.formatFileSize)(maxSize) + '\u7684' + (options.type === 'voice' ? '音频' : '图片') + '\u6587\u4EF6');
     }
@@ -101,2 +111,5 @@ });
   Promise.all(localFilesPromise).then(function (values) {
+    values = values.filter(function (item) {
+      return item;
+    });
     if (!(values && values.length > 0)) return;
@@ -103,0 +116,0 @@

lib/components/UploadPopup.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _fileType = require('file-type');
+
+var _fileType2 = _interopRequireDefault(_fileType);
+
 var _FileInput = require('./FileInput');
@@ -315,6 +319,7 @@
 
+      var typeName = options.type === 'voice' ? '音频' : '图片';
 
       ArrayForEach.call(files, function (file, index) {
         if (maxAmount && index >= maxAmount) {
-          !silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u8D85\u8FC7' + options.maxAmount + '\u5F20\u7684\u56FE\u7247\u6587\u4EF6');
+          !silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u8D85\u8FC7' + options.maxAmount + '\u5F20\u7684' + typeName + '\u6587\u4EF6');
           return false;
@@ -325,3 +330,3 @@ }
         } else {
-          !silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u5927\u4E8E' + (0, _utils.formatFileSize)(maxSize) + '\u7684\u56FE\u7247\u6587\u4EF6');
+          !silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u5927\u4E8E' + (0, _utils.formatFileSize)(maxSize) + '\u7684' + typeName + '\u6587\u4EF6');
         }
@@ -360,2 +365,3 @@ });
       var fileReader = new FileReader();
+      var options = this.props.options;
       var localFiles = this.state.localFiles;
@@ -365,6 +371,11 @@
       fileReader.onload = function (e) {
-        localFiles.push({
-          src: e.target.result,
-          file: file
-        });
+        var mimeType = (0, _fileType2['default'])((0, _utils.base64ToArrayBuffer)(e.target.result.replace(/^(.*?)base64,/, '')));
+        if (options.accept && options.accept.indexOf(mimeType.mime) > -1) {
+          localFiles.push({
+            src: e.target.result,
+            file: file
+          });
+        } else {
+          !options.silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u7C7B\u578B\u4E0D\u6B63\u786E\u7684' + (options.type === 'voice' ? '音频' : '图片') + '\u6587\u4EF6');
+        }
         _this5.setState({
@@ -371,0 +382,0 @@ localFiles: localFiles

lib/Upload.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -293,4 +297,4 @@
   categoryListUrl: '//materials.youzan.com/category/categoryList.json',
-  fetchUrl: '//materials.youzan.com/dock/fetch.json',
-  tokenUrl: '//materials.youzan.com/dock/token.json',
+  // fetchUrl: '//materials.youzan.com/dock/fetch.json',
+  // tokenUrl: '//materials.youzan.com/dock/token.json',
   uploadUrl: '//upload.qbox.me',
@@ -309,3 +313,8 @@ filterFiles: noop,
 
+Upload.propTypes = {
+  fetchUrl: _propTypes2['default'].string.isRequired,
+  tokenUrl: _propTypes2['default'].string.isRequired
+};
+
 exports['default'] = Upload;
 module.exports = exports['default'];

lib/utils/index.js

@@ -13,2 +13,3 @@ 'use strict';
 exports.isPromiseLike = isPromiseLike;
+exports.base64ToArrayBuffer = base64ToArrayBuffer;
 
@@ -115,2 +116,12 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
   return typeof proto.then === 'function';
+}
+
+function base64ToArrayBuffer(base64) {
+  var binary_string = window.atob(base64);
+  var len = binary_string.length;
+  var bytes = new Uint8Array(len);
+  for (var i = 0; i < len; i++) {
+    bytes[i] = binary_string.charCodeAt(i);
+  }
+  return bytes.buffer;
 }

package.json

 {
   "name": "zan-upload",
-  "version": "4.3.2",
+  "version": "4.4.1",
   "description": "这是一个React组件",
@@ -28,2 +28,3 @@ "main": "./lib/index.js",
     "classnames": "^2.2.5",
+    "file-type": "^7.2.0",
     "object-assign": "^4.1.0",
@@ -30,0 +31,0 @@ "zan-pc-ajax": "^4.0.5",

src/components/UploadLocal.js

 import { Notify } from 'zent';
 import ajax from 'zan-pc-ajax';
-import { formatFileSize, responseParse, isPromiseLike } from '../utils';
+import fileType from 'file-type';
+import {
+  formatFileSize,
+  responseParse,
+  isPromiseLike,
+  base64ToArrayBuffer
+} from '../utils';
 
@@ -43,3 +49,3 @@ let localFilesPromise = [];
 
-const addFile = file => {
+const addFile = (file, options) => {
   return new Promise(resolve => {
@@ -49,6 +55,17 @@ let fileReader = new FileReader();
     fileReader.onload = e => {
-      resolve({
-        src: e.target.result,
-        file
-      });
+      const mimeType = fileType(
+        base64ToArrayBuffer(e.target.result.replace(/^(.*?)base64,/, ''))
+      );
+      if (options.accept && options.accept.indexOf(mimeType.mime) > -1) {
+        resolve({
+          src: e.target.result,
+          file
+        });
+      } else {
+        !options.silent &&
+          Notify.error(
+            `已经自动过滤类型不正确的${options.type === 'voice' ? '音频' : '图片'}文件`
+          );
+        resolve();
+      }
     };
@@ -66,6 +83,10 @@
     if (!maxSize || file.size <= maxSize) {
-      localFilesPromise.push(addFile(file));
+      localFilesPromise.push(addFile(file, options));
     } else {
       !options.silent &&
-        Notify.error(`已经自动过滤大于${formatFileSize(maxSize)}的图片文件`);
+        Notify.error(
+          `已经自动过滤大于${formatFileSize(maxSize)}的${options.type === 'voice'
+            ? '音频'
+            : '图片'}文件`
+        );
     }
@@ -82,2 +103,3 @@ });
   Promise.all(localFilesPromise).then(values => {
+    values = values.filter(item => item);
     if (!(values && values.length > 0)) return;
@@ -84,0 +106,0 @@

src/components/UploadPopup.js

@@ -7,5 +7,6 @@ /**
 import { Button, Input, Notify } from 'zent';
+import fileType from 'file-type';
 import FileInput from './FileInput';
 import uploadLocalImage from './UploadLocal';
-import { formatFileSize, isPromiseLike } from '../utils';
+import { formatFileSize, isPromiseLike, base64ToArrayBuffer } from '../utils';
 import ajax from 'zan-pc-ajax';
@@ -204,6 +205,7 @@
     const { maxSize, silent, maxAmount } = options;
+    const typeName = options.type === 'voice' ? '音频' : '图片';
 
     ArrayForEach.call(files, (file, index) => {
       if (maxAmount && index >= maxAmount) {
-        !silent && Notify.error(`已经自动过滤超过${options.maxAmount}张的图片文件`);
+        !silent && Notify.error(`已经自动过滤超过${options.maxAmount}张的${typeName}文件`);
         return false;
@@ -214,3 +216,4 @@ }
       } else {
-        !silent && Notify.error(`已经自动过滤大于${formatFileSize(maxSize)}的图片文件`);
+        !silent &&
+          Notify.error(`已经自动过滤大于${formatFileSize(maxSize)}的${typeName}文件`);
       }
@@ -242,9 +245,20 @@ });
     let fileReader = new FileReader();
+    let { options } = this.props;
     let { localFiles } = this.state;
 
     fileReader.onload = e => {
-      localFiles.push({
-        src: e.target.result,
-        file
-      });
+      const mimeType = fileType(
+        base64ToArrayBuffer(e.target.result.replace(/^(.*?)base64,/, ''))
+      );
+      if (options.accept && options.accept.indexOf(mimeType.mime) > -1) {
+        localFiles.push({
+          src: e.target.result,
+          file
+        });
+      } else {
+        !options.silent &&
+          Notify.error(
+            `已经自动过滤类型不正确的${options.type === 'voice' ? '音频' : '图片'}文件`
+          );
+      }
       this.setState({
@@ -251,0 +265,0 @@ localFiles

src/Upload.js

@@ -8,2 +8,3 @@ /**
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -92,9 +93,9 @@ import { Tabs, Dialog } from 'zent';
           {children || (Node && <Node />) || <span>+</span>}
-          {uploadOptions.localOnly && uploadOptions.maxAmount === 1
-            ? <FileInput {...uploadOptions} />
-            : ''}
+          {uploadOptions.localOnly && uploadOptions.maxAmount === 1 ? (
+            <FileInput {...uploadOptions} />
+          ) : (
+            ''
+          )}
         </div>
-        <p className={`${prefix}-upload-tips`}>
-          {tips}
-        </p>
+        <p className={`${prefix}-upload-tips`}>{tips}</p>
         <Dialog
@@ -106,8 +107,10 @@ title={`${this.typeName}选择`}
         >
-          {materials
-            ? <Tabs activeId={activeId} onTabChange={this.onTabChange}>
-                {this.renderMaterialsPopup(uploadOptions)}
-                {this.renderUploadPopup(uploadOptions)}
-              </Tabs>
-            : this.renderUploadPopup(uploadOptions)}
+          {materials ? (
+            <Tabs activeId={activeId} onTabChange={this.onTabChange}>
+              {this.renderMaterialsPopup(uploadOptions)}
+              {this.renderUploadPopup(uploadOptions)}
+            </Tabs>
+          ) : (
+            this.renderUploadPopup(uploadOptions)
+          )}
         </Dialog>
@@ -123,12 +126,14 @@ </div>
     const { prefix, className, materials } = this.props;
-    return materials
-      ? <TabPanel tab={`我的${this.typeName}`} id="materials">
-          <MaterialsPopup
-            prefix={`${prefix}-upload`}
-            options={options}
-            className={className}
-            showUploadPopup={this.showUpload}
-          />
-        </TabPanel>
-      : '';
+    return materials ? (
+      <TabPanel tab={`我的${this.typeName}`} id="materials">
+        <MaterialsPopup
+          prefix={`${prefix}-upload`}
+          options={options}
+          className={className}
+          showUploadPopup={this.showUpload}
+        />
+      </TabPanel>
+    ) : (
+      ''
+    );
   }
@@ -146,13 +151,5 @@
 
-    return materials
-      ? <TabPanel tab="本地上传" id="upload">
-          <UploadPopup
-            prefix={`${prefix}-upload`}
-            options={options}
-            accept={accept}
-            className={className}
-            showUploadPopup={this.showUpload}
-          />
-        </TabPanel>
-      : <UploadPopup
+    return materials ? (
+      <TabPanel tab="本地上传" id="upload">
+        <UploadPopup
           prefix={`${prefix}-upload`}
@@ -163,3 +160,13 @@ options={options}
           showUploadPopup={this.showUpload}
-        />;
+        />
+      </TabPanel>
+    ) : (
+      <UploadPopup
+        prefix={`${prefix}-upload`}
+        options={options}
+        accept={accept}
+        className={className}
+        showUploadPopup={this.showUpload}
+      />
+    );
   }
@@ -214,4 +221,4 @@
   categoryListUrl: '//materials.youzan.com/category/categoryList.json',
-  fetchUrl: '//materials.youzan.com/dock/fetch.json',
-  tokenUrl: '//materials.youzan.com/dock/token.json',
+  // fetchUrl: '//materials.youzan.com/dock/fetch.json',
+  // tokenUrl: '//materials.youzan.com/dock/token.json',
   uploadUrl: '//upload.qbox.me',
@@ -230,2 +237,7 @@ filterFiles: noop,
 
+Upload.propTypes = {
+  fetchUrl: PropTypes.string.isRequired,
+  tokenUrl: PropTypes.string.isRequired
+};
+
 export default Upload;

src/utils/index.js

@@ -38,3 +38,3 @@ /**
   let secondPart = duration % 60;
-  let minutePart = ((duration - secondPart) / 60) % 60;
+  let minutePart = (duration - secondPart) / 60 % 60;
   let hourPart = (duration - minutePart * 60 - secondPart) / 3600;
@@ -101,1 +101,11 @@
 }
+
+export function base64ToArrayBuffer(base64) {
+  let binary_string = window.atob(base64);
+  let len = binary_string.length;
+  let bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binary_string.charCodeAt(i);
+  }
+  return bytes.buffer;
+}

No alert changes

Improved metrics

Total package byte prevSize

842989

increased by2.63%

Lines of code

23457

increased by3.43%

Worsened metrics

Dependency count

5

increased by25%

Number of low supply chain risk alerts

13

increased by8.33%

Dependency changes

• + Addedfile-type@^7.2.0

• + Addedfile-type@7.7.1(transitive)