@rpldy/upload-preview - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

lib/UploadPreview.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _consts = require("./consts");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -23,4 +25,2 @@
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -30,2 +30,16 @@
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var showBasicPreview = function showBasicPreview(type, url, previewProps, onImgError) {
+  return type === _consts.PREVIEW_TYPES.VIDEO ? _react["default"].createElement("video", _extends({
+    key: url,
+    src: url,
+    controls: true
+  }, previewProps)) : _react["default"].createElement("img", _extends({
+    key: url,
+    onError: onImgError,
+    src: url
+  }, previewProps));
+};
+
 var UploadPreview = function UploadPreview(props) {
@@ -52,7 +66,3 @@ var PreviewComponent = props.PreviewComponent,
       type: type
-    }, previewProps)) : _react["default"].createElement("img", _extends({
-      key: url,
-      onError: onImagePreviewLoadError,
-      src: url
-    }, previewProps));
+    }, previewProps)) : showBasicPreview(type, url, previewProps, onImagePreviewLoadError);
   });
@@ -59,0 +69,0 @@ };

package.json

 {
-  "version": "0.1.7",
+  "version": "0.1.8",
   "name": "@rpldy/upload-preview",
@@ -20,8 +20,8 @@ "description": "",
     "@rpldy/shared": "^0.1.7",
-    "@rpldy/shared-ui": "^0.1.7"
+    "@rpldy/shared-ui": "^0.1.8"
   },
   "devDependencies": {
     "@rpldy/sender": "^0.1.7",
-    "@rpldy/upload-button": "^0.1.7",
-    "@rpldy/upload-url-input": "^0.1.7",
+    "@rpldy/upload-button": "^0.1.8",
+    "@rpldy/upload-url-input": "^0.1.8",
     "@storybook/addon-knobs": "^5.3.18",
@@ -38,3 +38,3 @@ "flow-bin": "^0.121.0",
   },
-  "gitHead": "0ac67a2893ef3a684b8cf1834590035065340366"
+  "gitHead": "20fa09a7a5ffa89c05d892175d5d0d9b4d6821cf"
 }

README.md

 # Upload Preview
 
+Preview component to show image or video being uploaded.
 
-@rpldy/upload-preview
+By default, will present a preview of the file being uploaded in case its an image or video.
+ 
+## Installation
 
+```shell
+   $ yarn add @rpldy/uploady @rpldy/upload-preview 
+``` 
+
+Or 
+
+```shell
+   $ npm i @rpldy/uploady @rpldy/upload-preview 
+```
+
 ## Props
+
+| Name (* = mandatory) | Type          | Default       | Description  
+| --------------       | ------------- | ------------- | -------------
+| loadFirstOnly        | boolean       | false         | load preview only for the first item in a batch
+| maxPreviewImageSize  | number        | 2e+7          | maximum size of image to preview
+| maxPreviewVideoSize  | number        | 1e+8          | maximum size of video to preview
+| fallbackUrl          | string | [FallbackMethod](src/types.js#L16) | undefined | static URL or function that returns fallback in case failed to load preview or when file over max size
+| imageMimeTypes       | string[]      | [see list below](#default-image-types) | image mime types to load preview for
+| videoMimeTypes       | string[]      | [see list below](#default-video-types) | video mime types to load preview for
+| previewComponentProps | [PreviewComponentPropsOrMethod](src/types.js#L18) | undefined | object or function to generate object as additional props for the preview component
+| PreviewComponent      | React.ComponentType<any> | img &#124; video | The component that will show the preview
+ 
+## Example
+
+```javascript
+
+import React from "react";
+import Uploady from "@rpldy/uploady";
+import UploadPreview from "@rpldy/upload-preview";
+
+export const App = () => (
+     <Uploady>
+      
+        <UploadPreview
+            fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"/>
+    </Uploady>
+);
+```
+
+For an example of using a custom preview component see [this story](http://localhost:9111/?path=/story/upload-preview--with-progress). 
+
+## Default image types
+
+- "image/jpeg"
+- "image/webp"
+- "image/gif"
+- "image/png"
+- "image/apng"
+- "image/bmp"
+- "image/x-icon"
+- "image/svg+xml"
+
+## Default video types 
+
+- "video/mp4"
+- "video/webm"
+- "video/ogg"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36686

increased by9.27%

Lines of code

240

increased by3.45%

Number of lines in readme file

66

increased by842.86%

Dependency changes

• Updated@rpldy/shared-ui@^0.1.8