{@_renderRemoveIcon()}
else if @_isDownloading() and @_canAbortDownload()
-
+
{@_renderRemoveIcon()}
else
-
+
{@_renderDownloadButton()}
_downloadProgressStyle: =>
width: "#{@props.download?.percent ? 0}%"
- _onClickRemove: =>
- Actions.removeFile
- file: @props.file
- messageLocalId: @props.messageLocalId
-
_canAbortDownload: -> true
- _renderRemoveIcon: ->
-
-
-
-
+
+
+
+
-
- {@_renderFileActions()}
-
+ {@_renderFileActions()}
-
-
e.preventDefault()
+
+ # Accept drops of real files from other applications
for file in e.dataTransfer.files
Actions.attachFilePath({path: file.path, messageLocalId: @props.localId})
+
+ # Accept drops from attachment components within the app
+ if "text/nylas-file-url" in event.dataTransfer.types
+ downloadURL = event.dataTransfer.getData("text/nylas-file-url")
+ downloadFilePath = downloadURL.split('file://')[1]
+ Actions.attachFilePath({path: downloadFilePath, messageLocalId: @props.localId})
+
+ # Accept drops of images from within the app
+ if "text/uri-list" in event.dataTransfer.types
+ uri = event.dataTransfer.getData('text/uri-list')
+ if uri.indexOf('file://') is 0
+ uri = uri.split('file://')[1]
+ Actions.attachFilePath({path: uri, messageLocalId: @props.localId})
+
true
_onFilePaste: (path) =>
diff --git a/internal_packages/composer/lib/file-upload.cjsx b/internal_packages/composer/lib/file-upload.cjsx
index 0e2121c19..5f572f527 100644
--- a/internal_packages/composer/lib/file-upload.cjsx
+++ b/internal_packages/composer/lib/file-upload.cjsx
@@ -1,6 +1,6 @@
path = require 'path'
React = require 'react'
-{RetinaImg} = require 'nylas-component-kit'
+{RetinaImg, Flexbox} = require 'nylas-component-kit'
{Utils,
Actions,
FileUploadStore} = require 'nylas-exports'
@@ -9,32 +9,32 @@ class FileUpload extends React.Component
@displayName: 'FileUpload'
render: =>
-
-
_canAbortDownload: -> false
_renderRemoveIcon: ->
- {@props.file.filename}
+
+
-
+
{@_imgOrLoader()}
{@props.file.displayName()}
-
-
-
-
-
-
+
_uploadProgressStyle: =>
if @props.uploadData.fileSize <= 0
percent = 0
else
- percent = (@props.uploadData.bytesUploaded / @props.uploadData.fileSize) * 100
+ percent = Math.min(1, (@props.uploadData.bytesUploaded / @props.uploadData.fileSize)) * 100
width: "#{percent}%"
_onClickRemove: =>
diff --git a/internal_packages/composer/lib/image-file-upload.cjsx b/internal_packages/composer/lib/image-file-upload.cjsx
index 1cbaf76a4..cb25dee5d 100644
--- a/internal_packages/composer/lib/image-file-upload.cjsx
+++ b/internal_packages/composer/lib/image-file-upload.cjsx
@@ -10,22 +10,22 @@ class ImageFileUpload extends FileUpload
uploadData: React.PropTypes.object
render: =>
-
+
- Uploading: {@_basename()}
-
-
+
+ Uploading: {@_basename()}
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
@@ -238,7 +238,7 @@ class MessageItem extends React.Component
targetPath: FileDownloadStore.pathForFile(file)
![]()
+ ![]()
_onDragStart: (event) =>
img = React.findDOMNode(@refs.img)
diff --git a/src/flux/models/file.coffee b/src/flux/models/file.coffee
index 4029c6646..c645a7e69 100644
--- a/src/flux/models/file.coffee
+++ b/src/flux/models/file.coffee
@@ -48,4 +48,22 @@ class File extends Model
modelKey: 'contentId'
jsonKey: 'content_id'
+ # Public: Files can have empty names, or no name. `displayName` returns the file's
+ # name if one is present, and falls back to appropriate default name based on
+ # the contentType. It will always return a non-empty string.
+ #
+ displayName: ->
+ defaultNames = {
+ 'text/calendar': "Event.ics",
+ 'image/png': 'Unnamed Image.png'
+ 'image/jpg': 'Unnamed Image.jpg'
+ 'image/jpeg': 'Unnamed Image.jpg'
+ }
+ if @filename and @filename.length
+ return @filename
+ else if defaultNames[@contentType]
+ return defaultNames[@contentType]
+ else
+ return "Unnamed Attachment"
+
module.exports = File
diff --git a/src/flux/stores/file-download-store.coffee b/src/flux/stores/file-download-store.coffee
index 92972b39a..456e70d69 100644
--- a/src/flux/stores/file-download-store.coffee
+++ b/src/flux/stores/file-download-store.coffee
@@ -12,22 +12,32 @@ progress = require 'request-progress'
NamespaceStore = require '../stores/namespace-store'
NylasAPI = require '../nylas-api'
-UNTITLED = "Untitled"
+Promise.promisifyAll(fs)
+
+mkdirpAsync = (folder) ->
+ new Promise (resolve, reject) ->
+ mkdirp folder, (err) ->
+ if err then reject(err) else resolve(folder)
class Download
constructor: ({@fileId, @targetPath, @filename, @filesize, @progressCallback}) ->
+ if not @filename or @filename.length is 0
+ throw new Error("Download.constructor: You must provide a non-empty filename.")
+ if not @fileId
+ throw new Error("Download.constructor: You must provide a fileID to download.")
+ if not @targetPath
+ throw new Error("Download.constructor: You must provide a target path to download.")
+
@percent = 0
@promise = null
- if (@filename ? "").trim().length is 0
- @filename = UNTITLED
@
state: ->
if not @promise
'unstarted'
- if @promise.isFulfilled()
+ else if @promise.isFulfilled()
'finished'
- if @promise.isRejected()
+ else if @promise.isRejected()
'failed'
else
'downloading'
@@ -49,62 +59,47 @@ class Download
return @promise if @promise
@promise = new Promise (resolve, reject) =>
- return reject(new Error("Must pass a fileID to download")) unless @fileId?
- return reject(new Error("Must have a target path to download")) unless @targetPath?
+ namespace = NamespaceStore.current()?.id
+ stream = fs.createWriteStream(@targetPath)
+ finished = false
+ finishedAction = null
- fs.exists @targetPath, (exists) =>
- # Does the file already exist on disk? If so, just resolve immediately.
- if exists
- fs.stat @targetPath, (err, stats) =>
- if not err and stats.size >= @filesize
- return resolve(@)
- else
- @_doDownload(resolve, reject)
+ # We need to watch the request for `success` or `error`, but not fire
+ # a callback until the stream has ended. These helper functions ensure
+ # that resolve or reject is only fired once regardless of the order
+ # these two events (stream end and `success`) happen in.
+ streamEnded = ->
+ finished = true
+ if finishedAction
+ finishedAction(@)
+
+ onStreamEnded = (action) ->
+ if finished
+ action(@)
else
- @_doDownload(resolve, reject)
+ finishedAction = action
- _doDownload: (resolve, reject) =>
- namespace = NamespaceStore.current()?.id
- stream = fs.createWriteStream(@targetPath)
- finished = false
- finishedAction = null
+ NylasAPI.makeRequest
+ json: false
+ path: "/n/#{namespace}/files/#{@fileId}/download"
+ started: (req) =>
+ @request = req
+ progress(@request, {throtte: 250})
+ .on "progress", (progress) =>
+ @percent = progress.percent
+ @progressCallback()
+ .on "end", =>
+ # Wait for the file stream to finish writing before we resolve or reject
+ stream.end(streamEnded)
+ .pipe(stream)
- # We need to watch the request for `success` or `error`, but not fire
- # a callback until the stream has ended. These helper functions ensure
- # that resolve or reject is only fired once regardless of the order
- # these two events (stream end and `success`) happen in.
- streamEnded = ->
- finished = true
- if finishedAction
- finishedAction(@)
+ success: =>
+ # At this point, the file stream has not finished writing to disk.
+ # Don't resolve yet, or the browser will load only part of the image.
+ onStreamEnded(resolve)
- onStreamEnded = (action) ->
- if finished
- action(@)
- else
- finishedAction = action
-
- NylasAPI.makeRequest
- json: false
- path: "/n/#{namespace}/files/#{@fileId}/download"
- started: (req) =>
- @request = req
- progress(@request, {throtte: 250})
- .on "progress", (progress) =>
- @percent = progress.percent
- @progressCallback()
- .on "end", =>
- # Wait for the file stream to finish writing before we resolve or reject
- stream.end(streamEnded)
- .pipe(stream)
-
- success: =>
- # At this point, the file stream has not finished writing to disk.
- # Don't resolve yet, or the browser will load only part of the image.
- onStreamEnded(resolve)
-
- error: =>
- onStreamEnded(reject)
+ error: =>
+ onStreamEnded(reject)
abort: ->
@request?.abort()
@@ -130,11 +125,7 @@ FileDownloadStore = Reflux.createStore
#
pathForFile: (file) ->
return undefined unless file
- if file.filename and file.filename.length > 0
- downloadFilename = file.filename
- else
- downloadFilename = file.id
- path.join(@_downloadDirectory, file.id, downloadFilename)
+ path.join(@_downloadDirectory, file.id, file.displayName())
downloadDataForFile: (fileId) -> @_downloads[fileId]?.data()
@@ -150,8 +141,8 @@ FileDownloadStore = Reflux.createStore
########### PRIVATE ####################################################
- # Returns a promise allowing other actions to be daisy-chained
- # to the end of the download operation
+ # Returns a promise with a Download object, allowing other actions to be
+ # daisy-chained to the end of the download operation.
_startDownload: (file, options = {}) ->
@_prepareFolder(file).then =>
targetPath = @pathForFile(file)
@@ -161,31 +152,46 @@ FileDownloadStore = Reflux.createStore
download = @_downloads[file.id]
return download.run() if download
- # create a new download for this file and add it to our queue
+ # create a new download for this file
download = new Download
fileId: file.id
filesize: file.size
- filename: file.filename
+ filename: file.displayName()
targetPath: targetPath
progressCallback: => @trigger()
- cleanup = =>
- @_cleanupDownload(download)
- Promise.resolve(download)
-
- @_downloads[file.id] = download
- promise = download.run().catch(cleanup).then(cleanup)
- @trigger()
- return promise
-
- _prepareFolder: (file) ->
- new Promise (resolve, reject) =>
- folder = path.join(@_downloadDirectory, file.id)
- fs.exists folder, (exists) =>
- if exists then resolve(folder)
+ # Do we actually need to queue and run the download? Queuing a download
+ # for an already-downloaded file has side-effects, like making the UI
+ # flicker briefly.
+ @_checkForDownloadedFile(file).then (downloaded) =>
+ if downloaded
+ # If we have the file, just resolve with a resolved download representing the file.
+ download.promise = Promise.resolve()
+ return Promise.resolve(download)
else
- mkdirp folder, (err) =>
- if err then reject(err) else resolve(folder)
+ cleanup = =>
+ @_cleanupDownload(download)
+ Promise.resolve(download)
+ @_downloads[file.id] = download
+ @trigger()
+ return download.run().catch(cleanup).then(cleanup)
+
+ # Returns a promise that resolves with true or false. True if the file has
+ # been downloaded, false if it should be downloaded.
+ #
+ _checkForDownloadedFile: (file) ->
+ fs.statAsync(@pathForFile(file)).catch (err) =>
+ return Promise.resolve(false)
+ .then (stats) =>
+ return Promise.resolve(stats.size >= file.size)
+
+ # Checks that the folder for the download is ready. Returns a promise that
+ # resolves when the download directory for the file has been created.
+ #
+ _prepareFolder: (file) ->
+ targetFolder = path.join(@_downloadDirectory, file.id)
+ fs.statAsync(targetFolder).catch =>
+ mkdirpAsync(targetFolder)
_fetch: (file) ->
@_startDownload(file)
@@ -226,10 +232,4 @@ FileDownloadStore = Reflux.createStore
if not fs.existsSync(downloadDir)
downloadDir = os.tmpdir()
- path.join(downloadDir, @_filename(file.filename))
-
- # Sometimes files can have no name.
- _filename: (filename="") ->
- if filename.trim().length is 0
- return UNTITLED
- else return filename
+ path.join(downloadDir, file.displayName())
-
module.exports = ImageFileUpload
diff --git a/internal_packages/composer/spec/composer-view-spec.cjsx b/internal_packages/composer/spec/composer-view-spec.cjsx
index f20b3e9dd..d45195c93 100644
--- a/internal_packages/composer/spec/composer-view-spec.cjsx
+++ b/internal_packages/composer/spec/composer-view-spec.cjsx
@@ -522,21 +522,18 @@ describe "populated composer", ->
describe "A draft with files (attachments) and uploads", ->
beforeEach ->
- @file1 =
+ @file1 = new File
id: "f_1"
- object: "file"
filename: "f1.pdf"
size: 1230
- @file2 =
+ @file2 = new File
id: "f_2"
- object: "file"
filename: "f2.jpg"
size: 4560
- @file3 =
+ @file3 = new File
id: "f_3"
- object: "file"
filename: "f3.png"
size: 7890
@@ -566,21 +563,14 @@ describe "populated composer", ->
expect(Actions.fetchFile.calls.length).toBe 1
expect(Actions.fetchFile.calls[0].args[0]).toBe @file2
- it 'renders the non image file as an attachment', ->
- els = ReactTestUtils.scryRenderedComponentsWithTypeAndProps(@composer, InjectedComponent, matching: role: "Attachment")
+ it 'injects an Attachment component for non image files', ->
+ els = ReactTestUtils.scryRenderedComponentsWithTypeAndProps(@composer, InjectedComponent, matching: {role: "Attachment"})
expect(els.length).toBe 1
- it 'renders the image file as an attachment', ->
- els = ReactTestUtils.scryRenderedComponentsWithTypeAndProps(@composer, InjectedComponent, matching: role: "Attachment:Image")
+ it 'injects an Attachment:Image component for image files', ->
+ els = ReactTestUtils.scryRenderedComponentsWithTypeAndProps(@composer, InjectedComponent, matching: {role: "Attachment:Image"})
expect(els.length).toBe 1
- it 'renders the uploads with the correct components', ->
- el = ReactTestUtils.findRenderedDOMComponentWithClass(@composer, 'file-upload')
- expect(el).toBeDefined()
-
- el = ReactTestUtils.findRenderedDOMComponentWithClass(@composer, 'image-file-upload')
- expect(el).toBeDefined()
-
describe "when the DraftStore `isSending` isn't stubbed out", ->
beforeEach ->
DraftStore._pendingEnqueue = {}
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index 0f3344016..0c0987c98 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -182,6 +182,7 @@
// TODO FIXME DRY From stylesheets/message-list.less
.attachments-area {
padding: 0;
+ margin: 0;
}
.token {
diff --git a/internal_packages/file-list/lib/file-list.cjsx b/internal_packages/file-list/lib/file-list.cjsx
index 0c32040cb..21d8261bb 100644
--- a/internal_packages/file-list/lib/file-list.cjsx
+++ b/internal_packages/file-list/lib/file-list.cjsx
@@ -25,7 +25,7 @@ class FileList extends React.Component
name: "Name"
flex: 1
resolver: (file) =>
- {@props.uploadData.fileName}
+
+
-
-
+
+
+
{@props.uploadData.fileName}
+
+
{file.filename}
+ {file.displayName()}
c2 = new ListTabular.Column
name: "Size"
diff --git a/internal_packages/message-list/lib/message-item.cjsx b/internal_packages/message-list/lib/message-item.cjsx
index f728a1069..df146349e 100644
--- a/internal_packages/message-list/lib/message-item.cjsx
+++ b/internal_packages/message-list/lib/message-item.cjsx
@@ -226,7 +226,7 @@ class MessageItem extends React.Component
otherAttachments = otherAttachments.map (file) =>