Skip to content

Instantly share code, notes, and snippets.

@seance
Last active February 2, 2017 09:22
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save seance/5507768 to your computer and use it in GitHub Desktop.
Save seance/5507768 to your computer and use it in GitHub Desktop.
Example RxJS file dnd upload
var mouseDropS = $('#drop').onAsObservable('drop')
var uploadsS = mouseDropS.flatMap(function(e) {
var fileList = e.originalEvent.dataTransfer.files
var files = range(fileList.length).map(function(i) { return fileList[i] })
return Rx.Observable.fromArray(files.map(function(file) {
var subject = new Rx.ReplaySubject(1)
var reader = new FileReader()
reader.onload = function(e) {
var fd = new FormData()
fd.append('fileToUpload', e.target.result)
fd.append('contentType', file.type)
var ajaxS = $.ajaxAsObservable({
type: 'POST',
url: '/upload',
data: fd,
processData: false,
contentType: false
})
ajaxS.subscribe(subject)
}
reader.readAsDataURL(file)
return subject.asObservable()
}))
})
uploadsS.subscribe(function (s) { s.subscribe(log) })
@haf
Copy link

haf commented Nov 8, 2015

I like this, but you probably don't need to first load the file; if you don't, then the browser just sends the binary file instead of the base64-encoded one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment