Skip to content

Instantly share code, notes, and snippets.

@patmood
Last active December 28, 2015 21:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patmood/7563592 to your computer and use it in GitHub Desktop.
Save patmood/7563592 to your computer and use it in GitHub Desktop.
Handle image uploads to imgur (within ember) using formdata
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>ember-latest jsbin</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Content:</h2>
{{#view App.UploadView}}
<input type="file">
{{/view}}
</script>
</body>
</html>
App = Ember.Application.create({});
App.IndexController = Ember.ObjectController.extend({
});
App.UploadView = Ember.View.extend({
change: function(evt){
var file = evt.target.files[0];
if (!file || !file.type.match(/image.*/)) {
alert('invalid file');
return;
}
var fd = new FormData();
fd.append('image', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.imgur.com/3/image.json');
xhr.onload = function(){
alert(JSON.parse(xhr.responseText).data.id);
};
xhr.setRequestHeader('Authorization', 'Client-ID 2b577f722a2e8e9');
xhr.send(fd);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment