Javascript Upload File Chunk Wait for Ack

Menstruum.js

Flow.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. (Demo)

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

Flow.js does not have any external dependencies other than the HTML5 File API. This is relied on for the ability to clamper files into smaller pieces. Currently, this means that support is express to Firefox 4+, Chrome eleven+, Safari half-dozen+ and Internet Explorer 10+.

Samples and examples are available in the samples/ binder. Please push your own as Markdown to assistance certificate the project.

Can I see a demo?

Flow.js + angular.js file upload demo - ng-menstruum extension page https://github.com/flowjs/ng-menstruum

JQuery and node.js backend demo https://github.com/flowjs/flow.js/tree/master/samples/Node.js

How can I install information technology?

Download a latest build from https://github.com/flowjs/flow.js/releases it contains development and minified product files in dist/ binder.

or use npm:

          npm install @flowjs/catamenia.js                  

or use bower:

          bower install menstruum.js#~2                  

or use git clone

          git clone https://github.com/flowjs/flow.js                  

How can I use it?

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

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

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

          flow.assignBrowse(certificate.getElementById('browseButton')); flow.assignDrop(certificate.getElementById('dropTarget'));                  

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

          flow.on('fileAdded', function(file, upshot){     panel.log(file, outcome); }); period.on('fileSuccess', role(file,message){     console.log(file,message); }); flow.on('fileError', function(file, message){     console.log(file, message); });                  

How practise I ready information technology upwards with my server?

Almost of the magic for Flow.js happens in the user's browser, but files still need to be reassembled from chunks on the server side. This should be a adequately simple job and can be achieved in whatever web framework or linguistic communication, which is able to receive file uploads.

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

• flowChunkNumber: The index of the chunk in the current upload. Get-go chunk is 1 (no base of operations-0 counting hither).
• flowTotalChunks: The total number of chunks.
  
• flowChunkSize: The general chunk size. Using this value and flowTotalSize you lot can summate the full number of chunks. Please note that the size of the data received in the HTTP might be lower than flowChunkSize of this for the terminal chunk for a file.
• flowTotalSize: The full file size.
• flowIdentifier: A unique identifier for the file contained in the request.
• flowFilename: The original file name (since a bug in Firefox results in the file name not being transmitted in chunk multipart posts).
• flowRelativePath: 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 surround information technology could happen, and this case is exactly what Flow.js is designed for.

For every request, yous can ostend reception in HTTP status codes (can exist alter through the permanentErrors selection):

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

Handling GET (or test() requests)

Enabling the testChunks option volition allow uploads to be resumed after browser restarts and even beyond browsers (in theory you could even run the aforementioned file upload across multiple tabs or dissimilar browsers). The POST data requests listed are required to apply Flow.js to receive information, just you can extend support by implementing a corresponding Become request with the same parameters:

• If this asking returns a 200, 201 or 202 HTTP code, the chunks is causeless to accept been completed.
• If request returns a permanent error status, upload is stopped.
• If request returns annihilation else, the chunk volition exist uploaded in the standard mode.

Later on this is washed and testChunks enabled, an upload tin can quickly grab up even after a browser restart by merely verifying already uploaded chunks that do not need to exist uploaded again.

Full documentation

Flow

Configuration

The object is loaded with a configuration options:

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

Bachelor configuration options are:

