ng-file-upload

[TD-Stanley]

Can this be used in combination with ng-file-upload:
https://github.com/danialfarid/ng-file-upload ?

If so, can anyone point to an example?

[mikkelking]

Yes, I have used it successfully a few times now.

I can't share the whole project, but here is the html:

                        <div class="form-group">
                                <p ng-show="$ctrl.invalidPhotoFile" style="font-weight: bold; color: red">
                                    ERROR! {{ getFileErrorMsg(invalidPhotoFile) }}
                                </p>
                                <img ngf-src="photoFile" style="height: 200px; display: block; margin-bottom: 10px"/>
                                <div 
                                    ngf-drop="$ctrl.droppedFile()" 
                                    ng-model="$ctrl.picFile" 
                                    ngf-pattern="image/*" 
                                    ngf-select="$ctrl.droppedFile()" 
                                    accept="image/*" 
                                    class="btn btn-lg btn-primary" 
                                    ngf-accept="'image/*'" 
                                    ngf-pattern="'.jpeg,.jpg,.png,.gif,.bmp'" 
                                    ngf-max-height="6000" 
                                    ngf-max-size="5MB" 
                                    ngf-max-files="1" 
                                    ngf-fix-orientation="false"
                                    >
                        Choose Profile Photo
                    </div>
                            </div>
<!-- Image cropper -->
                  <span ng-if="$ctrl.uploadShow">
                                <!-- New mug shot (preview) -->
                                <H3>Photo Cropping Tips</H3>
                                <UL>
                                    <li>Full image is loaded below</li>
                                    <li>Use slider to resize, or scroll wheel on mouse (when hovering)</li>
                                    <li>Drag picture to fit</li>
                                </UL>
                                <ng-croppie   src="$ctrl.picFile | ngfDataUrl"
                                              ng-model='$ctrl.croppedDataUrl'
                                              update='$ctrl.onUpdate'
                                              boundry="{w: 440, h: 300}"
                                              viewport="{w: 200, h:200}"
                                              mousezoom="true" 
                                              zoom="true" 
                                              type="square"
                                  id="croppie">
                                </ng-croppie><BR />

                    <button ng-click="$ctrl.toggleUpload()" class="btn btn-lg btn-primary">
                      <i class="fa fa-trash"></i>
                    </button>        
                    <br />
                      <span class="err" ng-show="$ctrl.errorMsg">
                      {{$ctrl.errorMsg}}
                    </span>
                  </span>

A bit of JS is needed behind the scenes to convert the image to a blob for upload. I can share some more if needed, but it gets complicated to extract just the bits you need :)

[mikkelking]

@TD-Stanley I can't see your comment on here, so I'll paste it in:

question about this:

<ng-croppie src="$ctrl.picFile | ngfDataUrl

I'm not seeing ngfDataUrl in my ng-file-upload image.

I do see

$ngfBlobUrl: "blob:http://localhost:3000/297cc3ac-802c-4d85-9e97-554af326d04d

Do I need to remove the "blob:" portion from the url?
And, is the filter there to only initiate ng-croppie once the DataUrl is present?

I haven't inspected the url, I am used to seeing something with data: at the front.
I'm not sure why the ngfDataUrl filter is there, but it doesn't work without it. Maybe that is what is converting it to a blob/url?

[TD-Stanley]

Yeah. I dug around ng-file-upload a little more and saw that it was a built-in filter, which does as you suggest. Thanks again!

[orifn]

Small release v1.0.2 was made for better working with ng-file-upload library