Typeerror: Cannot Read Property '$$phase' of Null Ng-file-upload

Downloads Issue Stats
Gratipay donate button

ng-file-upload

Lightweight Athwart directive to upload files.

Run into the DEMO page. Reference docs here

Migration notes: version 3.0.x version 3.ane.10 version 3.2.x version 4.x.x version five.ten.x version half-dozen.x.x version half-dozen.2.x version seven.0.x version 7.2.x version eight.0.ten version 9.0.10 version ten.0.10 version xi.0.ten version 12.0.ten version 12.i.x version 12.2.x

Enquire questions on StackOverflow under the ng-file-upload tag.
For bug report or feature request please search through existing issues first then open a new one here. For faster response provide steps to reproduce/versions with a jsfiddle link. If y'all need support for your company contact me.
If you similar this plugin requite information technology a thumbs upwardly at ngmodules or get me a cup of tea . Contributions are welcomed.

Table of Content:

Features
Install (Manual, Bower, NuGet, NPM)
Usage
Quondam Browsers
Server Side
- Samples (Coffee, Spring, Node.js, Rails, PHP, .Net)
- CORS
- Amazon S3 Upload

Features

file upload progress, cancel/abort
file drag and drop (html5 only)
image paste from clipboard and drag and drop from browser pages (html5 but).
image resize and centre crop (native) and user controlled crop through ngImgCrop. Meet crop sample (html5 only)
orientation prepare for jpeg prototype files with exif orientation data
resumable uploads: suspension/resume upload (html5 only)
native validation support for file type/size, paradigm width/pinnacle/aspect ratio, video/sound duration, and ng-required with pluggable custom sync or async validations.
show thumbnail or preview of selected images/sound/videos
supports CORS and directly upload of file'south binary data using Upload.$http()
enough of sample server side code, bachelor on nuget
on need flash FileAPI shim loading no extra load for html5 browsers.
HTML5 FileReader.readAsDataURL shim for IE8-nine
available on npm, bower, meteor, nuget

Install

Manual: download latest from here
Bower:
- bower install ng-file-upload-shim --save(for non html5 suppport)
- bower install ng-file-upload --save
NuGet: PM> Install-Bundle angular-file-upload (thanks to Georgios Diamantopoulos)
NPM: npm install ng-file-upload

< script src = " angular(.min).js " > < / script >

< script src = " ng-file-upload-shim(.min).js " > < / script >

< script src = " ng-file-upload(.min).js " > < / script >

Usage

Samples:

Upload with form submit and validations: http://jsfiddle.net/danialfarid/maqbzv15/1118/
Upload multiple files one by one on file select: http://jsfiddle.net/danialfarid/2vq88rfs/136/
Upload multiple files in 1 request on file select (html5 only): http://jsfiddle.internet/danialfarid/huhjo9jm/five/
Upload single file on file select: http://jsfiddle.net/danialfarid/0mz6ff9o/135/
Driblet and upload with $watch: http://jsfiddle.net/danialfarid/s8kc7wg0/400/
Paradigm Crop and Upload http://jsfiddle.net/danialfarid/xxo3sk41/590/

< script src = " angular.min.js " > < / script >

< script src = " ng-file-upload-shim.min.js " > < / script >

< script src = " ng-file-upload.min.js " > < / script >

Upload on form submit or button click

< grade ng-app = " fileUpload " ng-controller = " MyCtrl " proper noun = " form " >

Unmarried Image with validations

< div class = " push " ngf-select ng-model = " file " name = " file " ngf-design = " 'image/*' "

ngf-accept = " 'image/*' " ngf-max-size = " 20MB " ngf-min-meridian = " 100 "

ngf-resize = " {width: 100, height: 100} " > Select </ div >

Multiple files

< div course = " button " ngf-select ng-model = " files " ngf-multiple = " true " > Select </ div >

Drop files: < div ngf-drop ng-model = " files " class = " drop-box " > Drop </ div >

< push blazon = " submit " ng-click = " submit() " > submit </ push button >

</ grade >

Upload right abroad after file pick:

