mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-11 22:24:21 +01:00
93 lines
2.6 KiB
Markdown
93 lines
2.6 KiB
Markdown
angular-base64-upload
|
|
=====================
|
|
|
|
|
|
|
|
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.
|