I am using filepicker to manage uploads. I have a few components/controllers doing the following:
- Creating a
filepicker
variable - Setting a key via
filepicker.setKey(config.FILEPICKER_API_KEY)
- Using one of its methods like
pickAndStore
The code logic:
var filepicker = window.filepicker;
// Store an image file
filepicker.setKey("AZF9nmEYQJmx41xvJomGQz");
filepicker.pickAndStore(
// http://ift.tt/1EFdQwQ
// Example:
{
mimetype:"image/*",
folders:true
},
{
location:"S3"
},
function(Blobs){
console.log(JSON.stringify(Blobs));
}
);
// Convert an image
filepicker.setKey("AZF9nmEYQJmx41xvJomGQz");
filepicker.convert(
// http://ift.tt/1EFdOFq
// Example:
{
url: 'http://ift.tt/1AkdVAS',
filename: 'customers.jpg',
mimetype: 'image/jpeg',
isWriteable: false,
size: 629454
},
{
width: 200,
height: 200
},
function(new_Blob){
console.log(new_Blob.url);
}
);
I was thinking of refactoring this out somewhere to avoid repetitiion and better logical encapsulation.
So the first thing I did was set the key as an ENV variable at config/environment.js
, and replaced filepicker.setKey("AZF9nmEYQJmx41xvJomGQz")
with filepicker.setKey(config.FILEPICKER_API_KEY)
.
The next thing I was thinking of doing is figuring out where to declare the filepicker
variable and store some of the more common methods (i.e. pickAndStore
and convert
).
At first glance I thought of creating a service and initializer. The service could look like (pseudo code):
import Ember from 'ember';
import config from 'client/config/environment';
var filepicker = window.filepicker;
export default Ember.Service.extend({
init: function() {
filepicker.setKey(config.FILEPICKER_API_KEY);
},
pickAndStore: function(args*) {
// ...
},
convert: function(args*) {
// ...
},
});
Is there a general best practice/pattern for code like this to go somewhere? The solution/approach you end up suggesting can also be applied to other third party libraries that have a similar type of integration.
Aucun commentaire:
Enregistrer un commentaire