< div class = " button " ngf-select = " upload($file) " > Upload on file select </ div >

< div grade = " button " ngf-select = " uploadFiles($files) " multiple = " multiple " > Upload on file select </ div >

Drop File:

< div ngf-drib = " uploadFiles($files) " class = " driblet-box "

ngf-drag-over-class = " 'dragover' " ngf-multiple = " true "

ngf-pattern = " 'image/*,awarding/pdf' " > Drop Images or PDFs files here </ div >

< div ngf-no-file-drop > File Drag/Drop is not supported for this browser </ div >

Image thumbnail: < img ngf-thumbnail = " file || '/thumb.jpg' " >

Audio preview: < audio controls ngf-src = " file " > < / audio >

Video preview: < video controls ngf-src = " file " > < / video >

Javascript code:

var app = angular . module ( ' fileUpload ' , [ ' ngFileUpload ' ] ) ;

app . controller ( ' MyCtrl ' , [ ' $scope ' , ' Upload ' , role ( $scope , Upload ) {

$scope . submit = function ( ) {

if ( $scope . form . file . $valid && $telescopic . file ) {

$telescopic . upload ( $telescopic . file ) ;

}

} ;

$scope . upload = function ( file ) {

Upload . upload ( {

url : ' upload/url ' ,

data : { file : file , ' username ' : $telescopic . username }

} ) . then ( function ( resp ) {

panel . log ( ' Success ' + resp . config . data . file . name + ' uploaded. Response: ' + resp . information ) ;

} , function ( resp ) {

console . log ( ' Error status: ' + resp . status ) ;

} , office ( evt ) {

var progressPercentage = parseInt ( 100 . 0 * evt . loaded / evt . full ) ;

panel . log ( ' progress: ' + progressPercentage + ' % ' + evt . config . data . file . proper name ) ;

} ) ;

} ;

$scope . uploadFiles = function ( files ) {

if ( files && files . length ) {

for ( var i = 0 ; i < files . length ; i ++ ) {

Upload . upload ( { ... , information : { file : files [ i ] } , ... } ) ... ;

}

Upload . upload ( { ... , data : { file : files } , ... } ) ... ;

}

} ] ) ;

Total reference

File select and drop

At to the lowest degree one of the ngf-select or ngf-drop are mandatory for the plugin to link to the element. ngf-select only attributes are marked with * and ngf-driblet merely attributes are marked with +.

< div | button | input blazon = " file " | ngf-select | ngf-drop ...

ngf-select = " " or " upload($files, ...) " // called when files are selected or cleared

ngf-drop = " " or " upload($files, ...) " // called when files beingness dropped

// You lot tin can use ng-model or ngf-change instead of specifying role for ngf-driblet and ngf-select

// function parameters are the same as ngf-change

ngf-change = " upload($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event) "

// called when files are selected , dropped , or cleared

ng-model = " myFiles " // binds the valid selected / dropped file or files to the scope model

// could be an assortment or single file depending on ngf-multiple and ngf-proceed values .

ngf-model-options = " {updateOn: 'change click drop dropUrl paste', allowInvalid: false, debounce: 0} "

// updateOn could exist used to disable resetting on click , or updating on paste , browser image drop , etc .

// allowInvalid default is simulated could let invalid files in the model

// debouncing will postpone model update ( miliseconds ). Run across athwart ng-model-options for more details .

ngf-model-invalid = " invalidFile(southward) " // binds the invalid selected / dropped file or files to this model .

ngf-earlier-model-modify = " beforeChange($files, ...) " // called later file select / drib and before

// model change , validation and resize is processed

ng-disabled = " boolean " // disables this chemical element

ngf-select-disabled = " boolean " // default false , disables file select on this element

ngf-drop-disabled = " boolean " // default imitation , disables file drib on this element

ngf-multiple = " boolean " // default false , allows selecting multiple files

ngf-proceed = " true|false|'distinct' " // default false , keep the previous ng-model files and

// append the new files . " 'distinct' " removes duplicate files

// $ newFiles and $ duplicateFiles are set in ngf-change / select / drop functions .

ngf-fix-orientation = " boolean " // default fake , would rotate the jpeg epitome files that take

// exif orientation data . See # 745 . Could exist a boolean function similar shouldFixOrientation ($ file )

// to decide wethere to fix that file or not .

* ngf-capture = " 'camera' " or " 'other' " // allows mobile devices to capture using photographic camera

* ngf-take = " 'image/*' " // standard HTML have attr , browser specific select popup window

+ ngf-allow-dir = " boolean " // default true , allow dropping files only for Chrome webkit browser

+ ngf-include-dir = " boolean " // default fake , include directories in the dropped file array .

// Y'all can detect if they are directory or not past checking the type = == ' directory ' .

+ ngf-drag-over-form = " {pattern: 'image/*', take:'acceptClass', decline:'rejectClass', delay:100} "

or " 'myDragOverClass' " or " calcDragOverClass($event) "

// default " dragover " . drag over css class behaviour . could be a string , a office

// returning class name or a json object .

// accept / refuse grade only works in Chrome , validating merely the file mime type .

// if design is not specified ngf-pattern will be used . See following docs for more info .

+ ngf-drag = " elevate($isDragging, $class, $result) " // function called on elevate over / leave events .

// $ isDragging: boolean true if is dragging over ( dragover ), simulated if drag has left ( dragleave )

// $ course is the class that is beingness set for the element calculated by ngf-drag-over-grade

+ ngf-drop-available = " dropSupported " // fix the value of scope model to true or false based on file

// elevate & drop support for this browser

+ ngf-stop-propagation = " boolean " // default false , whether to propagate drag / drop events .

+ ngf-hide-on-drop-non-available = " boolean " // default false , hides element if file drag & drop is not

+ ngf-enable-firefox-paste = " boolean " // * experimental * default false , enable firefox image paste by making element contenteditable

ngf-resize = " {width: 100, acme: 100, quality: .eight, type: 'image/jpeg',

ratio: '1:2', centerCrop: truthful, blueprint='.jpg', restoreExif: false} "

