mischi / angularjs-imageupload-directive Goto Github PK

Wrong mime type - "image/jpg" instead correct "image/jpeg".
It's bug leads to save png format by default in Chrome.

This is an awesome plugin, but I found that the 'type' variable maybe is wrong, in the line 26 is this code:
var type = options.resizeType || 'image/jpg';
and I think it should be:
var type = options.resizeType || 'image/jpeg';
The image/jpg type returns a png data type, and with the image/jpeg string, it returns a jpeg data type and is faster than the other way.

BTW thanks a lot.

subj

I've noticed that canvas-to-blob converts the Canvas into a blob through a data URL. As it happens my needs are for the base64 encoded image, so the use of Blob is an extra layer I don't need, and I have extra complexity to XHR the blob and convert it to a base64 string.

Could you add an option to have the uploaded image available as a base64 data URL, and skip the Blob step?

Now that bower is going away:-
https://bower.io/blog/2017/how-to-migrate-away-from-bower/

Would it be possible to publish this component to the global npm registry?
That will help those who move away from bower to npm/yarn

Came upon an "unsafe" blob prefix that resulted in a broken image for {{image.url}}.
However, {{image.dataURL}} worked nicely in it's place.

The cause and work-around is documented in angular/angular.js#3889.

My environment:

• Angular version 1.2.0-rc.2
• Chrome Version 29.0.1547.76 m

The following was the recommended fix in this case and it works for me:

myModule.config(['$compileProvider', function($compileProvider) {
    var oldWhiteList = $compileProvider.imgSrcSanitizationWhitelist();
    $compileProvider.imgSrcSanitizationWhitelist(/^\s (https|ftp|file|blob):|data:image\//);
});

Hi,

I'm having some trouble posting files to a .Net Web API site. It appears the file is being added to the form and posted, but when it arrives at the server the code can't find any files attached to the form (there's a property on the http request called "files" that I'm checking).

Is there any additional configuration I might need on the Angular side so my server picks up the files within the form?

I tried out another Angular JS file upload solution and it appears to work fine - but I like the additional features this project has (resizing etc).

Thanks,

Paul

Is there a way to pass an array to:

resize-max-height="[150, 500]"
resize-max-width="[250, 600]"

and submit those to a server?

I get this error when attempting to include the directive in my code.

Error: Invalid isolate scope definition for directive image: @?

When I change the bindings in the directive from @? to @ it seems to resolve the issue.

hi, Mischi, It's an usefult directive, and please change the follow

angular.module('imageupload', [])
    .directive('image',  function($q) {...}

to

angular.module('imageupload', [])
    .directive('image', ['$q', function($q) {...}]

otherwise, it is not work after uglify. for the param $q may be converted to another name such as a,b,c,f, etc by uglify compiler.

I have made "How to run the Demo?", and cant do anything with it, after starting server i see the demo page, when i try to upload somth i have a error in chrome console:
Uncaught TypeError: Type error imageupload.js:51
resizeImage imageupload.js:51
(anonymous function) imageupload.js:89
image.onload

in imageupload.js:
ctx.drawImage(origImage, 0, 0, width, height);
Uncaught TypeError: Type error

For me, the add button does nothing. In fact, it is disabled and never becomes enabled. Also, the clear button clears the fields but not the previews. I didn't know if that was by design.

Is there a progress value attached to image when you submit the image of the request submitting the base64 image?

This directive needs to be able to recognise EXIF orientation data and rotate accordingly, otherwise it's pretty useless unless the photos are taken with an older device or made in photoshop etc.

Having the image uploaded automatically on selecting a file would be nice.
That would eliminate the need to have 'add' and 'clear' buttons on the page.
Could be controlled with a flag.

http://www.rubydesigner.com/blog/resizing-images-before-upload-using-html5-canvas

is not a valid link.

Hi Mischi,

I've modified your JS to use a template within the directive:

template:
'' +
'Select upload photo: ' +
''
,

for my specific needs within current project, so I can have a one-liner in my view (I've also cut out multiple images support), effectively making this widget "plug-and-play".

Do you feel it's something worth sharing with the community?

(btw thanks for publishing this - saved me a lot of time!)

Essentially what is happening is that if you select a number of files at the same time with the system file picker, the async call:

fileToDataURL(files[i]).then(function (dataURL) {
  imageResult.dataURL = dataURL;
});

results in dataURL being set only on the final image.

Using angular 1.2.0 I ran into the issue that chrome and also firefox tend to crash for every file a little larger than a few Kilobytes. Any idea how to circumvent that?

I set up all as required with the script calls etc. Cut and paste the simple two line example in the Readme, and nothing at all happens when I select an image, the image tag doesn't show, so Im assuming the image attribute was never assigned a value. I think you may have a bug, its the same in the latest Chrome, FF, and Safari

<input type="file" accept="image/*" image="image"/> <img ng-show="image" ng-src="{{image.url}}" type="{{image.file.type}}" />

Just to be sure I provided an extra call to the image {{image}} outside of the call to see if the scope was actually getting the value of the image, but it is never does. $cope doesn't have any image property after uploading.

I have image size 230kb and and i'm resizing it's on width : 1920 and height 1080, but it's taking about 5 minutes to resize or some time it's kill web page.

Error: [$injector:unpr] http://errors.angularjs.org/1.2.27/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-NaNmageDirective at Error (native) at http://www.example.com/min/admin-production.min.js:19:10395 at http://www.example.com/min/admin-production.min.js:19:25331 at Object.c [as get] (http://www.example.com/min/admin-production.min.js:19:24402) at http://www.example.com/min/admin-production.min.js:19:25405 at c (http://www.example.com/min/admin-production.min.js:19:24402) at Object.d [as invoke] (http://www.example.com/min/admin-production.min.js:19:24617) at http://www.example.com/min/admin-production.min.js:19:29463 at f (http://www.example.com/min/admin-production.min.js:19:10732) at Object.<anonymous> (http://www.example.com/min/admin-production.min.js:19:29430)

HI i am getting this error while directive call