Coder Social home page Coder Social logo

23 / resumable.js Goto Github PK

View Code? Open in Web Editor NEW
4.6K 142.0 610.0 463 KB

A JavaScript library for providing multiple simultaneous, stable, fault-tolerant and resumable/restartable uploads via the HTML5 File API.

License: MIT License

HTML 2.69% JavaScript 94.74% TypeScript 2.57%

resumable.js's Introduction

What is Resumable.js

Resumable.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.

The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each file into small chunks. Then, whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause, resume and even recover uploads without losing state because only the currently uploading chunks will be aborted, not the entire upload.

Resumable.js does not have any external dependencies other than the HTML5 File API. This is relied on for the ability to chunk files into smaller pieces. Currently, this means that support is widely available in to Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+.

Samples and examples are available in the samples/ folder. Please push your own as Markdown to help document the project.

How can I use it?

A new Resumable object is created with information of what and where to post:

var r = new Resumable({
  target:'/api/photo/redeem-upload-token',
  query:{upload_token:'my_token'}
});
// Resumable.js isn't supported, fall back on a different method
if(!r.support) location.href = '/some-old-crappy-uploader';

To allow files to be selected and drag-dropped, you need to assign a drop target and a DOM item to be clicked for browsing:

r.assignBrowse(document.getElementById('browseButton'));
r.assignDrop(document.getElementById('dropTarget'));

It is recommended to use an HTML span for the browse button. Using an actual button does not work reliably across all browsers, because Resumable.js creates the file input as a child of this control, and this may be invalid in the case of an HTML button.

After this, interaction with Resumable.js is done by listening to events:

r.on('fileAdded', function(file, event){
    ...
  });
r.on('fileSuccess', function(file, message){
    ...
  });
r.on('fileError', function(file, message){
    ...
  });

How do I set it up with my server?

Most of the magic for Resumable.js happens in the user's browser, but files still need to be reassembled from chunks on the server side. This should be a fairly simple task, which and can be achieved using any web framework or language that is capable of handling file uploads.

To handle the state of upload chunks, a number of extra parameters are sent along with all requests:

  • resumableChunkNumber: The index of the chunk in the current upload. First chunk is 1 (no base-0 counting here).
  • resumableTotalChunks: The total number of chunks.
  • resumableChunkSize: The general chunk size. Using this value and resumableTotalSize you can calculate the total number of chunks. Please note that the size of the data received in the HTTP might be higher than resumableChunkSize for the last chunk for a file.
  • resumableTotalSize: The total file size.
  • resumableIdentifier: A unique identifier for the file contained in the request.
  • resumableFilename: The original file name (since a bug in Firefox results in the file name not being transmitted in chunk multipart posts).
  • resumableRelativePath: The file's relative path when selecting a directory (defaults to file name in all browsers except Chrome).

You should allow for the same chunk to be uploaded more than once; this isn't standard behaviour, but on an unstable network environment it could happen, and this case is exactly what Resumable.js is designed for.

For every request, you can confirm reception in HTTP status codes (can be changed through the permanentErrors option):

  • 200, 201: The chunk was accepted and correct. No need to re-upload.
  • 400, 404, 409, 415, 500, 501: The file for which the chunk was uploaded is not supported, cancel the entire upload.
  • Anything else: Something went wrong, but try reuploading the file.

Handling GET (or test() requests)

Enabling the testChunks option will allow uploads to be resumed after browser restarts and even across browsers (in theory you could even run the same file upload across multiple tabs or different browsers). The POST data requests listed are required to use Resumable.js to receive data, but you can extend support by implementing a corresponding GET request with the same parameters:

  • If this request returns a 200 HTTP code, the chunks is assumed to have been completed.
  • If the request returns anything else, the chunk will be uploaded in the standard fashion. (It is recommended to return 204 No Content in these cases if possible to avoid unwarranted notices in browser consoles.)

After this is done and testChunks enabled, an upload can quickly catch up even after a browser restart by simply verifying already uploaded chunks that do not need to be uploaded again.

Full documentation

Resumable

Configuration

