transloadit / jquery-sdk Goto Github PK

I was having some issues when user submits form and no file is selected. I believed that processZeroFiles option takes cares of this, but I think it doesn't.

Looking at init() function:

Uploader.prototype.init = function($form, options) {
    this.$form = $form;
    this.options($.extend({}, OPTIONS, options || {}));

    var self = this;
    $form.bind('submit.transloadit', function() {
      self.validate();
      self.detectFileInputs();
      if (!self._options['processZeroFiles'] && self.$files.length === 0) {
        self.submitForm();
      } else {
        self.getBoredInstance();
      }

      return false;
    });

    this.includeCss();
  };

Checks if processZeroFiles is !false and no file is selected, so if it's true it submits the form anyway.

Then I look submitForm() function:

 Uploader.prototype.submitForm = function() {
    if (this.$fileClones) {
      this.$fileClones.remove();
    }

    if (this.assembly !== null) {
      $('<textarea/>')
        .attr('name', 'transloadit')
        .text(JSON.stringify(this.assembly))
        .prependTo(this.$form)
        .hide();
    }

    this.$form
      .unbind('submit.transloadit')
      .submit();
  };

And after all the checks, it unbinds submit.transloadit and submits to the form action setted, in my case, and written in docs, api2.transloadit.com/assemblies so I am redirected to that url seeing something like this:

Hope this will be useful.

Sometimes (not always) even if the assembly cannot proceed, the onSuccess callback is executed.
Here one example where I print the assembly in the onSuccess function.

Hi guys,

I ran into a situation where I needed to attach/detach transloadit plugin dynamically.
Currently I resolved this issue simply unbinding it with

$("formSelector").unbind("submit.transloadit");

but a method exposed would be better and easier to use.

I clone the repo https://github.com/tim-kos/transloadit-drag-and-drop, and it works fine. While I update jquery.transloadit to the latest version, the issue that clone the input after dropping an image occurs.

Reproduce steps:

1. clone https://github.com/tim-kos/transloadit-drag-and-drop
2. edit index.html
3. replace <script src="lib/transloadit.js"></script> with <script src="https://assets.transloadit.com/js/jquery.transloadit2-v2-latest.js"></script>
4. open index.html in browser.
5. drag and drop an image.
6. there will be 2 inputs. if you drop again, there will be 4 inputs, if you drop again, there will be 8 inputs........

An un-minified version of the latest version would be nice, but I couldn't find it...

Is there any particular reason to use !important throughout the CSS? It makes it a little harder to customize, since the CSS gets loaded dynamically via jscript after page load, and clobbers any existing CSS I have. Your !important also over-rides any !important that I add, since it's loaded later. Got it working by prefixing all my CSS rules with 'body' to increase specificity, but would be easier to avoid it if there's no particular reason to use !important (?).

We've encountered a breaking issue in v3 of the SDK that occurs when cancelling an upload if the modal parameter is set to false for custom progress rendering. An error will be thrown by this._modal.renderCancelling() as it is not wrapped in a conditional to prevent it from being invoked when modal is false, and the modal object will then be undefined.

I've submitted PR #53 to resolve the issue, but until it is merged we'll need to continue using a forked custom build of the SDK with this hotfix included.

Thanks in advance!

Hi For more than once, i'm getting upload errors. Seems that there's a cache problem with some json transload webservice using your JQuery SDK

XMLHttpRequest cannot load https://s3.amazonaws.com/infra-us-east-1.transloadit.com/cached_instances.json. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'https://ec-ember-staging.herokuapp.com' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

{ 
  error: "BORED_INSTANCE_ERROR", 
  message: "Could not find a bored instance. Could not query S3 for cached uploaders from url: https://s3.amazonaws.com/infra-us-east-1.transloadit.com/cached_instances.json"
}

This happens when uploader tries a GET from http://infra-us-east-1.transloadit.com.s3.amazonaws.com/cached_instances.json and aborts.

I think is because i'm using an ajaxPrefilter but not sure:

Ember.$.ajaxPrefilter(function (options) {
  options.crossDomain = {
    crossDomain: true
  };
  options.xhrFields = {
    withCredentials: true
  };
});

if that's not the problem why is this happening? and/or how can i solved it? it used to work until now

BTW: it works sometimes and sometimes it isn't

thanks

Not sure if this is intended behavior –

I have a simple form where users can upload a profile photo. It has one file input, but it is part of a multi-step set up process so I don't want the page refreshing. The photo selects and uploads fine, but I believe my original input field is being lumped in with the "clones" when they get removed from the DOM.

Ideally I'd like to retain the original input with its event intact so that a user can select a different photo after uploading one. It seems that currently the input and associated events are destroyed upon submit.

Plugin options:
wait: true
onResult: simple handler to insert image in to DOM

Hey!
The last version of this plugin released on NPM is 2.7.1, but the latest version in this repo is 3.0.13.
Can we get a new version on NPM?

Noticed that my document's title was being set to null after uploading a file.

The Uploader's documentTitle attribute is initialized to null on line 72

Then, documentTitle is set to document.title, but only for Firefox

Then, in various places, document.title is reassigned to the uploader.documentTitle.

Am I missing something here? I don't see this.documentTitle get assigned anywhere else.. just NULL, or the current value if you're in firefox.
This can't be the intended behavior..

I'm using this workaround for now:

$element.transloadit({...});
var uploader = $el.data('transloadit.uploader');
uploader.documentTitle = document.title;