or resizeOptions () // a function returning a promise which resolves into the options .

// resizes the image to the given width / height or ratio . Quality is optional between 0 . 1 and i . 0 ),

// type is optional convert information technology to the given paradigm type format .

// centerCrop truthful volition center crop the image if it does non fit inside the given width / height or ratio .

// centerCrop false ( default ) will non crop the epitome and will fit it within the given width / height or ratio

// so the resulting image width ( or tiptop ) could be less than given width ( or height ).

// pattern is to resize only the files that their name or blazon matches the design like to ngf-design .

// restoreExif boolean default true , will restore exif info on the resized image .

ngf-resize-if = " $width > thousand || $height > 1000 " or " resizeCondition($file, $width, $pinnacle) "

// apply ngf-resize only if this part returns true . To filter specific images to be resized .

ngf-validate-later on-resize = " boolean " // default false , if true all validation will be run afterwards

// the images are being resized , then whatever validation error before resize will exist ignored .

// validations:

ngf-max-files = " 10 " // maximum number of files allowed to be selected or dropped , validate error name: maxFiles

ngf-pattern = " '.pdf,.jpg,video/*,!.jog' " // comma separated wildcard to filter file names and types allowed

// yous can exclude specific files by ! at the get-go .

// validate error name: pattern

ngf-min-size , ngf-max-size , ngf-max-total-size = " 100 " in bytes or " '10KB' " or " '10MB' " or " '10GB' "

// validate as form . file .$ error . maxSize = true and file .$ error = ' maxSize '

// ngf-max-total-size is for multiple file select and validating the total size of all files .

ngf-min-height , ngf-max-peak , ngf-min-width , ngf-max-width = " 1000 " in pixels merely images

// validate error names: minHeight , maxHeight , minWidth , maxWidth

ngf-ratio = " 8:10,1.six " // list of comma separated valid aspect ratio of images in bladder or 2:3 format

// validate error proper noun: ratio