• target The target URL for the multipart POST request. This can exist a cord or a function. If a function, it will be passed a FlowFile, a FlowChunk and isTest boolean (Default: /)
• singleFile Enable single file upload. Once one file is uploaded, second file volition overtake existing ane, first i will be canceled. (Default: false)
• chunkSize The size in bytes of each uploaded chunk of data. This tin can exist a number or a function. If a function, it will be passed a FlowFile. The final uploaded chunk will exist at least this size and upwards to two the size, encounter Event #51 for details and reasons. (Default: 1*1024*1024, 1MB)
• forceChunkSize Forcefulness 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: three)
• fileParameterName The proper name of the multipart POST parameter to use for the file clamper (Default: file)
• query Extra parameters to include in the multipart POST with data. This can be an object or a function. If a function, it will be passed a FlowFile, a FlowChunk object and a isTest boolean (Default: {})
• headers Extra headers to include in the multipart Mail service with information. If a function, it volition be passed a FlowFile, a FlowChunk object and a isTest boolean (Default: {})
• withCredentials Standard CORS requests practice not send or set any cookies by default. In order to include cookies every bit part of the request, you need to gear up the withCredentials property to true. (Default: simulated)
• method Method to apply when POSTing chunks to the server (multipart or octet) (Default: multipart)
• testMethod HTTP method to use when chunks are beingness tested. If set to a function, it will be passed a FlowFile and a FlowChunk arguments. (Default: Become)
• uploadMethod HTTP method to use when chunks are being uploaded. If fix to a function, it will be passed a FlowFile and a FlowChunk arguments. (Default: Mail)
• allowDuplicateUploads In one case a file is uploaded, let reupload of the aforementioned file. Past default, if a file is already uploaded, information technology will exist skipped unless the file is removed from the existing Flow object. (Default: fake)
• 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 merely 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 back up from only the first chunk. (Default: false)
• testChunks Make a Become 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 fifty-fifty a reckoner restart. (Default: true)
• preprocess Optional function to process each chunk earlier testing & sending. To the function it will be passed the chunk equally parameter, and should telephone call the preprocessFinished method on the chunk when finished. (Default: nil)
• changeRawDataBeforeSend Optional function to change Raw Data just before the XHR Request can exist sent for each clamper. To the part, it will exist passed the chunk and the data every bit a Parameter. Return the data which will exist then sent to the XHR request without further modification. (Default: nothing). This is helpful when using FlowJS with Google Cloud Storage. Usage example can be seen #276. (For more, check upshot #170).
• initFileFn Optional function to initialize the fileObject. To the function it will be passed a FlowFile and a FlowChunk arguments.
• readFileFn Optional part wrapping reading operation from the original file. To the function it will be passed the FlowFile, the startByte and endByte, the fileType and the FlowChunk.
• generateUniqueIdentifier Override the function that generates unique identifiers for each file. (Default: null)
• maxChunkRetries The maximum number of retries for a chunk earlier the upload is failed. Valid values are whatever positive integer and undefined for no limit. (Default: 0)
• chunkRetryInterval The number of milliseconds to look before retrying a chunk on a non-permanent mistake. Valid values are any positive integer and undefined for firsthand retry. (Default: undefined)
• progressCallbacksInterval The time interval in milliseconds between progress reports. Ready it to 0 to handle each progress callback. (Default: 500)
• speedSmoothingFactor Used for computing boilerplate upload speed. Number from i to 0. Set to 1 and boilerplate upload speed wil exist equal to current upload speed. For longer file uploads it is better fix this number to 0.02, considering time remaining estimation will exist more accurate. This parameter must be adjusted together with progressCallbacksInterval parameter. (Default 0.1)
• successStatuses Response is success if response status is in this listing (Default: [200,201, 202])
• permanentErrors Response fails if response status is in this list (Default: [404, 415, 500, 501])

Properties

• .back up A boolean value indicator whether or not Menstruation.js is supported by the current browser.
• .supportDirectory A boolean value, which indicates if browser supports directory uploads.
• .opts A hash object of the configuration of the Flow.js instance.
• .files An assortment of FlowFile file objects added by the user (see total docs for this object type below).

Methods

• .assignBrowse(domNodes, isDirectory, singleFile, attributes) Assign a scan action to one or more DOM nodes.
  • domNodes assortment of dom nodes or a single node.
  • isDirectory Pass in true to let directories to be selected (Chrome merely, back up can exist checked with supportDirectory property).
  • singleFile To prevent multiple file uploads prepare this to true. As well await at config parameter singleFile.
  • attributes Pass object of keys and values to set custom attributes on input fields. For example, you can fix accept aspect to image/*. This means that user will be able to select only images. Total list of attributes: https://world wide web.w3.org/wiki/HTML/Elements/input/file

Note: avert using a and button tags as file upload buttons, use span instead.

• .assignDrop(domNodes) Assign one or more than DOM nodes as a driblet target.
• .unAssignDrop(domNodes) Unassign ane or more DOM nodes every bit a drop target.
• .on(upshot, callback) Heed for event from Menses.js (see below)
• .off([event, [callback]]):
  • .off() All events are removed.
  • .off(event) Remove all callbacks of specific outcome.
  • .off(outcome, callback) Remove specific callback of event. callback should be a Office.
• .upload() Beginning or resume uploading.
• .pause() Intermission uploading.
• .resume() Resume uploading.
• .abolish() Cancel upload of all FlowFile objects and remove them from the listing.
• .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 listing of files.
• .removeFile(file) Cancel upload of a specific FlowFile object on the listing from the list.
• .getFromUniqueIdentifier(uniqueIdentifier) Expect upwards a FlowFile object past its unique identifier.
• .getSize() Returns the full size of the upload in bytes.
• .sizeUploaded() Returns the total size uploaded of all files in bytes.
• .timeRemaining() Returns remaining time to upload all files in seconds. Accuracy is based on boilerplate speed. If speed is zero, time remaining will be equal to positive infinity Number.POSITIVE_INFINITY

Events

• .fileSuccess(file, message, chunk) A specific file was completed. First argument file is instance of FlowFile, second argument bulletin contains server response. Response is e'er a string. Third argument chunk is instance of FlowChunk. Yous can get response status by accessing xhr object chunk.xhr.status.
• .fileProgress(file, clamper) Uploading progressed for a specific file.
• .fileAdded(file, event) This outcome is used for file validation. To decline this file return false. This event is also called earlier file is added to upload queue, this means that calling menstruum.upload() office will not first electric current file upload. Optionally, you can apply the browser event object from when the file was added.
• .filesAdded(array, result) Same as fileAdded, but used for multiple file validation.
• .filesSubmitted(array, event) Same as filesAdded, only happens later the file is added to upload queue. Can be used to start upload of currently added files.
• .fileRemoved(file) The specific file was removed from the upload queue. Combined with filesSubmitted, tin exist used to notify UI to update its land to friction match the upload queue.
• .fileRetry(file, chunk) Something went wrong during upload of a specific file, uploading is being retried.
• .fileError(file, message, clamper) An error occurred during upload of a specific file.
• .uploadStart() Upload has been started on the Flow object.
• .complete() Uploading completed.
• .progress() Uploading progress.
• .error(bulletin, file, clamper) An error, including fileError, occurred.
• .catchAll(event, ...) Mind to all the events listed to a higher place with the same callback function.

FlowFile

FlowFile constructor can be accessed in Flow.FlowFile.

Properties

• .flowObj A back-reference to the parent Flow object.
• .file The correlating HTML5 File object.
• .name The name of the file.
• .relativePath The relative path to the file (defaults to file name if relative path doesn't be)
• .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.
• .averageSpeed Average upload speed, bytes per 2nd.
• .currentSpeed Current upload speed, bytes per 2d.
• .chunks An array of FlowChunk items. Y'all shouldn't need to dig into these.
• .paused Indicated if file is paused.
• .fault Indicated if file has encountered an error.

Methods

• .progress(relative) Returns a float between 0 and one indicating the current upload progress of the file. If relative is truthful, the value is returned relative to all files in the Flow.js instance.
• .pause() Pause uploading the file.
• .resume() Resume uploading the file.
• .abolish() Abort uploading the file and delete information technology from the list of files to upload.
• .retry() Retry uploading the file.
• .bootstrap() Rebuild the state of a FlowFile 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.
• .sizeUploaded() Returns size uploaded in bytes.
• .timeRemaining() Returns remaining time to finish upload file in seconds. Accuracy is based on average speed. If speed is zero, time remaining will be equal to positive infinity Number.POSITIVE_INFINITY
• .getExtension() Returns file extension in lowercase.
• .getType() Returns file blazon.

Contribution

To ensure consistency throughout the source code, keep these rules in heed equally you are working:

• All features or problems fixes must be tested by one or more specs.

• Nosotros follow the rules contained in Google's JavaScript Style Guide with an exception nosotros wrap all lawmaking at 100 characters.

Installation Dependencies

1. To clone your Github repository, run: panel git clone [email protected]:<github username>/period.js.git
2. To go to the Menstruum.js directory, run: console cd flow.js
3. To add together node.js dependencies console npm install ## Testing

Our unit and integration tests are written with Jasmine and executed with Karma. To run all of the tests on Chrome run:

          grunt karma:watch                  

Or choose other browser

          grunt karma:watch --browsers=Firefox,Chrome                  

Browsers should be comma separated and example sensitive.

To re-run tests just alter whatsoever source or test file.

Automatic tests is running after every commit at travis-ci.

Running test on sauceLabs

1. Connect to sauce labs https://saucelabs.com/docs/connect
2. grunt exam --sauce-local=true --sauce-username=**** --sauce-access-key=***

other browsers tin be used with --browsers flag, available browsers: sl_opera,sl_iphone,sl_safari,sl_ie10,sl_chrome,sl_firefox

Origin

Flow.js was inspired by and evolved from https://github.com/23/resumable.js. Library has been supplemented with tests and features, such equally drag and drop for folders, upload speed, time remaining estimation, separate files pause, resume and more.

stewartmilive.blogspot.com

Source: https://js.libhunt.com/flow-js-alternatives

Share this post