The object is loaded with a configuration hash:

var r = new Resumable({opt1:'val', ...});

All POST parameters can be omitted by setting them to a falsy value (e.g. null, false or empty string). Available configuration options are:

  • target The target URL for the multipart POST request. This can be a string or a function that allows you you to construct and return a value, based on supplied params. (Default: /)
  • testTarget The target URL for the GET request to the server for each chunk to see if it already exists. This can be a string or a function that allows you you to construct and return a value, based on supplied params. (Default: null)
  • chunkSize The size in bytes of each uploaded chunk of data. The last uploaded chunk will be at least this size and up to two the size, see Issue #51 for details and reasons. (Default: 1*1024*1024)
  • forceChunkSize Force all chunks to be less or equal than chunkSize. Otherwise, the last chunk will be greater than or equal to chunkSize. (Default: false)
  • simultaneousUploads Number of simultaneous uploads (Default: 3)
  • fileParameterName The name of the multipart request parameter to use for the file chunk (Default: file)
  • chunkNumberParameterName The name of the chunk index (base-1) in the current upload POST parameter to use for the file chunk (Default: resumableChunkNumber)
  • totalChunksParameterName The name of the total number of chunks POST parameter to use for the file chunk (Default: resumableTotalChunks)
  • chunkSizeParameterName The name of the general chunk size POST parameter to use for the file chunk (Default: resumableChunkSize)
  • totalSizeParameterName The name of the total file size number POST parameter to use for the file chunk (Default: resumableTotalSize)
  • identifierParameterName The name of the unique identifier POST parameter to use for the file chunk (Default: resumableIdentifier)
  • fileNameParameterName The name of the original file name POST parameter to use for the file chunk (Default: resumableFilename)
  • relativePathParameterName The name of the file's relative path POST parameter to use for the file chunk (Default: resumableRelativePath)
  • currentChunkSizeParameterName The name of the current chunk size POST parameter to use for the file chunk (Default: resumableCurrentChunkSize)
  • typeParameterName The name of the file type POST parameter to use for the file chunk (Default: resumableType)
  • query Extra parameters to include in the multipart request with data. This can be an object or a function. If a function, it will be passed a ResumableFile and a ResumableChunk object (Default: {})
  • testMethod Method for chunk test request. (Default: 'GET')
  • uploadMethod HTTP method to use when sending chunks to the server (POST, PUT, PATCH) (Default: POST)
  • parameterNamespace Extra prefix added before the name of each parameter included in the multipart POST or in the test GET. (Default: '')
  • headers Extra headers to include in the multipart POST with data. This can be an object or a function that allows you to construct and return a value, based on supplied file (Default: {})
  • method Method to use when sending chunks to the server (multipart or octet) (Default: multipart)
  • prioritizeFirstAndLastChunk Prioritize first and last chunks of all files. This can be handy if you can determine if a file is valid for your service from only the first or last chunk. For example, photo or video meta data is usually located in the first part of a file, making it easy to test support from only the first chunk. (Default: false)
  • testChunks Make a GET request to the server for each chunks to see if it already exists. If implemented on the server-side, this will allow for upload resumes even after a browser crash or even a computer restart. (Default: true)
  • preprocess Optional function to process each chunk before testing & sending. Function is passed the chunk as parameter, and should call the preprocessFinished method on the chunk when finished. (Default: null)
  • preprocessFile Optional function to process each file before testing & sending the corresponding chunks. Function is passed the file as parameter, and should call the preprocessFinished method on the file when finished. (Default: null)
  • generateUniqueIdentifier(file, event) Override the function that generates unique identifiers for each file. May return Promise-like object with then() method for asynchronous id generation. Parameters are the ES File object and the event that led to adding the file. (Default: null)
  • maxFiles Indicates how many files can be uploaded in a single session. Valid values are any positive integer and undefined for no limit. (Default: undefined)
  • maxFilesErrorCallback(files, errorCount) A function which displays the please upload n file(s) at a time message. (Default: displays an alert box with the message Please n one file(s) at a time.)
  • minFileSize The minimum allowed file size. (Default: undefined)
  • minFileSizeErrorCallback(file, errorCount) A function which displays an error a selected file is smaller than allowed. (Default: displays an alert for every bad file.)
  • maxFileSize The maximum allowed file size. (Default: undefined)
  • maxFileSizeErrorCallback(file, errorCount) A function which displays an error a selected file is larger than allowed. (Default: displays an alert for every bad file.)
  • fileType The file types allowed to upload. An empty array allow any file type. (Default: [])
  • fileTypeErrorCallback(file, errorCount) A function which displays an error a selected file has type not allowed. (Default: displays an alert for every bad file.)
  • maxChunkRetries The maximum number of retries for a chunk before the upload is failed. Valid values are any positive integer and undefined for no limit. (Default: undefined)
  • permanentErrors List of HTTP status codes that define if the chunk upload was a permanent error and should not retry the upload. (Default: [400, 404, 409, 415, 500, 501])
  • chunkRetryInterval The number of milliseconds to wait before retrying a chunk on a non-permanent error. Valid values are any positive integer and undefined for immediate retry. (Default: undefined)
  • withCredentials Standard CORS requests do not send or set any cookies by default. In order to include cookies as part of the request, you need to set the withCredentials property to true. (Default: false)
  • xhrTimeout The timeout in milliseconds for each request (Default: 0)
  • setChunkTypeFromFile Set chunk content-type from original file.type. (Default: false, if false default Content-Type: application/octet-stream)
  • dragOverClass The class name to add on drag over an assigned drop zone. (Default: dragover)