ngf-min-ratio , ngf-max-ratio = " 8:x " // min or max allowed aspect ratio for the epitome .

ngf-dimensions = " $width > 1000 || $summit > 1000 " or " validateDimension($file, $width, $peak) "

// validate the image dimensions , validate error proper noun: dimensions

ngf-min-duration , ngf-max-elapsing = " 100.5 " in seconds or " '10s' " or " '10m' " or " '10h' " but audio , video

// validate error proper name: maxDuration

ngf-duration = " $elapsing > chiliad " or " validateDuration($file, $duration) "

// validate the media elapsing , validate error proper name: duration

ngf-validate = " {size: {min: 10, max: '20MB'}, width: {min: 100, max:10000}, height: {min: 100, max: 300}

ratio: '2x1', duration: {min: '10s', max: '5m'}, blueprint: '.jpg'} "

shorthand class for in a higher place validations in 1 place .

ngf-validate-fn = " validate($file) " // custom validation office , return boolean or string containing the error .

// validate error name: validateFn

ngf-validate-async-fn = " validate($file) " // custom validation function , render a promise that resolve to

// boolean or string containing the error . validate error name: validateAsyncFn

ngf-validate-force = " boolean " // default faux , if truthful file .$ error volition be set if the dimension or duration

// values for validations cannot exist calculated for case image load error or unsupported video by the browser .

// by default it would presume the file is valid if the duration or dimension cannot exist calculated past the browser .

ngf-ignore-invalid = " 'pattern maxSize' " // ignore the files that fail the specified validations . They will

// just be ignored and volition not show upward in ngf-model-invalid or make the form invalid .

// space separated listing of validate mistake names .

ngf-run-all-validations = " boolean " // default fake . Runs all the specified validate directives . By default

// once a validation fails for a file information technology would cease running other validations for that file .

> Upload/Drop </ div >

< div |... ngf-no-file-driblet > File Drag/drib is not supported </ div >

// filter to convert the file to base64 data url.

< a href = " file | ngfDataUrl " > image </ a >

File preview

< img | audio | video | div

* ngf-src = " file " // To preview the selected file , sets src aspect to the file data url .

* ngf-groundwork = " file " // sets background-image style to the file information url .

ngf-resize = " {width: 20, height: 20, quality: 0.9} " // only for prototype resizes the image before setting information technology

// as src or background image . quality is optional .

ngf-no-object-url = " true or false " // see # 887 to force base64 url generation instead of object url . Default simulated

< div | span |...

* ngf-thumbnail = " file " // Generates a thumbnail version of the image file

ngf-size = " {width: 20, height: twenty, quality: 0.ix} " the image will be resized to this size

// if not specified will exist resized to this chemical element ` s client width and height .

ngf-every bit-background = " boolean " // if true it will set the background image style instead of src attribute .

Upload service:

var upload = Upload . upload ( {

* url : ' server/upload/url ' ,

* data : { cardinal : file , otherInfo : uploadInfo } ,

objectKey : ' [yard] ' or ' .grand '

arrayKey : ' [i] ' or ' [] ' or ' .i ' or ' '

method : ' POST ' or ' PUT ' ( html5 ) , default Mail ,

headers : { ' Authorization ' : ' 30 ' } ,

withCredentials : boolean ,

resumeSizeUrl : ' /uploaded/size/url?file= ' + file . name

resumeSizeResponseReader : office ( data ) { return information . size ; }

resumeSize : function ( ) { return hope ; }

resumeChunkSize : 10000 or ' 10KB ' or ' 10MB '

disableProgress : boolean

... and all other angular $http ( ) options could exist used hither .

} )

upload . then ( role ( resp ) {

panel . log ( ' file ' + resp . config . data . file . name + ' is uploaded successfully. Response: ' + resp . information ) ;

} , part ( resp ) {

} , function ( evt ) {

console . log ( ' progress: ' + parseInt ( 100 . 0 * evt . loaded / evt . full ) + ' % file : ' + evt . config . data . file . name ) ;

} ) ;

upload . catch ( errorCallback ) ;

upload . finally ( callback , notifyCallback ) ;

