Ember Profile Upload
This README outlines the details of collaborating on this Ember addon.
This addon provides simple file uploads for photo for things like profile pics.
Installation
ember install ember-profile-upload
Setup
To Allow for flexibility for server uploads, you will need to add a profile-upload
service to your application:
ember g service profile-upload
Uploads with Cloudinary
For easy use, this addon comes with a fully implemented profile-upload
service that allows you to upload images to Cloudinary.
Before being able to use this service, you will need to install ember-get-config
and ember-network
:
ember install ember-get-config ember-network
Next add a basic set of config to your config/environment.js
to configure Cloudinary:
cloudinary: {
cloudName: `my-cloud-name`,
uploadPreset: `emberez`,
},
Where cloudName
is your account's cloud name, and uploadPreset
is the name of an unsigned upload profile which can be configured in your upload settings.
Finally, in your generated profile-upload
service, add the following:
import CloudinaryProfileUpload from 'ember-profile-upload/services/cloudinary-profile-upload';
export default CloudinaryProfileUpload.extend();
Now, you're all setup to use the profile-upload
component.
Component Use
Now that things are setup, you are ready to use the profile-upload
component.
The component takes three attributes:
-
fileUrl
- The current profile photo url -
placeholderUrl
- The image url to show if no photo is currently shown -
onchange
- A function to run when the file has successfully uploaded. This will be run with the result from your service'sdeserializeResponse
A quick example could be:
Custom service
To support uploading files, you will need to implement two functions in this service:
-
upload
- Returns a promise to upload the file to your API- Receives a
file
argument which is the first file'sFile
object from afile
input
- Receives a
-
deserializeResponse
- Returns a string URL of the uploaded file from payload returned byupload
Optional Setup
The profile-upload
service can also contain two other methods for greater flexibility:
-
destroyImage
- Instructs the API to delete the old file -
requestError
- Handle errors from the AJAX request
Example service
The service below shows how to integrate with a Loopback API using loopback-component-storage
as shown in the loopback-example-storage
:
import Ember from 'ember';
import config from '../config/environment';
export default Ember.Service.extend({
upload(file) {
const data = new FormData();
data.append(`value`, file);
return Ember.$.ajax({
data,
method: `POST`,
cache: false,
processData: false,
contentType: false,
url: `${config.apiHost}/api/containers/${config.containerName}/upload`,
});
},
destroyImage(file) {
const url = file.replace(`download`, `files`);
return Ember.$.ajax({
method: `DELETE`,
url,
});
},
deserializeResponse(response) {
const data = response.result.files.value[0];
return `${config.apiHost}/api/containers/${data.container}/download/${data.name}`;
},
requestError(err) {
// Handle request errors here
console.log(err);
},
});
License
This software is distributed under the MIT license.