I've been running into troubles using the lib on IE8. As far as I can tell, the JSONP "success" callback may be called with an assembly object that has bytes_expected set to 0. When renderProgress is called, a division by zero occurs at line 515 and the progress variable becomes NaN. In turn, this makes jQuery crash on the call to animate at line 523.

Wrapping the division in an if loop that sets progress to 0 when bytes_expected is 0 solved the problem for me.

I left a tab open with jquery-sdk in it, and it produced a lit of network events in console:

Not a big deal, but it does use some cpu/battery/network cycles, and we can probably do better.

Maybe you can simply rely on the browser events https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events, like we do in Uppy?

Currently, line 318 expects this.$files to be a jquery object, and results in an undefined function error if it's not. This code should fail gracefully if this.$files is null.

This is the code:

    this.$files.each(function() {
      var $clone = $(this).clone(true);
      self.$fileClones = self.$fileClones.add($clone);
      $clone.insertAfter(this);
    });

The error is coming from the FilePreview constructor. I believe the issue is simply that $ is not being passed to the constructor but is expected there.

I added PR #64 to fix this.

I'm getting errors about the use of the deprecated browser API in jQuery 1.9:

Uncaught TypeError: Cannot read property 'msie' of undefined
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

HI!
The documentation says the the first argument of the onFileSelect callback will be the filename, but when it's called after dropping a file into a Drag&Drop area, the first argument is an Object of file metadata, including the name.

I don't know which way is the intended way going forward, but I figured they should be consistent.

Hi,

reading the docs at: https://transloadit.com/docs#jquery-plugin

it is said you can trigger the upload process manually by calling:
$el.transloadit('start');

But I can't see this option at the source code ( https://github.com/transloadit/jquery-sdk/blob/master/js/lib/jquery.transloadit2.js ) and is not working showing no errors at log console.

Should it work? Or documentation is deprecated?

The plugin currently includes the params field when uploading using FormData, so I feel like it should also include the signature field automatically.

My form contains several image upload fields, and I would like to display thumbnails as soon as they are selected. That's why I am listening for the user's selection to trigger an upload:

fileInput.change(function(){
  // Trigger the file upload: How do I trigger that only the file from my current input field is uploaded?
  $(this).closest("form").trigger("submit.transloadit"); 
});

As you can see in the example, I am triggering the upload of all fields. Is there the possibility to limit upload to a specific field? I thought about setting the "exclude" option before the trigger, or moving the other file inputs out of the form temporary. Perhaps there is a nicer solution?

Hello!

I'm using maxNumberOfUploadedFiles to restrict the number of uploads.

If I attempt to upload more than the specified max number of uploads, I get the MAX_FILES_EXCEEDED error returned as you would expect. So far, so good.

However, if I then attempt to upload a number of files within the max allowable - even just a single file - I still get the MAX_FILES_EXCEEDED error returned.

It's as though Transloadit still has in memory the files from the previous attempt.

This is the code I'm using...

$('#vehicle-images-form').transloadit({
    wait: true,
    autoSubmit: false,
    triggerUploadOnFileSelection: true,
    processZeroFiles: false,
    maxNumberOfUploadedFiles: 2,
    params: {
      auth: { key: "xxx" },
      template_id: "xxx"
    },                    
    onError: function(assembly) {
        console.log(assembly);
        // handle error
    },            
    onSuccess: function(assembly) {
        console.log(assembly);
        // do something
    }
});

There is no reference to the debug option in the library. In particular, the documentation says that setting debug to false will prevent error modals. I'd like to retain the upload progress indicator, but turn off the error modal. It doesn't seem that this is possible, currently. Should I submit a PR?

If I import uppy.min.js.map into my page, console return me:
Uncaught SyntaxError: Unexpected token ':' (at line n.2)

Thanks

Would you take a patch so that all classes receive a reference to the jQuery object?

With the following configuration, if TransloadIt returns a AUTH_EXPIRED response or some other code, then the error dialog reflects that, but in the background, it still goes ahead and uploads the file (Chrome shows "Uploading (5%)" in the bottom left corner).

wait: true
processZeroFiles: false

If TransloadIt sends back an error code, it should abort the upload completely to prevent bandwidth on our and your end.

What I think needs to happen:

• The XMLHTTPRequest object needs to be stored as $request (or other variable( on the upload object for reference later
• In the event of either Uploader.prototype.stop or Uploader.prototype.cancel being called, then you need to call $request.abort() to stop the upload

Also, in this event, the transloadit form field shouldn't be filled in, and the form shouldn't be autosubmitted. At the moment, if people cancel, then hit the submit button again, it submits the form with an empty file field and a filled in transloadit form field.

When I use the plugin and I get a successful assembly, a TEXTAREA gets prepended into the FORM.

If I use the FORM in an async environment, and never reload the page where it is, the second assembly built (and every other) with that form will have that TEXTAREA there.

Then, in the plugin, if fields: true or fields: '*', the POST will send that input fields polluting the next assemblies.

What is the use case for that input field being there?¿

Assembly.stopStatusFetching() was removed in this commit: a273b23

But it is still being called here in Uploader.stop(): https://github.com/transloadit/jquery-sdk/blob/master/js/lib/jquery.transloadit.js#L531

Which causes calls to Uploader.destroy() to crash.

Are there any plans to support installing this SDK via npm & CommonJS? Thanks.