upload . xhr ( part ( xhr ) {

xhr . upload . addEventListener ( ... )

} ) ;

upload . abort ( ) ;

Upload . http ( {

url : ' /server/upload/url ' ,

headers : {

' Content-Type ' : file . type

} ,

data : file

} )

Upload . setDefaults ( { ngfMinSize : 20000 , ngfMaxSize : 20000000 , ... } )

Upload . defaults . blobUrlsMaxMemory = 268435456

Upload . defaults . blobUrlsMaxQueueSize = 200

Upload . base64DataUrl ( files ) . and so ( part ( urls ) { ... } ) ;

Upload . dataUrl ( file , boolean ) . and then ( office ( url ) { ... } ) ;

Upload . imageDimensions ( file ) . so ( function ( dimensions ) { console . log ( dimensions . width , dimensions . meridian ) ; } ) ;

Upload . mediaDuration ( file ) . so ( function ( durationInSeconds ) { ... } ) ;

Upload . resize ( file , options ) . then ( function ( resizedFile ) { ... } ) ;

Upload . isResizeSupported ( )

Upload . isResumeSupported ( )

Upload . rename ( file , newName )

Upload . jsonBlob ( obj )

Upload . json ( obj )

var blob = upload . dataUrltoBlob ( dataurl , name ) ;

Upload . isUploadInProgress ( ) boolean

Upload . urlToBlob ( url ) . so ( function ( blob ) { ... } ) ;

Upload . isFile ( obj ) ;

Upload . applyExifRotation ( file ) . then ( ... )

ng-model The model value will be a single file instead of an assortment if all of the followings are true:

ngf-multiple is not ready or is resolved to simulated.
multiple attribute is not set on the element
ngf-keep is non set or is resolved to simulated.

validation When any of the validation directives specified the form validation will take place and you lot can access the value of the validation using myForm.myFileInputName.$error.<validate error name> for example form.file.$error.pattern. If multiple file choice is allowed y'all can specify ngf-model-invalid="invalidFiles" to assing the invalid files to a model and find the error of each individual file with file.$error and description of it with file.$errorParam. Y'all can utilise angular ngf-model-options to allow invalid files to exist set to the ng-model ngf-model-options="{allowInvalid: truthful}".

Upload multiple files: Just for HTML5 FormData browsers (not IE8-9) you have an array of files or more than 1 file in your data to send them all in one request . Non-html5 browsers due to wink limitation volition upload each file 1 by one in a divide request. You should iterate over the files and send them ane past one for a cross browser solution.

drag and drop styling: For file drag and drop, ngf-elevate-over-class could exist used to fashion the drop zone. It can be a role that returns a class name based on the $outcome. Default is "dragover" string. Simply in chrome It could be a json object {take: 'a', 'reject': 'r', blueprint: 'image/*', delay: 10} that specify the class name for the accepted or rejected drag overs. The pattern specified or ngf-design will be used to validate the file'southward mime-blazon since that is the merely property of the file that is reported by the browser on drag. And so you lot cannot validate the file name/extension, size or other validations on drag. In that location is also some limitation on some file types which are not reported past Chrome. delay default is 100, and is used to ready css3 transition problems from dragging over/out/over #277.

Upload.setDefaults(): If you have many file selects or drops you can set up the default values for the directives by calling Upload.setDefaults(options). options would be a json object with directive names in camelcase and their default values.

Resumable Uploads: The plugin supports resumable uploads for large files. On your server you demand to go along track of what files are being uploaded and how much of the file is uploaded.

