-
-
Notifications
You must be signed in to change notification settings - Fork 166
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sample Code for Meteor Pause and Abort (JS and Blaze) #135
Comments
Sure: <template name="uploadForm">
{{#with currentUpload}}
Uploading <b>{{file.name}}</b>:
<span id="progress">{{progress.get}}%</span>
<button id="toggle" type="button">
{{#if onPause}}
Continue
{{else}}
Pause
{{/if}}
</button>
{{else}}
<input id="fileInput" type="file" />
<p><small>Upload file in <code>jpeg</code> or <code>png</code> format, with size less or equal to 10MB</small></p>
{{/with}}
</template> Template.uploadForm.events({
'change #fileInput': function (e, template) {
/* ... */
},
'click #toggle': function (e) {
e.preventDefault();
this.toggle()
return false;
}
}); |
Hey @manusharma1 , |
Hi @dr-dimitru Thanks for your code. I tried but it didn't work I am getting this following error : TypeError: this.toggle is not a function Below is My Code JS
Template
Note that : in the tenplate instead of {{with}} , I am using {{if}} Also Could you also provide the code for Abort, That would be so great of you. Thanks and Best Regards, |
Then use: Template.uploadForm.events({
'change #fileInput': function (e, template) {
/* ... */
},
'click #toggle': function (e, template) {
e.preventDefault();
template.currentUpload.toggle()
return false;
}
}); For abort is same: <button id="abort" type="button">
Abort
</button> Template.uploadForm.events({
'change #fileInput': function (e, template) {
/* ... */
},
'click #toggle': function (e, template) {
e.preventDefault();
template.currentUpload.toggle()
return false;
},
'click #abort': function (e, template) {
e.preventDefault();
template.currentUpload.abort()
return false;
}
}); |
@manusharma1 can we close this one? |
Hi @dr-dimitru , Sorry for the delay in reply. Its still giving me error : TypeError: t.currentFile.toggle is not a function TypeError: t.currentFile.abort is not a function Below is the code: TEMPLATE
TEMPLATE EVENTS
TEMPLATE HELPER
TEMPLATE ON CREATED
Thanks again for your help. I think that something is missing may be, you can have a look at the code above, Thanks and Best Regards, |
Could you console.log(this, template) in template events map? |
Hi @dr-dimitru , It giving me output : 2 Object data, The template output is below d.TemplateInstance_allSubsReady: false_allSubsReadyDep: t.Dependency_subscriptionHandles: ObjectcurrentFile: rdata: ObjectfirstNode: brlastNode: div#outer-container.tab-containerview: d.View__proto__: Object Below is the Screenshot of the console. Thanks and Best Regards, |
Hmm... any idea why |
Hi @dr-dimitru , I think its because of this TEMPLATE ON CREATED
You are so good, Thanks for your help, I really appreciate you.. Thanks and Best Regards, |
Sorry By Mistake I clicked the Close and Comment, Please help :) |
Do you attach events to the |
Hi @dr-dimitru Yes I have done in the same template, although there are lots of other events in the same template but all are different events. I don't know when they are trigging, why they are not working? Thanks and Best Regards, |
Could you please publish here the template and its controller. Then I'll try to reproduce it on my end. |
Sure I will do the needful, As I have told you that the template has some other functions also, Let me remove them and paste only upload specific code. I will update you soon. Thanks and Best Regards, |
Hi @dr-dimitru , Sorry for late reply. Below is my Code: TEMPLATE HTML <template name="project_screen_new_project_view_tabs">
{{#if currentFile}}
Uploading <b>{{currentFile.file.name}}</b>:
<span id="progress">{{currentFile.progress.get}}%</span>
<button id="documentuploadtoggle" type="button">
{{#if onPause}}
Continue
{{else}}
Pause
{{/if}}
</button>
<button id="abortuploadtoggle" type="button">
Abort
</button>
{{/if}}
<form name="addnewprojectdocument" id="addnewprojectdocument" method="post" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<label class="control-label" for="textinput">Document </label>
<div class="controls">
<input type="file" id="project_document_file" name="project_document_file" placeholder="Project Document File" class="image-upload-class" /> (Max Size: 25 MB)<br />Allowed File Types : doc,pdf,docx,xls,ppt,pptx,xlsx,pptx,jpg,png,mp3,mp4
</div>
</div>
<br />
<div class="control-group">
<label class="control-label" for="textinput">Document Name</label>
<div class="controls">
<input id="project_document_name" name="project_document_name" maxlength="100" placeholder="Project Document Name" size="30" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectbasic">Document Type</label>
<div class="controls">
<select id="project_document_type" name="project_document_type" style="width:245px;">
<option value="">--Select--</option>
<option value="7Gjmv3KtD8YWPevhg">DOC TYPE 1</option>
<option value="XBZAoCqFyJCgAFuBr">DOC TYPE 2</option>
<option value="xMH6E83aw2PoqAGtm">DOC TYPE 3</option>
</select>
</div>
</div>
</fieldset>
<br /><br />
<input type="submit" name="Submit" value="Add File" class="btn btn-xs btn-primary">
</form>
</template> CLIENT SIDE if (Meteor.isClient) {
Template.project_screen_new_project_view_tabs.helpers({
currentFile: function () {
return Template.instance().currentFile.get();
}
});
Template.project_screen_new_project_view_tabs.events({
'submit #addnewprojectdocument': function(event,template){
event.preventDefault();
var currentUser = Meteor.userId();
var fileObj1 = template.find('.image-upload-class').files[0];
var filesize = (fileObj1.size / 1048576).toFixed(2);
var project_document_name = $('[name=project_document_name]').val();
var project_document_type = $('[name=project_document_type]').val();
var projectid = Router.current().params._id;
if (template.find('.image-upload-class').files[0]) {
var file = template.find('.image-upload-class').files[0];
if (file) {
var uploadInstance = ProjectDocumentsUploads.insert({
file: file,
meta: {
project_document_name: project_document_name,
project_document_type: project_document_type,
document_project_id: projectid,
createdBy: currentUser,
createdDate: new Date()
},
streams: 'dynamic',
chunkSize: 'dynamic'
}, false);
uploadInstance.on('start', function() {
$('#documentuploadingdiv').removeClass('fade').addClass('show');
$('#documentuploadingdiv').modal('show');
template.currentFile.set(this);
});
uploadInstance.on('error', function(error) {
console.error(error);
template.currentFile.set(false);
});
uploadInstance.on('end', function(error, fileObj) {
if (error) {
alert('Error during upload: ' + error.reason);
} else {
//console.log(fileObj);
$('#documentuploadingdiv').removeClass('show').addClass('fade');
//alert('File "' + fileObj.name + '" successfully uploaded');
$('#documentuploadingdiv').modal('hide');
alert('success','File "' + fileObj.name + '" successfully uploaded');
$('[name=project_document_file]').val('');
$('[name=project_document_name]').val('');
$('[name=project_document_type]').val('');
}
template.currentFile.set(false);
});
uploadInstance.start();
}
}
},
'click #documentuploadtoggle': function (e, template) {
e.preventDefault();
template.currentFile.toggle();
console.log(this, template);
return false;
},
'click #abortuploadtoggle': function (e, template) {
e.preventDefault();
template.currentFile.abort();
console.log(this, template);
return false;
}
});
Template.project_screen_new_project_view_tabs.onCreated(function () {
this.currentFile = new ReactiveVar(false);
});
} SERVER SIDE if (Meteor.isServer) {
Meteor.publish('ProjectDocumentsUploads', function(){
return ProjectDocumentsUploads.collection.find({});
});
}
**COMMON CODE**
this.ProjectDocumentsUploads = new Meteor.Files({
storagePath: '/uploads/',
collectionName: 'ProjectDocumentsUploads',
allowClientCode: true,
onBeforeUpload: function (file) {
if (file.size <= 26214400 ){
return true;
}else{
return 'Please upload file with size equal or less than 25MB';
}
}
}); Please let me know if you need any other information from my side, Once again Thank You very much for your help and support. Thanks and Best Regards, |
Looks good to me. |
Hi @dr-dimitru , OK, I will get back to you soon on this. Let me try what you are suggesting Thanks and Best Regards, |
@manusharma1 any news? |
Hi @dr-dimitru , Let me do some more tests and I will get back on this, probably by next week, then we can close this. Thanks for your patience. Thanks and Best Regards, |
@manusharma1 if |
Hi @dr-dimitru , I have tested it and its working fine, except the following code
Button Always shows Continue for Pause, I think some small function is required in helper?. Please suggest. After that we can Close this and I will put the right code for others to refer. Thanks and Best Regards, |
Yes, helper or gust invoke {{#if onPause.get}}
Continue
{{else}}
Pause
{{/if}} |
Hi @dr-dimitru Sorry to bother you, Today I have uploaded on the Server and tested it there it has presented me with new issue. The abort is happening and file upload stop and show 0 KB to some KB Size (Not Full Size of the original file) and Entry is getting created in the collection. This issue is not happening locally on my Windows Machine. I will do some more tests again and will update you. Thanks and Best Regards, |
|
Hi @dr-dimitru ,
Let me check it by enabling the debug mode and I will get back on this. Thanks and Best Regards, |
Hi @dr-dimitru , I have enabled the debug and below are the logs Logs for AbortClient Side Logs e994974….js?meteor_js_resource=true:177 [FilesCollection] [insert()] Server Side Logs [FilesCollection] [Write Method] [DDP] Got #1/3 chunks, dst: Chrysanthemum.jpg You can see that Abort Method has run as well as Write Method has also finished. Logs for PauseClient Side [FilesCollection] [insert()] e99497472d6626f47398242a51aa1bbda21ad122.js:177:22234 Server Side [FilesCollection] [Write Method] [DDP] Got #1/3 chunks, dst: Chrysanthemum.jpg Please do let me know if you want some more details. Thanks and Best Regards, |
|
Hi @dr-dimitru No Abort is happening only when user clicks the abort button which then triggers the abort() method, Otherwise the abort will not happen and file upload perfectly fine. Please let me know if you need any other information from my side. Thanks and Best Regards, |
There is some changes about |
Hi @dr-dimitru , Thanks for this information, I will check it and will get back on this. Thanks and Best Regards, |
@manusharma1 waiting for update in this from your end |
@manusharma1 it's been a while, any news? |
Hi @dr-dimitru , Got Stuck in something, I will get back to you in 2-3 days time, Sorry for the delay from my side. Thanks and Best Regards, |
@manusharma1 just keep me updated. |
Hi @dr-dimitru , As you said to upgrade to version 1.7.0, I tried to upgrade, But when I run the command - meteor update ostrio:files It gave me the following message: The specified packages are at their latest compatible versions. I also tried to remove the current packages: ostrio:files and then add them again, then I got the following versions installed: ostrio:cookies@2.0.4 So whether I am updating it or reinstalling it I am getting the version 1.5.6 Any Suggestions? Thanks and Best Regards, |
@manusharma1 looks like you're on old Meteor version, are you? |
Hi @dr-dimitru , Yes mine version is old, I have just tried to update to latest and my application broke due to some conflicts, I think I need more time at my end to first resolve the conflicts which are arising due to meteor update, Let me get back on this. If you want just put this Issue ON HOLD Thanks and Best Regards, |
@manusharma1 we cool. Just ping me when you're ready |
Hi @dr-dimitru , I hope you are doing good. Managed to rectify the issues that were coming after meteor update and resulted to conflicts with some other packages. Need some more testing I will try to test abort issue on the server by this weekend and will get back to you. Appreciate your help and patience Thanks and Best Regards, |
@manusharma1 good to hear you. Thank you for update |
Hi @dr-dimitru I have upgraded meteor with all the uptodate packages, All worked fine at my local machine, when I uploaded the build to the Server, I am unable to start my app the follwoing is the error that I am getting assert.js:93 I have seen this issue has been reported by many others and might be related to the Node Version but I am not sure what is this issue, Can you Please put some light on this? Thanks and Best Regards, |
Hmmm... never faced it.
|
Hi @dr-dimitru , The same code is working absolutely fine at my local Windows Machine, but as I am creating a build and uploading and installing that build on the server, I am facing this issue, I am not sure about these files. Thanks and Best Regards, |
Why? Do you use To make sure it's build/platform issue, unpack builded app locally and run |
Hi @dr-dimitru , Yes, I always give architecture like this meteor build path --architecture os.linux.x86_64 Also I have tested the build using node main.js on Windows Machine and all is working fine without any issue. I and doing some research on why on Ubuntu Linux, this issue is coming Thanks and Best Regards, |
Thank you for update. |
HI @manusharma1 , Any good news on your end? |
Hi @dr-dimitru , Sorry about the delay, I am running this project on Shared Server, so there are other projects also running, I am taking to the System Admin and other Teams so that when I update node it won't break other projects. Please give me some time, I will update you Thanks and Best Regards, |
Hi @dr-dimitru , Just to update you right now I have version : v0.10.46 on my Ubuntu Server, I am taking with other teams so that it won't effect their applications, Will update you soon. Thanks and Best Regards, |
Hi @dr-dimitru , At my end its taking time as I mentioned that other projects are also working on the same server , Please close this Issue of now, whenever I will get chance to upgrade the Node Version, I will get back on this and then will further discuss this if required Thanks for your patience and support on this. Thanks and Best Regards, |
Hey @manusharma1 , If you've enjoyed by my support, please support this project by:
|
Hi @dr-dimitru ,
I hope that you are doing well.
Could you please provide the sample code for Pause and Upload for Meteor JS and Template, I was referring here but could not find:
https://github.com/VeliovGroup/Meteor-Files/tree/master/demo-simplest-upload/client
Thanks and Best Regards,
Manu
The text was updated successfully, but these errors were encountered: