diff --git a/README.md b/README.md
index f1809e0..3407c0d 100644
--- a/README.md
+++ b/README.md
@@ -829,6 +829,8 @@ The `` component allows you to easily render Fine Uploader generate
- `waitingPlaceholder` - A custom element to display while waiting for the thumbnail.
+- `fromServer` - Specify whether the current file was set from [initial file](https://docs.fineuploader.com/branch/master/features/session.html)
+
Suppose you wanted to render a thumbnail for each file as new files are submitted to Fine Uploader. Your React component may look like this:
Note: This assumes you have additional components or code to allow files to actually be submitted to Fine Uploader.
diff --git a/package.json b/package.json
index ca27bb7..3170ac1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-fine-uploader",
- "version": "0.5.0",
+ "version": "0.6.0",
"license": "MIT",
"description": "React UI components for using Fine Uploader in a React-based project.",
"author": {
diff --git a/src/gallery/index.jsx b/src/gallery/index.jsx
index 952c7dc..3704eb5 100644
--- a/src/gallery/index.jsx
+++ b/src/gallery/index.jsx
@@ -53,9 +53,9 @@ class Gallery extends Component {
}
this._onStatusChange = (id, oldStatus, status) => {
- if (status === 'submitted') {
- const visibleFiles = this.state.visibleFiles
+ const visibleFiles = this.state.visibleFiles
+ if (status === 'submitted') {
visibleFiles.push({ id })
this.setState({ visibleFiles })
}
@@ -63,6 +63,12 @@ class Gallery extends Component {
this._removeVisibleFile(id)
}
else if (status === 'upload successful' || status === 'upload failed') {
+ if (status === 'upload successful') {
+ const visibleFileIndex = this._findFileIndex(id)
+ if (visibleFileIndex < 0) {
+ visibleFiles.push({ id, fromServer: true })
+ }
+ }
this._updateVisibleFileStatus(id, status)
}
}
@@ -116,7 +122,7 @@ class Gallery extends Component {
transitionName='react-fine-uploader-gallery-files'
>
{
- this.state.visibleFiles.map(({ id, status }) => (
+ this.state.visibleFiles.map(({ id, status, fromServer }) => (
@@ -127,6 +133,7 @@ class Gallery extends Component {
/>
@@ -196,14 +203,7 @@ class Gallery extends Component {
}
_removeVisibleFile(id) {
- let visibleFileIndex = -1
-
- this.state.visibleFiles.some((file, index) => {
- if (file.id === id) {
- visibleFileIndex = index
- return true
- }
- })
+ const visibleFileIndex = this._findFileIndex(id)
if (visibleFileIndex >= 0) {
const visibleFiles = this.state.visibleFiles
@@ -222,6 +222,19 @@ class Gallery extends Component {
}
})
}
+
+ _findFileIndex(id) {
+ let visibleFileIndex = -1
+
+ this.state.visibleFiles.some((file, index) => {
+ if (file.id === id) {
+ visibleFileIndex = index
+ return true
+ }
+ })
+
+ return visibleFileIndex
+ }
}
const MaybeDropzone = ({ children, content, hasVisibleFiles, uploader, ...props }) => {
diff --git a/src/test/unit/gallery.spec.jsx b/src/test/unit/gallery.spec.jsx
index a4d2225..c63bd55 100644
--- a/src/test/unit/gallery.spec.jsx
+++ b/src/test/unit/gallery.spec.jsx
@@ -9,6 +9,7 @@ import Gallery from 'src/gallery'
const isMobile = !!('ontouchstart' in window)
const sampleBlob = new Blob(['hi!'], { type : 'text/plain' })
const sampleBlobWrapper = { blob: sampleBlob, name: 'test' }
+const sampleCannedFile = { name: 'test', uuid: 'test uuid', thumbnailUrl: 'http://localhost/images/test.jpg' }
describe('', () => {
let uploader
@@ -106,4 +107,17 @@ describe('', () => {
}, 100)
}, 100)
})
+
+ it('renders a tile for each initial file', done => {
+ const GalleryComponent = TestUtils.renderIntoDocument()
+
+ uploader.methods.addInitialFiles([sampleCannedFile])
+
+ setTimeout(() => {
+ const tiles = TestUtils.scryRenderedDOMComponentsWithClass(GalleryComponent, 'react-fine-uploader-gallery-file')
+
+ expect(tiles.length).toBe(1)
+ done()
+ }, 100)
+ })
})
diff --git a/src/test/unit/thumbnail/index.spec.jsx b/src/test/unit/thumbnail/index.spec.jsx
index 440ae22..13c18b6 100644
--- a/src/test/unit/thumbnail/index.spec.jsx
+++ b/src/test/unit/thumbnail/index.spec.jsx
@@ -26,7 +26,7 @@ describe('', () => {
)
expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
- expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, defaultMaxSize)
+ expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, defaultMaxSize, undefined)
})
it('renders thumbnail as canvas using passed size', () => {
@@ -38,7 +38,19 @@ describe('', () => {
)
expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
- expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333)
+ expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333, undefined)
+ })
+
+ it('renders thumbnail as canvas using passed thumbnail origin', () => {
+ qqPromise.success()
+ drawThumbnail.and.returnValue(qqPromise)
+
+ const ThumbnailComponent = TestUtils.renderIntoDocument(
+
+ )
+
+ expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
+ expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333, true)
})
it('renders default waiting placeholder until thumbnail generation is complete', () => {
diff --git a/src/thumbnail/index.jsx b/src/thumbnail/index.jsx
index 2bc8e99..138985b 100644
--- a/src/thumbnail/index.jsx
+++ b/src/thumbnail/index.jsx
@@ -34,7 +34,8 @@ class Thumbnail extends Component {
this.props.uploader.methods.drawThumbnail(
this.props.id,
this.refs.canvas,
- this.props.maxSize
+ this.props.maxSize,
+ this.props.fromServer
)
.then(
() => {