url upload endpoint need to reassemble the file chunks by appending uploading content to the stop of the file or correct clamper position if it already exists.
resumeSizeUrl server endpoint to return uploaded file size then far on the server to be able to resume the upload from where it is ended. Information technology should render zilch if the file has not been uploaded yet.
A Become request will be made to that url for each upload to determine if office of the file is already uploaded or not. You lot need a unique way of identifying the file on the server so you lot can pass the file name or generated id for the file equally a request parameter.
By default it volition assume that the response content is an integer or a json object with size integer property. If yous render other formats from the endpoint you tin can specify resumeSizeResponseReader function to return the size value from the response. Alternatively instead of resumeSizeUrl you can utilise resumeSize role which returns a promise that resolves to the size of the uploaded file so far. Make sure when the file is fully uploaded without any error/abort this endpoint returns zero for the file size if you lot desire to permit the user to upload the same file again. Or optionally you could take a restart endpoint to set that dorsum to zero to let re-uploading the aforementioned file.
resumeChunkSize optionally yous tin specify this to upload the file in chunks to the server. This will permit uploading to GAE or other servers that take file size limitation and trying to upload the whole request earlier passing it for internal processing.
If this option is set up the requests will have the following extra fields: _chunkSize, _currentChunkSize, _chunkNumber (zero starting), and _totalSize to help the server to write the uploaded chunk to the correct position. Uploading in chunks could tedious down the overall upload time peculiarly if the chunk size is likewise small. When you provide resumeChunkSize option one of the resumeSizeUrl or resumeSize is mandatory to know how much of the file is uploaded then far.

Old browsers

For browsers not supporting HTML5 FormData (IE8, IE9, ...) FileAPI module is used. Note: Yous need Flash installed on your browser since FileAPI uses Flash to upload files.

These two files FileAPI.min.js, FileAPI.flash.swf will be loaded by the module on need (no demand to exist included in the html) if the browser does non supports HTML5 FormData to avoid actress load for HTML5 browsers. Yous can place these two files abreast angular-file-upload-shim(.min).js on your server to be loaded automatically from the same path or you tin can specify the path to those files if they are in a different path using the following script:

< script >

FileAPI = {

jsPath : ' /js/FileAPI.min.js/folder/ ' ,

jsUrl : ' yourcdn.com/js/FileAPI.min.js ' ,

staticPath : ' /flash/FileAPI.wink.swf/folder/ ' ,

flashUrl : ' yourcdn.com/js/FileAPI.flash.swf ' ,

}

</ script >

< script src = " angular-file-upload-shim.min.js " > < / script > ...

Quondam browsers known bug:

Considering of a Flash limitation/bug if the server doesn't send any response body the status code of the response volition be ever 204 'No Content'. So if you have access to your server upload lawmaking at to the lowest degree return a character in the response for the condition code to work properly.
Custom headers will not work due to a Wink limitation #111 #224 #129
Due to Flash problems #92 Server HTTP fault code 400 will exist returned as 200 to the client. So avoid returning 400 on your server side for upload response otherwise it volition be treated as a success response on the client side.
In instance of an mistake response (http code >= 400) the custom error message returned from the server may not be bachelor. For some error codes flash merely provide a generic error message and ignores the response text. #310
Older browsers won't allow PUT requests. #261

Server Side

Java You can find the sample server lawmaking in Java/GAE here
Leap MVC Wiki Sample provided past zouroto
Node.js Wiki Sample provided by chovy. Another wiki using Express 4.0 and the Multiparty provided past Jonathan White
Rails
- Wiki Sample provided by guptapriyank.
- Blog mail service provided by Coshx Labs.
- Rail progress result: If your server is Rails and Apache you lot may need to change server configurations for the server to back up upload progress. See #207
PHP Wiki Sample and related issue only i file in $_FILES when uploading multiple files
.Net
- Demo showing how to utilize ng-file-upload with Asp.Cyberspace Spider web Api.
- Sample customer and server code demo/C# provided by AtomStar

CORS

To support CORS upload your server needs to allow cross domain requests. Yous can achieve that by having a filter or interceptor on your upload file server to add CORS headers to the response similar to this: (sample coffee code)

httpResp . setHeader ( " Access-Control-Allow-Methods " , " Post, PUT, OPTIONS " ) ;

httpResp . setHeader ( " Access-Control-Let-Origin " , " your.other.server.com " ) ;

httpResp . setHeader ( " Admission-Control-Permit-Headers " , " Content-Blazon " ) ) ;

