23 / resumable.js Goto Github PK

In single page apps (with AngularJS for example) it is unhandy to create instance of resumable.js each time you want to assign different query to request.

Imagine implementing upload for file manager (kind of my case). How would you specify path where to put the file?

This way?

var root = new Resumable({
  target:'/api/upload', 
  query:{path: '/''}
});

var images = new Resumable({
  target:'/api/upload', 
  query:{path: '/images''}
});

var images-christmas = new Resumable({
  target:'/api/upload', 
  query:{path: '/'images/christmas'}
});

//and many, many others

So, i thought about posibility to specify options (why only query?) for files.

How the api may looks:

var root = new Resumable({
  target:'/api/upload', 
  query:{path: '/''}
});

root.setFileOptions( {
  query: {path: '/docs'}
});
//files added to resumable.js after setting this will use option specified by fileOptions

root.setFileOptions( {
  chunkSize: 512*1024
  query: {path: '/presentaion'}
});
//files added to resumable.js after setting this will use option specified by fileOptions

root.setFileOptions();
//files added to resumable.js after setting this will use instance option

e.g. In file manager when user opens folder, you just tell resumable the change with setFileOptions.

Any thoughts? Any other API proposals for this?

When uploading Large Files in 20 MB chunks the last File chunk is never sent to the server

I use the file.cancel() method to destroy a single file from a set of uploads. This methods should abort and remove the file, and it does. The file is gone from the resumable.files list.

However, the user is then prevented from re-adding the file. Is there a way to disable whatever is preventing the re-adding of the file?

Very nice and powerful lib. I have tested, It's wonderful. However, Firefox sometimes crashed on when I try to upload (open firebug during uploading) a file with size more than 1GB.

Thanks & Regards,
Huynh.

Would be cool if I can install resumable via bower as well. Thx!

It might be more proper to discontinue chunk upload on all or more error status codes as opposed to only 415. 500 and 501.

It seems that uploading a chunk after an error status code was returned on the test() request may not be the right thing to do.

I think this could get some serious traction if you included a demo server, especially if based on node.js.

Hi,

i think this library is getting bigger and lots of breaking changes were made recently.
I suggest to tag current version as v0.1.0.
Create develop branch.
And then we are finished with all the issues, we could tag it as v1.0.0.

This will be a big help for people who are using package managers such as bower.

Hi,
I was wondering if this is possible or maybe planned to do parallel or multiple chunk uploads?

Possibly using web workers or something along those lines...

Thank you in advanced

https://github.com/23/resumable.js/blob/master/resumable.js#L585

Hi Steffen, your library is pretty cool, so thanks for you efforts...
There is an small(though serious) bug in FF22. In line 198 of your lib,
there is : file.name = file.fileName = file.fileName||file.name; // consistency across browsers for the error message, and that throw the following logical error:
TypeError: setting a property that has only a getter.

My Temp Solution:
I remove that line cause firebug and chrome are telling me that the File object always have .file attr with its proper value...

Thanks
Daniel

I am using resumable.js in my node.js project going through the sample code i am unable to find where to set the destination folder... all it doing is running partly done in windows temp folder...

anyone can help..........

ResumableFile.abort() method should be renamed to ResumableFile.pause() like in Resumable.pause() method.

Hello there

I have configured Resumable here and works fine so far. r.assignBrowse is set to the link. But when I click on it, the file browser opens and is loading forever. When I change a folder there, the waiting icon animates forever.

This is happening on my latest Firefox under OS X 10.8.5

Any clues?

I have a main page include a iframe, select file operation is in the iframe, but I want upload operation in the main page, how to do that? Insofar I want to pass the file from iframe to main page, but don't know how to pass? Is the way Ok? Or there is other better method?

hi,
this is more of a question than issue, is it possible to re-upload from a last valid chunk index or something along the lines ?

The concept is that a server checks validity of the chunks and if one is bad we "rewind" to last valid chunk and begin uploading again...

thank you in advance

We will be releasing a new version our site which makes use of resumable.JS in a couple days. We added support for uploading to Amazon S3. I'll try to submit a pull request in the next week or so.

Beta.transferbigfiles.com

Hi,

my issue is that i have no way to enable empty file uploads.

This should be controlled by minFileSize validator:
https://github.com/23/resumable.js/blob/master/resumable.js#L212

Hi,

i think it would make sense to rename ResumableFile.fileName parameter to ResumableFile.name . Similar to other parameters, such as ResumableFile.size.

I found that to work with Resumable.js, the server side should:
First, save all trunks to files like file.trunk-1, 'file.trunk-2'...;
After all trunks received, the server side combines all trunk file to a single file to finish upload.
I am extremely worried that this combination will consume a plenty of time which will slow down the file-upload progress.

Any idea to solve this problem?

https://github.com/23/resumable.js/blob/master/resumable.js#L20

Can be fixed by changing to:

this.support = (
                 (typeof(File)!=='undefined')
                 &&
                 (typeof(Blob)!=='undefined')
                 &&
                 (typeof(FileList)!=='undefined')
                 &&
                 (!!Blob.prototype.webkitSlice||!!Blob.prototype.mozSlice||!!Blob.prototype.slice||false)
                 );

This is a minor issue, but it actually caused some issues while creating angular application.

great library, thanks. i see that server side app logic is required to communicate with resumable.js on the client side, but if you're using amazon s3 for storage, server side code isn't possible.

however, amazon s3 does have a multipart api: http://aws.amazon.com/about-aws/whats-new/2010/11/10/Amazon-S3-Introducing-Multipart-Upload/

using this API is it possible to use resumable.js to upload direct to s3?

You can find a server side code for using Resumable.js on the following article

http://www.codeproject.com/Tips/452714/Using-Resumable-js-in-ASP-NET-MVC

Hi,

Thank you for creating an excellent library.

                 (typeof(File)!=='undefined')
                 &&
                 (typeof(Blob)!=='undefined')
                 &&
                 (typeof(FileList)!=='undefined')

Results from caniuse.com tells us that Opera 12.1 and IE >= 10.. have you done any testing in regards to this?

All callbacks in a library is a big mess. Some of them are synchronous and others are not. This is a big issue, because it is impossible to make extensions for frameworks such as angular.js.

For example lets look at "fileProgress" callback:

• This one is first called then file is added to queue, this happens in sync with mouse events(file drop or click).
• Secondly this callback is called again in sync, then file upload starts(Resumable.upload()).
• Then async callback is regularly called to report file progress (This is the only time "fileProgress" callback should be called actually).

There are more examples, but i think you get an idea.

I seem to have trouble getting two Resumables working on the same page.
Each on its own works as expected, but when there are two var xx = new Resumable(...) on page, it gives me Uncaught ReferenceError: outstanding is not defined.

Is this a known issue ?

While enforcing the maximum chunkSize on a Server-Side (node.js) I realized that the last chunk is often bigger than the configured chunkSize. The source code states this is how it is supposed to be at https://github.com/23/resumable.js/blob/master/resumable.js#L259

Why are we doing this? And if there is a good reason for it, shouldn't we mention the behavior in the documentation?

Currently in PHP example https://github.com/23/resumable.js/blob/master/samples/Backend%20on%20PHP.md we check if upload is finished like this:

    $total_files = 0;
    foreach(scandir($temp_dir) as $file) {
        if (stripos($file, $fileName) !== false) {
            $total_files++;
        }
    }
    // check that all the parts are present
    // the size of the last part is between chunkSize and 2*$chunkSize
    if ($total_files * $chunkSize >=  ($totalSize - $chunkSize + 1)) {

This looks ugly, i have some solutions:

• We should add one more request attribute of total chunks number such as resumableTotalChunks and change check to:

    $total_files = 0;
    foreach(scandir($temp_dir) as $file) {
        if (stripos($file, $fileName) !== false) {
            $total_files++;
        }
    }
    if ($total_files == $totalChunks) {

• Other solution could be to add parameter which would say if this is a final chunk upload. Parameter could be named as resumableIsLastChunk.
• We could create second request url to finalize upload, this approach is used by dropbox. https://www.dropbox.com/developers/core/docs#commit-chunked-upload

Hi Everyone!

First of all, many Thanks, for such a great JS Lib... :-) 👍

I found that Chrome reported an Error in Console that no method getOpt in Error Callback functions, when defining custom callback functions.

I found the error, when I was trying to implement a custom option, maxTotalSize, to limit the total size of all files uploading at a time.

maxTotalSize:undefined,
maxTotalSizeErrorCallback:function () {
  var maxSize = $.getOpt('maxTotalSize'); // <--- This Line gives error
  alert('You cannot upload more than ' + $h.formatSize(maxSize) + ' at a time.');
},
maxFiles:undefined,
maxFilesErrorCallback:function (files, errorCount) {
  var maxFiles = $.getOpt('maxFiles'); // <--- This Line gives error
  alert('Please upload ' + maxFiles + ' file' + (maxFiles === 1 ? '' : 's') + ' at a time.');
},

It works normally, i.e, when I do not declare my own callback functions. But when I do, it just give this error.

So, the method $.getOpt doesn't work, when declaring manually. Otherwise, it works by defaults.

Currently only fileParameterName is renamable, other parameters such as resumableChunkNumber, resumableChunkSize, resumableCurrentChunkSize, resumableTotalSize, resumableIdentifier, resumableFilename, resumableRelativePath should be renamable too.

When a download is complete, I have no way to find out about the location where the file is accessible.

To keep it was general usable as possible I would recommend to add the last xhr request to the fileSuccess event.

Users who are interested into the location of the new file could then read the location header and update e.g. an <img>-src automatically.

Send the MD5 or SHA1 CRC for the entire file with the last chunk

SCRIPT5045: Assignment to read-only properties is not allowed in strict mode
resumable.js, line 197 character 13

https://github.com/23/resumable.js/blob/master/resumable.js#L197

I am using php example. When uploading a file of 3.2MB there are 3 parts : 1MB,1MB and 1,2MB when maxChunckSize is 1MB. Due to this issue php example work incorrectly

http://www.codeproject.com/Tips/510845/ResumableJS-with-ASP-NET-MVC?fb_action_ids=518145871543105&fb_action_types=og.likes&fb_source=aggregation&fb_aggregation_id=246965925417366

I think it's a little problematic to handle every 404 error as "file not there, re-upload it". I did define a wrong URL and the server send a huge amount of requests to the server because it wanted to upload the file.

IMHO if an upload is in progress, and the server responds with a 404 error, the complete upload should be stopped.

A 500 error seems too general to stop uploads on the first occurrence. It is possible (and likely since a more specific code was not returned) that the error has nothing to do with the file.

It would be better to use a back off approach with an increasing delay that gives up after X sequential 500 errors.

Please add

"use strict";

at the top of resumable.js and fix all errors!

Such as: Uncaught ReferenceError: $h is not defined
Currently $h variable is assigned to a global scope and this is not a good idea!

Am suggesting to add:

ResumableFile.pause();
ResumableFile.resume();

Currently similar behaviour can be achieved by hacking around with ResumableFile.abort();, but having this explicit feature might be nice.

It would be implemented by adding a property to ResumableFile during creation along with two method:

$.paused = false;
$.pause = function(){
  $.paused = true;
  $.abort = true;
}
$.resume = function(){
  $.paused = false;
  $.resumableObj.upload();
}

Finally, Resumable.uploadNextChunk() would need to check for paused status of files when selecting out next chunk to upload.`

Hi,

I have noticed that $.removeFile function creates new array. This might be an issue if we are going to use such frameworks as angular.js.

https://github.com/23/resumable.js/blob/master/resumable.js#L700

I suggest changing this function to:

$.removeFile = function(file){
    for(var i = $.files.length - 1; i >= 0; i--) {
        if($.files[i] === file) {
           $.files.splice(i, 1);
        }
    }
};

Hi, i have noticed one more bug.
The issue is that chunks are still being uploaded after ResumableFile abort() function is called. Function usually works correctly, but it doesn't once it is called during chunk testing.

If you think this might be useful, let me know and I'll submit a pull request.

One way I plan to use this feature would be to setup several DNS entries for a website and use the callback to cycle through them. This would allow more chunks to be uploaded simultaneously without running into any max connections per host limits imposed by the browser.

Right now every request to upload a file includes the details about the upload.

Having an option to send the parameters like resumableChunkNumber in the HTTP body would simplify the server log files a lot.

I have noticed that occasionally I get multiple sets of query parameters in a single GET request. Is this by design or a bug?

Seems like it would be difficult for me to tell the client I have received one chunk but not the other if this is by design.

Example of query parameters taken straight form Chrome debug:

http://localhost:8080/upload-token?upload_token=my_token&resumableChunkNumber=2&resumableChunkSize=64&resumableCurrentChunkSize=64&resumableTotalSize=341&resumableIdentifier=341-pgadminlog&resumableFilename=pgadmin.log&resumableRelativePath=pgadmin.log&resumableChunkNumber=3&resumableChunkSize=64&resumableCurrentChunkSize=64&resumableTotalSize=341&resumableIdentifier=341-pgadminlog&resumableFilename=pgadmin.log&resumableRelativePath=pgadmin.log

Hi,

I am currently thinking about new features, and it seems there is no way how to calculate uploading speed. Function $.uploadedFileSize for ResumableFile could be used for that. What do you think?

Hi,

I have noticed that "ResumableFile" $.retry function works a bit weird. It retries all files instead of one.

https://github.com/23/resumable.js/blob/master/resumable.js#L290

I want to add support for maxFileSize, maxFiles, and maxUploadSize. Each time a file is added, it is first validated against these limits (if they are passed in as options) and marked as valid or invalid. Invalid files would not be uploaded but would still fire an event to let the user know they were added to the queue.

I was thinking a revalidate method could be added to Resumable and calling it would loop through the invalid files and update their validation status. Any files that are updated from invalid to valid would automatically be included for upload (e.g. if a valid file is removed, we may want to revalidate so that an invalid file which exceeded the maxFiles limit would now be valid and included in the upload).

I've toyed around with several possible implementation and wanted to see what your thoughts were before submitting a pull request.

I can't seem to figure out how to implement a speed function in this script. I can't find a way to get the uploaded bytes. Does anyone have an idea or an implementation suggestion?

Hello there

I have this code:

When I try to use the server backend using the PHP expample, $_FILES are empty.
The download does not come with the uploader.js so I assume I don't need it...

Regards

Hi,

I think it would be great to have $.isUploading function for ResumableFile.
For now there is no way to determine if file is being uploaded.