1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-11 22:24:21 +01:00
fab-manager/vendor/assets/components/angular-base64-upload/README.md

93 lines
2.6 KiB
Markdown
Raw Normal View History

2016-03-23 18:39:41 +01:00
angular-base64-upload
=====================
![alt tag](https://raw.github.com/adonespitogo/angular-base64-upload/master/banner.png)
Angular directive for uploading base64-encoded files that you can pass along with the resource model. This directive is based from one of the answers in this [SO question](http://stackoverflow.com/questions/20521366/rails-4-angularjs-paperclip-how-to-upload-file).
<b>Note:</b> This directive only supports single file selection.
Installation
-------------
<b>Bower:</b> `bower install angular-base64-upload`
Example
--------------------------
See the README.md on [demo folder](https://github.com/adonespitogo/angular-base64-upload/tree/master/demo).
Usage
-------
Include `angular.js` and `angular-base64-upload.js` in your application and add `naif.base64` as dependency to your main module:
```
angular.module('myApp', ['naif.base64']);
```
HTML: <br>
```html
<form>
<input type='file' ng-model='yourModel' base-sixty-four-input>
</form>
```
Sample `yourModel` value after selecting a file:
```json
{
"filesize": 54836 (bytes),
"filetype": "image/jpeg",
"filename": "profile.jpg",
"base64": "/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQA..."
}
```
You can use the `base-sixty-four-image` directive to display image preview:
<img base-sixty-four-image="yourModel">
If you also want to display a placeholder image, you can additionally use `base-sixty-four-image-placeholder` directive:
<img base-sixty-four-image="yourModel" base-sixty-four-image-placeholder="placeholder.png">
Server-Side
---------------
You will have to decode the base64 file in your backend on your own.
Sample PHP code for decoding base64 file in
[demo folder](https://github.com/adonespitogo/angular-base64-upload/tree/master/demo).
Start it by cd-ing to this directory and running:
php -S 0.0.0.0:8000
Then point your browser to [http://localhost:8000]().
Below is a ruby code for decoding the base64-encoded file to be passed to paperclip:
```ruby
def create
@resource.attachment = decode_base64
# save resource and render response ...
end
def decode_base64
# decode base64 string
Rails.logger.info 'decoding base64 file'
decoded_data = Base64.decode64(params[:your_model][:base64])
# create 'file' understandable by Paperclip
data = StringIO.new(decoded_data)
data.class_eval do
attr_accessor :content_type, :original_filename
end
# set file properties
data.content_type = params[:your_model][:filetype]
data.original_filename = params[:your_model][:filename]
# return data to be used as the attachment file (paperclip)
data
end
```
## License
Released under the terms of MIT License.