Properties

  • .support A boolean value indicator whether or not Resumable.js is supported by the current browser.
  • .opts A hash object of the configuration of the Resumable.js instance.
  • .files An array of ResumableFile file objects added by the user (see full docs for this object type below).

Methods

  • .assignBrowse(domNodes, isDirectory) Assign a browse action to one or more DOM nodes. Pass in true to allow directories to be selected (Chrome only). See the note above about using an HTML span instead of an actual button.
  • .assignDrop(domNodes) Assign one or more DOM nodes as a drop target.
  • .on(event, callback) Listen for event from Resumable.js (see below)
  • .upload() Start or resume uploading.
  • .pause() Pause uploading.
  • .cancel() Cancel upload of all ResumableFile objects and remove them from the list.
  • .progress() Returns a float between 0 and 1 indicating the current upload progress of all files.
  • .isUploading() Returns a boolean indicating whether or not the instance is currently uploading anything.
  • .addFile(file) Add a HTML5 File object to the list of files.
  • .addFiles(files) Add an Array of HTML5 File objects to the list of files.
  • .removeFile(file) Cancel upload of a specific ResumableFile object on the list from the list.
  • .getFromUniqueIdentifier(uniqueIdentifier) Look up a ResumableFile object by its unique identifier.
  • .getSize() Returns the total size of the upload in bytes.

Events

  • .fileSuccess(file, message) A specific file was completed. message is the response body from the server.
  • .fileProgress(file, message) Uploading progressed for a specific file.
  • .fileAdded(file, event) A new file was added. Optionally, you can use the browser event object from when the file was added.
  • .filesAdded(arrayAdded, arraySkipped) New files were added (and maybe some have been skipped).
  • .fileRetry(file) Something went wrong during upload of a specific file, uploading is being retried.
  • .fileError(file, message) An error occurred during upload of a specific file.
  • .uploadStart() Upload has been started on the Resumable object.
  • .complete() Uploading completed.
  • .progress() Uploading progress.
  • .error(message, file) An error, including fileError, occurred.
  • .pause() Uploading was paused.
  • .beforeCancel() Triggers before the items are cancelled allowing to do any processing on uploading files.
  • .cancel() Uploading was canceled.
  • .chunkingStart(file) Started preparing file for upload
  • .chunkingProgress(file,ratio) Show progress in file preparation
  • .chunkingComplete(file) File is ready for upload
  • .catchAll(event, ...) Listen to all the events listed above with the same callback function.

ResumableFile

Properties

  • .resumableObj A back-reference to the parent Resumable object.
  • .file The correlating HTML5 File object.
  • .fileName The name of the file.
  • .relativePath The relative path to the file (defaults to file name if relative path doesn't exist)
  • .size Size in bytes of the file.
  • .uniqueIdentifier A unique identifier assigned to this file object. This value is included in uploads to the server for reference, but can also be used in CSS classes etc when building your upload UI.
  • .chunks An array of ResumableChunk items. You shouldn't need to dig into these.

Methods

  • .progress(relative) Returns a float between 0 and 1 indicating the current upload progress of the file. If relative is true, the value is returned relative to all files in the Resumable.js instance.
  • .abort() Abort uploading the file.
  • .cancel() Abort uploading the file and delete it from the list of files to upload.
  • .retry() Retry uploading the file.
  • .bootstrap() Rebuild the state of a ResumableFile object, including reassigning chunks and XMLHttpRequest instances.
  • .isUploading() Returns a boolean indicating whether file chunks is uploading.
  • .isComplete() Returns a boolean indicating whether the file has completed uploading and received a server response.
  • .markChunksCompleted() starts upload from the next chunk number while marking all previous chunks complete. Must be called before upload() method.

Alternatives

This library is explicitly designed for modern browsers supporting advanced HTML5 file features, and the motivation has been to provide stable and resumable support for large files (allowing uploads of several GB files through HTTP in a predictable fashion).

If your aim is just to support progress indications during upload/uploading multiple files at once, Resumable.js isn't for you. In those cases, something like Plupload provides the same features with wider browser support.

resumable.js's People

Contributors

2xyo avatar aaronleesmith avatar aidask avatar alexcouret avatar azmenak avatar bantam avatar cooltoast avatar davydof avatar devatwork avatar dilab avatar edtechd avatar frank-fan avatar frimko avatar garjitech avatar guilhermewop avatar guzmanfg avatar jamescarlos avatar matthewdenobrega avatar mimecuvalo avatar mrawdon avatar nickdatum avatar niklr avatar pioh avatar renzof avatar sreuter-atl avatar steffentchr avatar superpat45 avatar thewilli avatar vsivsi avatar yycdataaction avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

resumable.js's Issues

File upload speed/eta

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?

Crash on Firfox 16

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.

Parameters in POST body

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.

Suggestion: Callback clean-up [v2]

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.

Do not give up after the first 500 error.

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.

Multiple Resumables on page

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 ?

Parallel Chunk Upload

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

Issues

Hello there

I have this code:

<script> var r = new Resumable({ target:'receiver.php', query:{upload_token:'', id:'1'} }); r.assignDrop($('.resumable-drop')); r.assignBrowse($('.resumable-browse')); r.on('fileAdded', function(file){ $("#progress").show().progressbar(); }); r.on('fileAdded', function(file,message){ console.log(file); $("#progress").hide().progressbar('value',0); r.upload(); }); r.on('.progress', function() { console.log(r.progress()); }); </script>

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

Handling 404 errors as "file-not-found" causes infinite loop

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.

Bug in Firefox 22

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

Demo server

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

Add a callback to allow the upload url to be modified for each chunk

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.

Some doubt about resumable.js

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?

Parameters naming

Hi,

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

Simplify checking if upload is completed

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) {

single page website - file options

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?

Support for other browser vendors

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?

Suggestion: Pausing/resumable individual files [v2]

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.`

Upload to s3

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

File browser loading forever

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?

CRC support

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

Renamable parameters

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

"has no method getOpt" in Error Callback functions

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.

"use strict";

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!

Provide last request with fileSuccess event

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.

last chunck is bigger than maxChunckSize

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

Support maxFileSize, maxFiles, and maxUploadSize

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.

ResumableFile abort() function is not working

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.

Re-upload from last valid chunk?

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

Destination Folder in Node.js

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..........

Multiple chunk parameters in single GET request

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

Versioning

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.

how to pass a file to Resumable?

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?

5xx and 4xx HTTP status codes for test() requests

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.

Remove, followed by re-add

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.