For not-HTML5 IE8-9 browsers y'all would also need a crossdomain.xml file at the root of your server to allow CORS for wink: (sample xml)

< cross-domain-policy >

< site-control permitted-cantankerous-domain-policies = " all " />

< allow-access-from domain = " angular-file-upload.appspot.com " />

< allow-http-request-headers-from domain = " * " headers = " * " secure = " false " />

</ cross-domain-policy >

Amazon AWS S3 Upload

For Amazon authentication version 4 meet this comment

The demo folio has an option to upload to S3. Here is a sample config options:

Upload . upload ( {

url : ' https://athwart-file-upload.s3.amazonaws.com/ ' ,

method : ' POST ' ,

data : {

primal : file . name ,

AWSAccessKeyId : < YOUR AWS AccessKey Id > ,

acl : ' individual ' ,

policy : $scope . policy ,

signature : $scope . signature ,

" Content-Type " : file . type != ' ' ? file . type : ' application/octet-stream ' ,

filename : file . proper noun ,

file : file

}

} ) ;

This article explains more virtually these fields and provides instructions on how to generate the policy and signature using a server side tool. These 2 values are generated from the json policy certificate which looks like this:

{

" expiration " : " 2020-01-01T00:00:00Z " ,

" weather condition " : [

{ " bucket " : " athwart-file-upload " } ,

[ " starts-with " , " $key " , " " ] ,

{ " acl " : " individual " } ,

[ " starts-with " , " $Content-Type " , " " ] ,

[ " starts-with " , " $filename " , " " ] ,

[ " content-length-range " , 0 , 524288000 ]

]

}

The demo page provide a helper tool to generate the policy and signature from you from the json policy document. Note: Delight utilize https protocol to admission demo folio if you are using this tool to generate signature and policy to protect your aws secret cardinal which should never be shared.

Brand sure that you provide upload and CORS mail to your bucket at AWS -> S3 -> bucket proper name -> Properties -> Edit bucket policy and Edit CORS Configuration. Samples of these two files:

{

" Version " : " 2012-10-17 " ,

" Statement " : [

{

" Sid " : " UploadFile " ,

" Consequence " : " Let " ,

" Principal " : {

" AWS " : " arn:aws:iam::xxxx:user/xxx "

} ,

" Action " : [

" s3:GetObject " ,

" s3:PutObject "

] ,

" Resource " : " arn:aws:s3:::angular-file-upload/* "

} ,

{

" Sid " : " crossdomainAccess " ,

" Event " : " Allow " ,

" Principal " : " * " ,

" Action " : " s3:GetObject " ,

" Resource " : " arn:aws:s3:::angular-file-upload/crossdomain.xml "

}

]

}

<? xml version = " ane.0 " encoding = " UTF-8 " ?>

< CORSConfiguration xmlns = " http://s3.amazonaws.com/doctor/2006-03-01/ " >

< CORSRule >

< AllowedOrigin > http://angular-file-upload.appspot.com </ AllowedOrigin >

< AllowedMethod > POST </ AllowedMethod >

< AllowedMethod > GET </ AllowedMethod >

< AllowedMethod > HEAD </ AllowedMethod >

< MaxAgeSeconds > 3000 </ MaxAgeSeconds >

< AllowedHeader > * </ AllowedHeader >

</ CORSRule >

</ CORSConfiguration >

For IE8-9 flash polyfill you need to accept a crossdomain.xml file at the root of y'all S3 bucket. Make sure the content-blazon of crossdomain.xml is text/xml and you provide read access to this file in your bucket policy.

You can also have a look at https://github.com/nukulb/s3-angular-file-upload for another instance with this set up.

brownbadvarld.blogspot.com

Source: https://www.npmjs.com/package/ng-file-upload

Typeerror: Cannot Read Property '$$phase' of Null Ng-file-upload

ng-file-upload

Features

Install

Usage

Samples:

Total reference

File select and drop

File preview

Upload service:

Old browsers

Server Side

CORS

Amazon AWS S3 Upload

0 Response to "Typeerror: Cannot Read Property '$$phase' of Null Ng-file-upload"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel