uploadcare / uploadcare-widget Goto Github PK

Hello! I haven't found a bugtracker for the whole service, so writing here. Feel free to move this issue to more appropriate place.

So, it seems that the webp format is not supported. Sample url:
https://lh4.ggpht.com/BTF12_nOHt8JlEVayloBZddEqIWuMixfPep7l_WvRVAoNt1c81hzqqx1V0QkV_xkpK0=w300-rw

It is shown ok in Chrome, but when uploaded, the CDN returns 404.

Is there a way to reset?

back to the Choose a file button

Am trying to use the cropping function of the widget to allow users to crop some banner images in our site, but the dimensions being returned by the widget seem to be inconsistent with what the intention is. Specifically, try this:

http://jsfiddle.net/Q9r2F/

With this image:

Might need to scale the windows a bit to see the full uploader. If you move the cropped area towards the bottom of the image, the results are way off as shown by the resulting image that is dropped into the page.

Bootstrap (v3?) uses box-sizing: border-box for every element. It conflicts with your footer: http://cl.ly/image/0z1z0g02283i. Add something like 'box-sizing: content-box' to .uploadcare-dialog-inner-footer to solve this issue.

Is it possible to have the widget upload directly my own server, without going through uploadcare? Is there documentation on what API my server should support for this?

I really like the cropping function of the upload dialog. It gives the user ability to choose a part of image with the aspect ratio we need.

The thing is that we cannot use it because CDN has limits on size (1024x634) and if the crop area is larger than that, we're screwed. That's independent of the following downsizing (the largest I need is 400x400).

In case of many files are selected (via DnD or file choosing dialog), all requests are sent at the same time. So when some files already uploaded, browser don't allow to load info until all other files are uploaded. As a result, first thumbnails appear only when the last file is uploaded.

File uploading can be queued for loading the first info before start the last uploading.

1. Move all multipart constants to object.js.coffee in settings.
2. Send MP_PART_SIZE to the server in multipartStart.

Sometimes status from /from_url/status/ reports what file is already ready. Use info returned from this status (or from Pusher) and don't make additional /info/ request.

on uploading multiple files, progress bar jumps over 100% on small files (<1kB)

@homm, тут с мест сообщают
"My Followings какой-то мрак, конечно. Это в Instagram так реально называется? Нельзя заменить на просто Following?"
возможно тебя заинтересует. беглым гуглением я не нашел ответа :)

p.s. это мы кейс uploadcare описываем у себя там

For some reason the JS SDK is flipping my images some-times:

The asset appears fine everywhere else (UDID: a6f64b08-fe42-4d9b-bf25-a75121632b07). It appears with the correct orientation briefly (while the framework is loading?) and appears with the correct orientation when opening the cropper.

After having upatated to latest version of uploadcare in my installation, 2.5X with jquery 2.1, I had a flickering effect. After investigating it I notice html element was like disapearing and reapearing.
I put a watch on it and figure out
that
this function was being called repeteadly

