#1285 ✓not_for_core
GD

File upload Management

Reported by GD | November 21st, 2011 @ 03:50 PM

Hi,

I would like to suggest the possibility to manage file uploads with Ajax request.

I created a class which sends one or multiple files via an Ajax request (with queue management). Everything works perfectly (no Flash, just pure html/js with prototype).

But there is one major problem, the only way to get the upload progress (to make a progress bar obviously) is with the 'xhr.upload.onprogress' method which is not implemented in Prototype (If it is possible with 'onInteractive', please, tell me how, I wasnt able to get it to work).

As a matter of fact, since the request is created and sent within the Ajax.Request class constructor, it's impossible to modify the 'transport' object after creation but before sending the request.

Easily enough, only 2 lines of code are necessary in Prototype to make it work, right in the middle of that very constructor (line 1492 [Ajax.Request.initialize()]) :

  initialize: function($super, url, options) {
    $super(options);
    this.transport = Ajax.getTransport();
    this.request(url);
  },

becomming :

  initialize: function($super, url, options) {
    $super(options);
    this.transport = Ajax.getTransport();

    // NEW LINES
    if (options && options.onUpload && Object.isFunction(options.onUpload))
        this.transport.upload.onprogress = options.onUpload;

    this.request(url);
  },

Allowing me to do :

new Ajax.Request ('/path/to/script', {
    method: 'post',
    requestHeaders: {
        'Content-Type': "application/octet-stream",
    },
    postBody: $('input_file_id,'),
    onUpload: function (data) {
        if (data.lengthComputable)
            // Displaying percent uploaded, draw a progress bar, etc...
            $('ProgressElement').update(Math.floor(100 * data.loaded / data.total));
    },
    onSuccess: function (xhr) {
        $('ProgressElement').update('OK');
    }
});

Or, as I'm sure you will, make something clever available within the onInteractive method.

PS : By the way, I don't know how I could possibly thank you enough for the time you made me save by using Prototype (and don't get me started with Explorer compatibility...) so, THANK YOU !

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

People watching this ticket

Attachments

Pages