resumable.js
A JavaScript library for providing multiple simultaneous, stable, fault-tolerant and resumable/restartable uploads via the HTML5 File API.
Resumable.js, JavaScript magic for simultaneous, stable and resumable uploads
I have to upload video to youtube. I am uploading video using MediaHttpUploader with resumable upload.
I want to cancel this upload during media progress. How can I do this?
Source: (StackOverflow)
I am trying to use resumable.js for my application for file uploads. It works fine and uploads the file.
Problem occurs if after a file is uploaded successfully, I try to select or drop same file again, it does not trigger the file upload(r.upload()) till i refresh the page.
Is there any way to clear file list from resumable obkect after all files are uploaded so that they can be selected again?
Also is there a way to introduce some delay(like sleep(5)) before sending another chunk to server.
Source: (StackOverflow)
I am trying to use resumable.js from Dart with this code:
var rs = new JS.JsObject(JS.context['Resumable'], [new JS.JsObject.jsify({
'target':context.server+'/upload'
})]);
files.forEach((file) {
rs.callMethod("addFile",[file]);
});
files variable is defined as List<File> (dart.html.File). When I check properties of rs object with these two lines:
JS.context["console"].callMethod("log",[rs['opts']]);
JS.context["console"].callMethod("log",[rs['files']]);
I find that rs.opts are initialized correctly, but rs.files always contains instances of ResumableFile with length 1. I guess that it is because method addFile expects parameter to be instance of Javascript File but it gets instanceof dart:html.File.
Do you have any idea how to convert dart:html.File to Javascript File or how to pass argument to resumable.js?
I know that I can alternatively use methods assignBrowse and assignDrop, but I would like to stick to my solution.
Source: (StackOverflow)
I am trying to implement Resumable.js with a PHP backend, and am using the sample backend provided: Sample Backend
I make the call from my javascript page via:
var r = new Resumable({
target:'backend.php',
chunkSize:1*1024*1024,
simultaneousUploads:4,
testChunks:false,
throttleProgressCallbacks:1
});
However, it seems to log this error when it reaches this line in the PHP file
if (!@move_uploaded_file($file['tmp_name'], $dest_file)) {
_log('Error saving (move_uploaded_file) chunk '.$_POST['resumableChunkNumber'].' for file '.$_POST['resumableFilename'].'tmp_name: '.$file['tmp_name']);
This is the log
16.01.2013: Error saving (move_uploaded_file) chunk 1 for file Invoice-2010-04-30.xls tmp_name/tmp/phpqggZ0O
Is there a specific reason why? The PHP I'm using is the exact one taken from the link above.
Source: (StackOverflow)
I have a task to implement resumable in Yii, and I implemented upload control, but never Resumable before.
public function actionUpload()
{
$model=new User;
if(isset($_POST['User'])) {
$model->attributes=$_POST['User'];
$model->image=CUploadedFile::getInstance($model,'image');
if($model->save()) {
$model->image->saveAs('upload/'.$model->image->name);
$this->redirect(array('view','id'=>$model->uUserID));
}
}
$this->render('upload',array('model'=>$model));
}
The task is to chunk file in small pieces.
Example: one file can be 1 GB. And I try to send that file with rest service.
Source: (StackOverflow)
I'm trying to upload a file from Android filesystem via resumable.js. I set up my Resumable-Object and use .fileAdd to add the file I requested from the local filesystem. According to the Documentation the event 'fileAdded' should be fired if a file was added. But it isn't.
So, is it possible at all to add a file from file system or do I have to use the '.assignBrowse'-Method to add a file from UI ?
Here's what I did:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
var resumable = new Resumable({
target: 'v16/chunk',
chunkSize: 1024 * 128
});
fileSystem.root.getFile(theFileName, {create: false}, function(fileEntry){
resumable.addFile(fileEntry); // File from file system
console.log("manual add");
resumable.files.forEach(function(item){
// log the added files
console.log(item.fileName);
console.log(item.relativePath); // undefined
console.log(item.size); // NaN
});
console.log("Size " + resumable.getSize()); // NaN
resumable.on('fileAdded', function(file){
console.log("File Added"); // Shouldn't this be called?
resumable.upload();
});
}, that.get('fail'));
}, that.get('fail'));
Source: (StackOverflow)
i'm working on a file upload to upload large files up to 2GB. Therefore i need to make sure that the download resumes even after the browser crashed or something. resumable.js looked very promising to me, so i gave it try:
<a rel='nofollow' href="#" id="browseButton">Select files</a>
<!-- JAVASCRIPT -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/resumable.js"></script>
<script>
var r = new Resumable({
target: "upload.php"
});
r.assignBrowse(document.getElementById("browseButton"));
r.on('fileAdded', function(data) {
// File added, start uploading
r.upload();
});
r.on('fileProgress', function(data) {
console.log(Math.floor(r.progress()*100) + '%');
});
</script>
For my upload.php (which creates a file out of the chunks) i used this php backend example: https://github.com/23/resumable.js/blob/master/samples/Backend%20on%20PHP.md
The upload works just fine, even large files, but i can't find anything useful to resume a download if i accidently closed the open tab or my browser. The php backend script seems to have implemented something to make this work:
//check if request is GET and the requested chunk exists or not. this makes testChunks work
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$temp_dir = 'temp/'.$_GET['resumableIdentifier'];
$chunk_file = $temp_dir.'/'.$_GET['resumableFilename'].'.part'.$_GET['resumableChunkNumber'];
if (file_exists($chunk_file)) {
header("HTTP/1.0 200 Ok");
} else
{
header("HTTP/1.0 404 Not Found");
}
}
And the Resumable.js documentation says:
This 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 since i'm not that good at server side programming / configuration, i'm not sure how to implement that feature / check if there is an upload that can be resumed. Does anybody ran into similar problems and could explain me how to resume downloads after browser restarts?
Source: (StackOverflow)
I am trying to append hashing with resumable.JS , hooking "fileAdded" event.
How can we append hash with each chunk?
Source: (StackOverflow)
I am using resumable js in my project to handle the multiple simultaneous, stable and resumable uploads.I could communicate with the service end-point written in scala. But, while uploading the file in S3 i am getting the error in client side resumable js like fire:fileError.
The following configuration are used in resumable js,
var r = new Resumable({
target:targVar,
chunkSize:1*1024*1024,
fileParameterName:'chunk',
forceChunkSize: true,
testChunks: false,
method: 'multipart'
});
// Resumable.js isn't supported, fall back on a different method
if(!r.support) {
$('.resumable-error').show();
} else {
// Show a place for dropping/selecting files
$('.resumable-drop').show();
r.assignDrop($('.resumable-drop')[0]);
r.assignBrowse($('.resumable-browse')[0]);
// Handle file add event
r.on('fileAdded', function(file){
// Show progress pabr
$('.resumable-progress, .resumable-list').show();
// Show pause, hide resume
$('.resumable-progress .progress-resume-link').hide();
$('.resumable-progress .progress-pause-link').show();
// Add the file to the list
$('.resumable-list').append('<li class="resumable-file-'+file.uniqueIdentifier+'">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>');
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-name').html(file.fileName);
//Actually starting the upload
r.upload();
});
r.on('pause', function(){
// Show resume, hide pause
$('.resumable-progress .progress-resume-link').show();
$('.resumable-progress .progress-pause-link').hide();
});
r.on('complete', function(){
// Hide pause/resume when the upload has completed
$('.resumable-progress .progress-resume-link, .resumable-progress .progress-pause-link').hide();
});
r.on('fileSuccess', function(file,message){
// Reflect that the file upload has completed
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html('(completed)');
});
r.on('fileError', function(file, message){
// Reflect that the file upload has resulted in error
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html('(file could not be uploaded: '+message+')');
}); */
r.on('fileProgress', function(file){
// Handle progress for both the file and the overall upload
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html(Math.floor(file.progress()*100) + '%');
$('.progress-bar').css({width:Math.floor(r.progress()*100) + '%'});
});
}
I am working on the issue more than 2 days but i couldn't resolve.Could anybody help me to resolve this issue...
Source: (StackOverflow)
So I am using resumable.js to upload files to a server.
The directory that I want to save to is something like
/dir/files/upload/
Obviously just made up, but this directory has user permissions to write to it.
I am using JSP to listen to the POST request that resumable.js makes, and writing the
.part
files to that directory.
Sample listener:
<% if(request.getMethod().equals("POST") && request.getParameter("resumableFilename") != null){
long chunkSize = StringUtils.isEmpty(request.getParameter("resumableChunkSize"))? 0:Long.parseLong(request.getParameter("resumableChunkSize"));
String fileName = request.getParameter("resumableFilename");
long totalSize = StringUtils.isEmpty(request.getParameter("resumableTotalSize"))? 0:Long.parseLong(request.getParameter("resumableTotalSize"));
String temp_dir = "/dir/files/upload/"+request.getParameter("resumableIdentifier");//Add in user_id
String dest_dir = temp_dir+fileName+".part"+request.getParameter("resumableChunkNumber");
File fDir = new File(temp_dir);
fDir.mkdirs();
if(ServletFileUpload.isMultipartContent(request)){
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setRepository(new File(temp_dir)); ServletFileUpload upload = new ServletFileUpload(factory);
List items = upload.parseRequest(request);
ArrayListIterator iter = (ArrayListIterator)items.iterator();
FileItem item = (FileItem)iter.next();
File fileWithNewDir = new File(dest_dir);
item.write(fileWithNewDir); // write file to dest_dir (fileName.part*CHUNK_NUM*)
}
}
%>
The script is hosted on
www.site.com/pubs/res.jsp
According to the JS itself for resumable, the process of uploading it gets completed, however, a new directory is not made at all. I know it's not the write permissions, so it must be something else.
Here is my call in javascript for a new resumable object
var resume = new Resumable({
target:"res.jsp",
resumableChunkSize: 1*1024*1024,
simultaneousUploads: 3,
testChunks: false,
throttleProgressCallbacks: 1
});
It seems to be hitting the jsp file, but nothing is happening.
I followed Apache's fileupload page in order to implement that listener, but maybe I went wrong at some point.
Apache's FileUpload
Resumable.js
Source: (StackOverflow)
first time i am using AWS and s3 i have to integrate it with salesforce for uploading large files when i try to upload a file
it is giving me error
OPTIONS https://s3.amazonaws.com/ritesh 403 (Forbidden) resumable.js:344
XMLHttpRequest cannot load https://s3.amazonaws.com/ritesh. Origin https://c.ap1.visual.force.com is not allowed by Access-Control-Allow-Origin.
i am using resumable.js(a javascript library for sending big files in chunk)
as you can see i am sending file from url https://c.ap1.visual.force.com then i tried to send it
the code segment from where i am sending file is
var r = new Resumable({
target:'https://s3.amazonaws.com/ritesh',
chunkSize:1*1024*1024,
simultaneousUploads:4,
testChunks:false,
throttleProgressCallbacks:1,
query:{ 'key': 'Hello10' ,'AWSAccessKeyId': '*********' ,'policy':'{!$RemoteAction.S3FormController.getPolicy1}' ,'signature':'{!$RemoteAction.S3FormController.getSignedPolicy1}', 'acl': '{!AWS_S3_Object__c.Access__c}','success_action_status':'201' , 'success_action_redirect':'https://'+'{!$RemoteAction.S3FormController.getServerURL1}'+'/'+'{!AWS_S3_Object__c.id}' ,'Content-Type' :'application/zip' }
});
because i am using an existing JS library thats why its looking little weired.this code means i am sending a post request to
https://s3.amazonaws.com/ritesh
ritesh is my bucket name
setting other post parameters like key ,AWSAccessKeyId,policy,signature,acl,success_action_status etc all parameters are praobably correct why i am getting this error.my Cors Configuration is
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>https://c.ap1.visual.force.com/</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
i am sending only parameters not any header should i have to send additional headers which headers please menton!!please please help how to remove this error
Source: (StackOverflow)
I've successfully managed to upload multiple files in chunks to a server using ResumableJS. During the upload process the user is able to see the overall upload progress and the individual file upload percentage. It's also possible to pause/resume the overall upload.
What i would like to now is allow the user to cancel/abort an individual file upload without interrupting the other file uploads.
In ResumableJS website there are some methods that allow to do what i want, but no examples on how to accomplish this.
I have tried the following:
onclick="ResumableFile.abort(); return(false);"
onclick="file.abort(); return(false);"
onclick="this.abort(); return(false);"
How may i abort a specific file upload without interrupting the overall file upload?
UPDATE: Here is my JS code:
var r = new Resumable({
target: 'FileHandler.ashx'
});
// Resumable.js isn't supported, fall back on a different method
if (!r.support)
{}
else
{
// Show a place for dropping/selecting files
$('.resumable-drop').show();
r.assignDrop($('.resumable-drop')[0]);
r.assignBrowse($('.resumable-browse')[0]);
// Handle file add event
r.on('fileAdded', function (file)
{
//// Add the file to the list
$('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span> <button type="button" id="removeButton" onclick="abortFile();">Remove</button>');
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);
// Actually start the upload
r.upload();
});
//var file = new ResumableFile();
//$("#removeButton").on("click", function ()
//{
// console.log("abort!");
// file.abort();
//});
function abortFile()
{
console.log("abort!");
r.abort();
}
r.on('pause', function ()
{
// Show resume, hide pause main progress bar
});
r.on('complete', function ()
{
// Hide pause/resume when the upload has completed
});
r.on('fileSuccess', function (file, message)
{
// Reflect that the file upload has completed
});
r.on('fileError', function (file, message)
{
// Reflect that the file upload has resulted in error
});
r.on('fileProgress', function (file)
{
// Handle progress for both the file and the overall upload
});
}
With Ruben Rutten's help here is how i solved my issue:
// Handle file add event
r.on('fileAdded', function (file)
{
// Show progress bar
// Show pause, hide resume
//// Add the file to the list
$('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span> <button type="button" class="removeButton" id="' + file.uniqueIdentifier + '">Remove</button>');
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);
///event to remove file from upload list
$(".removeButton").on("click", function ()
{
for (var i = 0; i < r.files.length; i++)
{
var identifier = $(this).attr("id");
if (r.files[i].uniqueIdentifier == identifier)
{
r.files[i].cancel();
$('.resumable-file-' + identifier).remove();
}
}
});
r.upload();
});
Source: (StackOverflow)
I am (unfortunately) working on a Windows machine so I had to manually add the FileCollection package to my app, but when I run my app, I can access the file collection and file collection methods from the browser console. However, I can't seem to get the event listeners set up on an actual page. (FYI, I am using iron-router for my templating architecture.)
It seems like the code that needs to be called is just not coming in the right order, but I've experimented with where I place the code and nothing seems to make a difference.
The server side code:
// Create a file collection, and enable file upload and download using HTTP
Images = new fileCollection('images',
{ resumable: true, // Enable built-in resumable.js upload support
http: [
{ method: 'get',
path: '/:_id', // this will be at route "/gridfs/images/:_id"
lookup: function (params, query) { // uses express style url params
return { _id: params._id }; // a mongo query mapping url to myFiles
}
}
]
}
);
if (Meteor.isServer) {
// Only publish files owned by this userId, and ignore
// file chunks being used by Resumable.js for current uploads
Meteor.publish('myImages',
function () {
return Images.find({ 'metadata._Resumable': { $exists: false },
'metadata.owner': this.userId });
}
);
// Allow rules for security. Should look familiar!
// Without these, no file writes would be allowed
Images.allow({
remove: function (userId, file) {
// Only owners can delete
if (userId !== file.metadata.owner) {
return false;
} else {
return true;
}
},
// Client file document updates are all denied, implement Methods for that
// This rule secures the HTTP REST interfaces' PUT/POST
update: function (userId, file, fields) {
// Only owners can upload file data
if (userId !== file.metadata.owner) {
return false;
} else {
return true;
}
},
insert: function (userId, file) {
// Assign the proper owner when a file is created
file.metadata = file.metadata || {};
file.metadata.owner = userId;
return true;
}
});
}
The client side code (currently in main.js at the top level of the client dir):
if (Meteor.isClient) {
// This assigns a file upload drop zone to some DOM node
Images.resumable.assignDrop($(".fileDrop"));
// This assigns a browse action to a DOM node
Images.resumable.assignBrowse($(".fileBrowse"));
// When a file is added via drag and drop
Images.resumable.on('fileAdded', function(file) {
// Create a new file in the file collection to upload
Images.insert({
_id : file.uniqueIdentifier, // This is the ID resumable will use
filename : file.fileName,
contentType : file.file.type
}, function(err, _id) {// Callback to .insert
if (err) {throwError('Image upload failed');}
// Once the file exists on the server, start uploading
Images.resumable.upload();
});
});
Images.resumable.on('fileSuccess', function(file) {
var userId = Meteor.userId();
var url = '/gridfs/images/' + file._id;
Meteor.users.update(userId, {
$set : {
"profile.$.imageURL" : url
}
});
Session.set('uploading', false);
});
Images.resumable.on('fileProgress', function(file) {
Session.set('uploading', true);
});
}
Source: (StackOverflow)