uploadcare.namespace('', function(ns) {
    var cleanup, dataAttr, initialize, initializeWidget, selector;
    dataAttr = 'uploadcareWidget';
    selector = '[role~="uploadcare-uploader"]';
    ns.initialize = function(container) {
      if (container == null) {
        container = ':root';
      }
      return initialize($(container).find(selector));
    };

and called that function from jquery.sizzle

if ( newSelector ) {
    try {
      push.apply( results,
        newContext.querySelectorAll( newSelector )
      );
      return results;
    } catch(qsaError) {
    } finally {
      if ( !old ) {
        context.removeAttribute("id");
      }
    }

Uploadcare is not compatible with jquery 2.x branches ?

please add bower manifest http://bower.io/docs/creating-packages/

For now uploadcare.Widget(".class") always successful, even if .class doesn't exist or there are many .class tags on the pages. An error should be thrown in the first case and warning in the second.

Updating the widget with an existing UUID value triggers an upload. This feels unexpected for widget methods, and something you'd expect from calls within the files and uploads methods.

// Set a file UUID or a CDN link as a value.
singleWidget.value('a9a1907e-b7af-4311-8d11-08f2d952aeb5');

When presenting options for a previously uploaded image, this appears to be the correct approach, no?

Hi,
I found a strange issue when I trying to use the devtools from chrome ( 45.0.2454.101 Ubuntu 15.04 (64-bit)) with uploadcare (v2.5.5) on my web application. The CSS editor is blinking. It seems, that there is a continuous refresh requested and you can't change anything. It's easy to test the issue on your tutorial page, you just need to open the devtools, inspect an element and try to modify the css

Any idea?

You should probably set list-style-type on uploadcare-dialog-support-* classes.

Take a look at this screenshot with default settings in pyuploadcare test_project.

Most of users do not expect what uploaded files are disappear in one day after uploading. But we can't turn it on in one of our minor versions (1.6, 1.7), because no one use AUTOSTORE = false right now.

We can make AUTOSTORE mandatory settings from next minor version (1.6) and set it by default in next major version (2.0).

Hey there, I am having difficulties compiling the widget myself.

Perhaps because I am using different versions of things?

Also note that jquery-rails is defined twice in the Gemfile.

Here is what I did:

$ bundle update
Your Gemfile lists the gem jquery-rails (>= 0) more than once.
You should probably keep only one of them.
While it's not a problem now, it could cause errors if you change the version of just one of them later.
Fetching gem metadata from http://rubygems.org/........
Fetching additional metadata from http://rubygems.org/..
Resolving dependencies...
Installing rake (10.1.1)
Installing Platform (0.4.0)
Installing open4 (1.3.1)
Installing POpen4 (0.1.4)
Installing i18n (0.6.9)
Installing multi_json (1.8.4)
Installing activesupport (3.2.14)
Installing builder (3.0.4)
Installing activemodel (3.2.14)
Installing erubis (2.7.0)
Installing journey (1.0.4)
Installing rack (1.4.5)
Installing rack-cache (1.2)
Installing rack-test (0.6.2)
Installing hike (1.2.3)
Installing tilt (1.4.1)
Installing sprockets (2.2.2)
Installing actionpack (3.2.14)
Installing mime-types (1.25.1)
Installing polyglot (0.3.4)
Installing treetop (1.4.15)
Installing mail (2.5.4)
Installing actionmailer (3.2.14)
Installing arel (3.0.3)
Installing tzinfo (0.3.38)
Installing activerecord (3.2.14)
Installing activeresource (3.2.14)
Installing sass (3.2.14)
Installing thor (0.18.1)
Installing bourbon (3.1.8)
Using bundler (1.5.3)
Installing coderay (1.1.0)
Installing coffee-script-source (1.6.3)
Installing execjs (2.0.2)
Installing coffee-script (2.2.0)
Installing rack-ssl (1.3.3)
Installing json (1.8.1)
Installing rdoc (3.12.2)
Installing railties (3.2.14)
Installing coffee-rails (3.2.2)
Installing ejs (1.1.1)
Installing excon (0.31.0)
Installing formatador (0.2.4)
Installing net-ssh (2.8.0)
Installing net-scp (1.1.2)
Installing mini_portile (0.5.2)
Installing nokogiri (1.6.1)
Installing fog (1.20.0)
Installing sass-rails (3.2.6)
Installing inline-blocks (0.0.3)
Installing jquery-rails (3.1.0)
Installing method_source (0.8.2)
Installing slop (3.4.7)
Installing pry (0.9.12.6)
Installing pry-rails (0.3.2)
Installing rails (3.2.14)
Installing spans (0.0.7)
Installing sprockets-rails (0.0.1)
Installing yui-compressor (0.9.6)
Using uploadcare-widget (0.18.1) from source at .
Your bundle is updated!

koen at maccie in /tmp/uploadcare-widget (master●●)
$ bundle exec rake js:latest:build
rake aborted!
compression failed
  (in /tmp/uploadcare-widget/app/assets/javascripts/uploadcare/templates/styles.jst.ejs.erb)

Tasks: TOP => js:latest:build
(See full trace by running task with --trace)

koen at maccie in /tmp/uploadcare-widget (master●●)
$ rvm current                     
ruby-1.9.3-p448

koen at maccie in /tmp/uploadcare-widget (master●●)
$ rvm info   

ruby-1.9.3-p448:

  system:
    uname:       "Linux maccie 3.11.0-15-generic #25-Ubuntu SMP Thu Jan 30 17:22:01 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux"
    system:      "ubuntu/13.10/x86_64"
    bash:        "/bin/bash => GNU bash, version 4.2.45(1)-release (x86_64-pc-linux-gnu)"
    zsh:         "/usr/bin/zsh => zsh 5.0.2 (x86_64-pc-linux-gnu)"

  rvm:
    version:      "rvm 1.23.14 (stable) by Wayne E. Seguin <[email protected]>, Michal Papis <[email protected]> [https://rvm.io/]"
    updated:      "3 months 10 days 5 hours 25 minutes 21 seconds ago"
    path:         "/home/koen/.rvm"

  ruby:
    interpreter:  "ruby"
    version:      "1.9.3p448"
    date:         "2013-06-27"
    platform:     "x86_64-linux"
    patchlevel:   "2013-06-27 revision 41675"
    full_version: "ruby 1.9.3p448 (2013-06-27 revision 41675) [x86_64-linux]"

  homes:
    gem:          "/home/koen/.rvm/gems/ruby-1.9.3-p448"
    ruby:         "/home/koen/.rvm/rubies/ruby-1.9.3-p448"

  binaries:
    ruby:         "/home/koen/.rvm/rubies/ruby-1.9.3-p448/bin/ruby"
    irb:          "/home/koen/.rvm/rubies/ruby-1.9.3-p448/bin/irb"
    gem:          "/home/koen/.rvm/rubies/ruby-1.9.3-p448/bin/gem"
    rake:         "/home/koen/.rvm/gems/ruby-1.9.3-p448/bin/rake"

  environment:
    PATH:         "/home/koen/.rvm/gems/ruby-1.9.3-p448/bin:/home/koen/.rvm/gems/ruby-1.9.3-p448@global/bin:/home/koen/.rvm/rubies/ruby-1.9.3-p448/bin:/home/koen/.rvm/bin:/usr/lib/lightdm/lightdm:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"
    GEM_HOME:     "/home/koen/.rvm/gems/ruby-1.9.3-p448"
    GEM_PATH:     "/home/koen/.rvm/gems/ruby-1.9.3-p448:/home/koen/.rvm/gems/ruby-1.9.3-p448@global"
    MY_RUBY_HOME: "/home/koen/.rvm/rubies/ruby-1.9.3-p448"
    IRBRC:        "/home/koen/.rvm/rubies/ruby-1.9.3-p448/.irbrc"
    RUBYOPT:      ""
    gemset:       ""

Hi

I'm using the widget with data-system-dialog="true" attribute.
The dialog pops up on desktop and ios, but nothing happens on android. Tested on chrome in android 4.4.3 and 4.4.4

The cropping widget creates frequent buggy behavior when I'm trying to use it.

I'm using the "data-crop" attribute on my upload input, and most of the time it works fine, but about 10% of the time the images loads in the preview and the crop selector never appears. It seems that the startCrop() function doesn't even trigger, because the "Done" button remains disabled. So, the photo is showing in preview, but the user can't crop or click "Done". It requires exiting and re-uploading.

My current workaround is to delay the startCrop() action by 500ms. To do this, I updated the utils.defer method:

ns.defer = function(fn, delay) {
    return setTimeout(fn, delay || 0);
};

and

return imgLoader.done(function() {
    return utils.defer(startCrop, 500);
});

Of course, this is only a workaround, so I'll monitor it for effectiveness. Any ideas on what might be causing this?

My stack includes angularjs and no native jQuery, if that makes any difference.

Thank you!

If you select "Camera" from the sidebar list of sources, it defaults to using the front camera after you allow access to the camera. You're not able to switch.

However, if you hit "Choose a local file" and then select Camera from the system dialog that pops up, you're able to select which camera it uses.

Tested on 2 different Android phones: HTC DNA + Galaxy S3

In order to use "blocking" API in future, add some "wait until file is ready" flag in BaseFile.__updateInfo requests.

My use case is radio registration page:

The picture is not stored on CDN yet (it will be as soon as the radio registration is complete), so the only thing I have is preview. But it is wrong, as you can see.
When the registration is completed, the crop area is good:

Hello. I've connected amazon S3 account through my profile on your website. As I know, to store my files on S3 I should manually copy them after I got temporary CDN link and I can use your API for that (I'm doing it through background job because upload to S3 takes much more time than to CDN).
Also, I don't want to store these files on your default CDN, because I have videos also and I can go out of limit which I don't want to pay for.
That's why I decided to switch-off an "autostore" property.
So, initially my file is served from CDN but as soon as upload to S3 is complete I want to serve it from there.
My question is: what should I save to my database(uuid of file, link, etc) to be sure that uploadcare widget can serve those files automatically from S3 after file is automatically deleted from CDN?

Hi there,

When I upload a image that is too small, using the following setting (from the docs)

"200x300 minimum" — user will not be able to select an area smaller then 200x300. If uploaded image is smaller then 200x300 itself, it will be upscaled.

The crop sometimes is a number below zero, I've seen "-1" come back, as a result, the image doesn't load.

My crop setting is:

"1280x960 minimum"

I hope you guys can resolve this soon.

If you're delaying start with UPLOADCARE_MANUAL_START it shouldn't show the warning that publicKey isn't set until start is called.

And publish on npm.

This makes integrating it in CommonJS applications a lot easier.

Hi, I am having an exception from this line

We are calling file.cancel() in our app code when this exception is thrown.

Здравствуйте. Спасибо за сервис!
Есть вопрос. У input заданы такие параметры: role="uploadcare-uploader" data-images-only="true" data-crop="900x900"
На сервере в files все равно лежит полный файл без кропа с изначальным размером. Это нормально?

Version 0.6.8 is 718kb source, 431kb minified, 126kb min/gzip.
It is almost as large as all my other scripts combined, and I use behemoth libraries like jQuery and Angular.js.

The size is prohibitive for me to include it in my tag, even though it is cached, because not only the first load is slow, but the execution of the script slows down page initialization (I have yet to measure it, but my best guess is +200ms for this size). For a small feature like upload dialog, it is just too much.

So, there are actually several issues here:

1. Wrap the script for usage with AMD loaders, so that I can request it only when needed.
2. Try to lower the size by providing option to omit at least jQuery from the script. (I already have it, and I believe it's more like a rule, not exception in web projects).
3. Raphael.js? Pusher.js? Do you really need them?
4. Try to lower the size further by omitting other components not needed in particular use cases (for example, I don't need the widget or live functionality, I just need the dialog only with file and url tabs).

1. Открываю виджет;
2. выбираю изображение from computer;
3. кропаю;
4. жму Upload;
5. жму на название файла, открывается диалог;
6. изменяю окошко кропа, жму Upload;
7. новый кроп не сохраняется.

as reported by @slafs

e.g. https://github.com/uploadcare/uploadcare-widget/blob/master/app/assets/javascripts/uploadcare/widget/templates/dialog.jst.ejs can't be translated
easily

Hey guys,

I am using angularjs, when using the simple input syntax, and bind the value to my scope / model, it does not get updated when the value is changed by uploadcare.

To solve this, an "input" event should be triggered by the uploadcare-widget.

jQueryReferenceToTheInput.trigger('input');

For now, I am trying to work around this by attaching a listener to the widgets, but getting the widgets seems pretty hard too with angularjs.

Will update this issue with my workaround once I have it working..

crop = true should do the same as crop = ""

Hello, I'm using uploadcare.openDialog to show a window that only has the functionality of cropping (I can do that setting { tabs: '', crop: <size> } in the openDialog method). When the window shows up, the coordinates (x,y) of the crop area always appears on the middle of the image... there is a way to control that coordinates to setup where put the crop area?

Thanks

Hello. I'm using your javascript widget with Rails on the backend side.
As I understood, widget uploads files to CDN always. After that I have to take that link and make my own API call to save it to s3. Am I missing smth? I thought it should upload to s3 automatically and then I can just store that link in my database

The Uploadcare widget works pretty well on my brand-new Galaxy Tab 4 using the stock Android browser. But using Chrome for Android, it fails miserably. Without digging into the code, my first guess would be that it doesn't do very complete UA checking and just treats and Android version of Chrome like the desktop version.

When I use openDialog to choose the file and it's rather large (not sure what the size limit is), it returns a File, which returns FileInfo, which has correct uuid, but its cdnUrl is https://ucarecdn.comnull.

I'm constructing the url manually for now, but this is clearly a bug.

Full fileInfo object from Chrome DevTools:

FileInfo: Object
    cdnUrl: "https://ucarecdn.comnull"
    cdnUrlModifiers: null
    isImage: true
    isStored: false
    name: "cover.jpg"
    previewUrl: "https://upload.uploadcare.com/preview/?file_id=49a9d0e5-a7be-43cf-a3f8-87b69623208a&pub_key=b78378037164dac45b77"
    size: 582276
    uuid: "49a9d0e5-a7be-43cf-a3f8-87b69623208a"

I want to open upload dialog from my own button and get the uploaded file info. In version 0.12 I did the following:

$(".upload-image-button").on("click", function() {
    uploadcare.openDialog(null, {
        imagesOnly: true
    }).uploadDone(function(info) {
        setImage(info.cdnUrl);
    });
});

In 0.16 there's no more uploadDone and all it does is return a promise without any data. What should I do?

Starting from version 47, Chrome doesn't allow to initialize camera on HTTP sites. Furthermore, there is no way to test is camera will be blocked in the current browser due to HTTP.

The preferred solution is to disable camera at all for HTTP sites (except localhost). Additionally, camera tab should log some sensible reasons to console if it was disabled.

"Secure uploads" is the method to protect uploads from using without a secret key. All uploads should be signed if appropriate option is turned on for the project.

• If a signature is provided, Widget should send signed credentials with each upload request:
  • from_url
  • base upload
  • multipart start
  • iframe upload
• There should be some callback on the host page which will be called if signed credentials are needed. For example for first uploading or if some uploading is failed due to credentials checking failure.
• The widget must "understand" if upload is failed due to credentials checking failure, call the callback again and retry uploading.
• Credentials should be shared between the widget instances and callback shouldn't be requested more times than enough. For example, when 5 uploads have failed due to credentials checking failure, the callback should be called only once.
• It is should be possible to use different credentials with different public keys.

Usage example:

<script>
    UPLOADCARE_PUBLIC_KEY = 'ba4a62161fc08614d93d';
    uploadcare.registerSecureUploadsCallback(UPLOADCARE_PUBLIC_KEY, function() {
      var deferred = $.Deferred();
      $.ajax({
        'url': '/uploadcare_secure_uploads_credentials/',
        'type': 'json',
      }).done(function(result) {
        deferred.resolve(result.expire, result.sign);
      });
      return deferred.promise();
    });
</script>

Alternative simple way without callback for long-living signatures:

<script>
    UPLOADCARE_PUBLIC_KEY = 'ba4a62161fc08614d93d';
    UPLOADCARE_SECURE_EXPIRES = 1487078477;
    UPLOADCARE_SECURE_SIGNATURE = 'afe1079beec9a281f622c7329b53bf7c';
</script>

1. Выбираю несолько файлов;
2. нажимаю Open в системном диалоге;
3. начинается загрузка, но я её не вижу, т.к. открыт таб «Drop a file».

Было бы здорово после выбора файлов показывать таб загрузки.

Hi,

I've been trying out your widget for a client of mine. On my Chrome on Ubuntu, when I resize my screen to below 761px and then click 'Choose an image', the widget will pop up momentarily, and then the entire screen goes blank.

So for 761px or above, all is well.

Then for 760px or below, the 'correct' user interface pops up for a moment (maybe half a second?)

After which the entire screen goes blank.

I've tried to reproduce this on my mobile (Android LG Optimus G Pro - http://www.lg.com/in/mobile-phones/lg-Optimus-G-Pro-E988-mobile-phones) and an iPhone 6, as well as Chrome on OSX and they work fine. It's only on my Chrome on Ubuntu where this occurs.

This is my browser user agent string: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36

Original file:
https://ucarecdn.com/eeb35d46-c031-45ee-8639-8ecc3d85ec42/

Resize is good (returning jpg of rather bad quality):
https://ucarecdn.com/eeb35d46-c031-45ee-8639-8ecc3d85ec42/-/preview/220x220/

Problem when asking for png format (returns 500):
https://ucarecdn.com/eeb35d46-c031-45ee-8639-8ecc3d85ec42/-/preview/220x220/-/format/png/

Здравствуйте. Я использую ваш виджет в Angular JS приложении. Там он оформлен как директива. Все хорошо за исключением того, что сейчас возникла необходимость разместить несколько виджетов на 1 странице. Атрибут role, как понимаю, захардкожен в библиотеке. Буду благодарен если подскажете как можно получить конкретный виджет кроме как:

uploadcare.Widget('[role=uploadcare-uploader]'); ?

function UploadCareLoaderDirective() {
    return function(scope, el, attr) {
        var widget = uploadcare.Widget('[role=uploadcare-uploader]');

        scope.$watch(attr.ngModel, function(newValue, oldValue) {
            newValue=newValue || '';
            if (newValue!=oldValue) {
                widget.value(newValue);
            }
        });

....

        widget.onChange(function(file) {
            if (file) {
                file.done(function(info) {
                    setFileUlr(info.cdnUrl);
                });
            } else {
                setFileUlr();
            }
        });
    };
};

Currently, if file uploading (or info downloading) is failed, a user can replace failed file with the new one through "Choose a file" button or DnD. This is fine in the general case but does not allow to clear widget value if the widget is clearable.

Solution: show "Remove" button instead of "Choose a file" if file uploading is failed and the widget is clearable.